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;
        }
    }
}