安卓常见布局：RadioButton配合Fragment实现底部菜单栏切换

本次讲的布局特别常见，代码完成后和QQ底部是一个样子

我们现在开始

首先建立几个Fragment，这里只举一例

public class DeviceFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

底部菜单栏的布局 bottom_tabbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_alignParentBottom="true"
    android:orientation="vertical">
    <include layout="@layout/line" />
    <RadioGroup
        android:background="@color/tabbg"
        android:id="@+id/m_RG_Content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/m_RB_Device"
            style="@style/bottomtab"
            android:drawableTop="@drawable/selector_tabbar_icon_device"
            android:text="@string/device" />
        <RadioButton
            android:id="@+id/m_RB_Gallery"
            style="@style/bottomtab"
            android:drawableTop="@drawable/selector_tabbar_icon_gallery"
            android:text="@string/gallery" />
        <RadioButton
            android:id="@+id/m_RB_Setting"
            style="@style/bottomtab"
            android:drawableTop="@drawable/selector_tabbar_icon_setting"
            android:text="@string/setting" />
    </RadioGroup>
</LinearLayout>

其中的style

<!-- 底端tab -->
    <style name="bottomtab">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:background">@null</item>
        <item name="android:drawablePadding">4dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/selector_text_color</item>
        <item name="android:textSize">24sp</item>
    </style>

注意，background这个属性要写，否则会有系统自带的点击特效，如在6.0上有水波纹的点击特效

文字的selector selector_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pressed_text" android:state_checked="true" />
    <item android:color="@color/normal_text" android:state_checked="false" />
</selector>

图片的selector(这里只举一例) selector_tabbar_icon_device.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_equipment_pressed" android:state_checked="true"/>
    <item android:drawable="@drawable/icon_equipment_default"/>
</selector>

在Activity使用（这里使用了ButterKnife，如果不使用，可以改成findViewById(int id)）

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    @BindView(R.id.frame_content)
    FrameLayout frameContent;
    @BindView(R.id.m_RG_Content)
    RadioGroup mRGContent;
    @BindView(R.id.m_RB_Device)
    RadioButton m_RB_Device;
    private FragmentManager mFragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        mFragmentManager = getSupportFragmentManager();
        mRGContent.setOnCheckedChangeListener(this);
        m_RB_Device.setChecked(true);
    }
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        Fragment fragment = FragmentFactory.getInstanceByIndex(checkedId);
        transaction.replace(R.id.frame_content, fragment);
        transaction.commit();
    }
}

Activity的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"/>
    <include layout="@layout/bottom_tabbar"/>
</RelativeLayout>

其中的FragmentFactory，用于创建Fragment对象并返回

public class FragmentFactory {
    public static Fragment getInstanceByIndex(int index) {
        Fragment fragment = null;
        switch (index) {
            case R.id.m_RB_Device:
                fragment = new DeviceFragment();
                break;
            case R.id.m_RB_Gallery:
                fragment = new GalleryFragment();
                break;
            case R.id.m_RB_Setting:
                fragment = new SettingFragment();
                break;
        }
        return fragment;
    }
}