目标:利用RadioButton实现底部导航栏
简介:底部导航栏是现在大部分app都会用到的功能
它帮助用户可以通过导航在不同界面自由切换
实现过程
步骤1:编写布局文件
用RadioGroup和RadioButton完成导航栏的布局
用weight属性来控制所占比例
图片用系统所自带的一些图片
准备一定空间放置FrameLayout用于之后跳转
<?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="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<FrameLayout
android:id="@+id/main_Frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/spe"/>
<RadioGroup
android:id="@+id/main_menu"
android:background="@color/menu"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:id="@+id/RB_discover"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/main_menu_discover"
android:drawableTint="@drawable/menu_color"
android:gravity="center"
android:text="@string/main_menu_discover"
/>
<RadioButton
android:id="@+id/RB_train"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/main_menu_train"
android:drawableTint="@drawable/menu_color"
android:gravity="center"
android:text="@string/main_menu_train"
/>
<RadioButton
android:id="@+id/RB_social"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/main_menu_social"
android:drawableTint="@drawable/menu_color"
android:gravity="center"
android:text="@string/main_menu_social"
/>
<RadioButton
android:id="@+id/RB_me"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/main_menu_me"
android:drawableTint="@drawable/menu_color"
android:gravity="center"
android:text="@string/main_menu_me"
/>
</RadioGroup>
</LinearLayout>
编写完布局文件可以达到以下界面
步骤2:编写代码实现界面跳转
1:创建4个fragment用于跳转不同界面
2:编写changemainFragment()方法监听底部导航变换时使用
3:利用FragmentTransaction的hide方法来隐藏界面,show方法来显示界面
public class MainActivity extends AppCompatActivity {
private RadioGroup mainmenu;
private MeFragment mMeFragment;
private Discover_Fragment mDiscover_fragment;
private SocialFragment mSocialFragment;
private TrainFragment mTrainFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//底部导航监听
changemainFragment(R.id.RB_discover);
mainmenu = (RadioGroup) findViewById(R.id.main_menu);
mainmenu.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
changemainFragment(checkedId);
}
});
}
public void hideAllFragment(FragmentTransaction transaction){
if(mSocialFragment!=null){
transaction.hide(mSocialFragment);
}
if(mTrainFragment!=null){
transaction.hide(mTrainFragment);
}
if(mDiscover_fragment!=null){
transaction.hide(mDiscover_fragment);
}
if(mMeFragment!=null){
transaction.hide(mMeFragment);
}
}
/***
* 切换主fragment
*
*/
public void changemainFragment(int checkedId) {
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
hideAllFragment(fragmentTransaction);
switch (checkedId) {
case R.id.RB_discover: {
if(mDiscover_fragment == null) {
mDiscover_fragment = new Discover_Fragment();
fragmentTransaction.add(R.id.main_Frame, mDiscover_fragment);
}
else {
fragmentTransaction.show(mDiscover_fragment);
}
break;
}
case R.id.RB_me: {
if(mMeFragment == null) {
mMeFragment = new MeFragment();
fragmentTransaction.add(R.id.main_Frame, mMeFragment);
}
else {
fragmentTransaction.show(mMeFragment);
}
break;
}
case R.id.RB_social: {
if(mSocialFragment == null) {
mSocialFragment = new SocialFragment();
fragmentTransaction.add(R.id.main_Frame, mSocialFragment);
}
else {
fragmentTransaction.show(mSocialFragment);
}
break;
}
case R.id.RB_train: {
if(mTrainFragment == null) {
mTrainFragment = new TrainFragment();
fragmentTransaction.add(R.id.main_Frame, mTrainFragment);
}
else {
fragmentTransaction.show(mTrainFragment);
}
break;
}
}
fragmentTransaction.commit();
}
}
最终效果截图(跳转显示的fragment为随意练手用的界面)
作者:林浩
原文链接:点击这里