主要在xml中配置RadioButton的图片和文字,并使它们在被选中、按下等显示不同的状态(肯定用selector了),
首先在清单文件中的声明
<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:background="@drawable/bottom_tab_bg"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingTop="2dp" >
<RadioButton
android:id="@+id/rb_function"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/icon_function"
android:text="@string/tab_function" />
<RadioButton
android:id="@+id/rb_news_center"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/icon_newscenter"
android:text="@string/tab_news_center" />
<RadioButton
android:id="@+id/rb_smart_service"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/icon_smartservice"
android:text="@string/tab_smart_service" />
<RadioButton
android:id="@+id/rb_gov_affairs"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/icon_govaffairs"
android:text="@string/tab_gov_affairs" />
<RadioButton
android:id="@+id/rb_setting"
style="@style/main_tab_bottom"
android:drawableTop="@drawable/icon_setting"
android:text="@string/tab_setting" />
</RadioGroup>
RadioGroup的背景是一张灰色图片
主要在于RadioButton的style(文字的三态)和drawableTop(图片的三态)
其中style main_tab_bottom的代码
<style name="main_tab_bottom">
<item name="android:textSize">@dimen/bottom_tab_font_size</item>
<item name="android:textColor">@color/bottom_text_color</item>
<!-- 跑马灯效果 -->
<item name="android:ellipsize">marquee</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/transparent</item>
<item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">fill_parent</item>
<!-- 去掉按钮的立体效果的属性 -->
<item name="android:button">@null</item>
<item name="android:singleLine">true</item>
<item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
<item name="android:layout_weight">1.0</item>
</style>
textColor的值botton_text_color是一个selector,控制文字三态变化
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#E30E0C"/>
<item android:state_checked="true" android:color="#E30E0C"/>
<item android:color="#F8F8F8"/> <!-- not selected -->
</selector>
icon_function也是也是一个selector,控制图片三态变化
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home_press2" android:state_pressed="true"></item>
<item android:drawable="@drawable/home_press2" android:state_checked="true"></item>
<item android:drawable="@drawable/home2"/>
</selector>
代码中得到RadioGroup并设置点击监听器
private RadioGroup main_radio;
main_radio = (RadioGroup) findViewById(R.id.main_radio);
main_radio.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
//按钮点击过程中状态发生改变的方法,记录一个当前选中按钮的索引值
switch (checkedId) {
case R.id.rb_function://首页
index = 0;
break;
case R.id.rb_news_center://新闻中心
index = 1;
break;
case R.id.rb_smart_service://智慧服务
index = 2;
break;
case R.id.rb_gov_affairs://政务指南
index = 3;
break;
case R.id.rb_setting://设置
index = 4;
break;
}
//根据点击选中的索引去做自己的逻辑处理
//...
}
});
//默认选中第一个条目
main_radio.check(R.id.rb_function);