Android菜鸟练习第十课 通过RadioButton设置主页导航栏

第一部分 布局部分

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <RadioGroup
        android:layout_alignParentBottom="true"
        android:id="@+id/tabs_rg"
        android:background="#f3f3f3"
        android:layout_width="fill_parent"
        android:layout_height="53dp"
        android:gravity="center"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/tab_rb_home"
            style="@style/common_rdoBtnTabs"
            android:checked="true" //用来设置RadioButton的当前选中状态      
            android:drawableTop="@drawable/selector_tab_home"//文字上方图片的selector
            android:text="首页"
            android:textColor="@color/selector_tab_color" /> //文字的选中时和未选中时的颜色设置

        <RadioButton
            android:id="@+id/tab_rb_mine"
            style="@style/common_rdoBtnTabs"  //为RadioButton定义样式
            android:drawableTop="@drawable/selector_tab_mine"
            android:text="我的"
            android:textColor="@color/selector_tab_color" />

        <RadioButton
            android:id="@+id/tab_rb_service"
            style="@style/common_rdoBtnTabs"
            android:drawableTop="@drawable/selector_tab_service"
            android:text="服务"
            android:textColor="@color/selector_tab_color" />
    </RadioGroup>


</RelativeLayout>

第二部分 RadioButton上方图片的Selector PS:位于drawable文件夹下，Selector中的默认图片和选中状态下的图片需要放在drawablet-xhdpi文件夹下否则最后加载出来的图片会发生变形
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 默认时的图片 -->
    <item android:drawable="@drawable/tab_home" android:state_checked="false"/>
    <!-- 选择时的图片 -->
    <item android:drawable="@drawable/tab_home_selected" android:state_checked="true"/>

</selector>

第三部分 RadioButton中文字点击效果的设置 PS:在res下创建color文件，在文件中创建如下selector,selector中的颜色设置位于values的colors当中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:state_checked="true" android:color="@color/tab_text_select"/>
    <item android:color="@color/tab_text_defult"/>

</selector>

第四部分 在values下的styles中定义RadioButton的样式

<style name="common_rdoBtnTabs">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">40dp</item>
    <item name="android:layout_weight">1.0</item>
    <item name="android:background">@null</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:singleLine">true</item>
    <item name="android:textSize">12sp</item>
</style>

第五部分 Activity部分

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
    public RadioGroup mTabRg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabRg = (RadioGroup) findViewById(R.id.tabs_rg);
        mTabRg.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId){
            case R.id.tab_rb_home:
                Toast.makeText(MainActivity.this,"首页",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tab_rb_mine:
                Toast.makeText(MainActivity.this,"我的界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tab_rb_service:
                Toast.makeText(MainActivity.this,"服务界面",Toast.LENGTH_SHORT).show();
                break;
        }
    }
}