安卓常见布局：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;
}
}