网上有很多教程实现底部导航栏，这里我就我用的这种radioGroup+rdioButton+fragment，做一记录。
- RadioButton 有默认的选中和非选中的样式，默认颜色是 colorAcent ，效果如下图所示：
RadioGroup效果图.png
因此我们要采用 RadioGroup 这种方式来实现底部导航栏的话，首先需要去掉它的默认样式，所以我们来定义一个 style：
res->values->styles.xml
<style name="RadioGroupButtonStyle">
<!--去除button默认样式-->
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">#696969</item>
</style>
- 布局文件
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.bbw.weather.MainActivity">
<FrameLayout
android:id="@+id/main_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.6"
android:background="#808080"/>
<RadioGroup
android:id="@+id/radio_group_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="#fff">
<RadioButton
android:id="@+id/radio_button_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:drawableTop="@drawable/tab_home_selector"
style="@style/RadioGroupButtonStyle"/>
<RadioButton
android:id="@+id/radio_button_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="收藏"
android:drawableTop="@drawable/tab_like_selector"
style="@style/RadioGroupButtonStyle"/>
<RadioButton
android:id="@+id/radio_button_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加"
android:drawableTop="@drawable/tab_add_selector"
style="@style/RadioGroupButtonStyle"/>
<RadioButton
android:id="@+id/radio_button_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="关于"
android:drawableTop="@drawable/tab_me_selector"
style="@style/RadioGroupButtonStyle"/>
</RadioGroup>
</LinearLayout>
添加一个 RadioGroup 和四个 RadioButton , 因为去掉了原来的样式，因此要设置我们每个 RadioButton 显示的图标。
- 布局文件好了之后，看一下 Activity 中的代码：
package com.example.bbw.weather;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.example.bbw.weather.Fragments.AboutFragment;
import com.example.bbw.weather.Fragments.AddFragment;
import com.example.bbw.weather.Fragments.HomeFragment;
import com.example.bbw.weather.Fragments.LikeFragment;
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
private RadioGroup mRadioGroup;
private RadioButton radio_button_home, radio_button_like, radio_button_about, radio_button_add ;
private Fragment homeFragment, likeFragment, aboutFragment, addFragment;
private Fragment mFragment;//当前显示的碎片
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().add(R.id.main_fragment,homeFragment).commit();
mFragment = homeFragment;
}
private void initView() {
mRadioGroup = (RadioGroup) findViewById(R.id.radio_group_button);
radio_button_home = (RadioButton) findViewById(R.id.radio_button_home);
radio_button_about = (RadioButton) findViewById(R.id.radio_button_me);
radio_button_add = (RadioButton) findViewById(R.id.radio_button_add);
radio_button_like = (RadioButton) findViewById(R.id.radio_button_like);
mRadioGroup.setOnCheckedChangeListener(this);
homeFragment = new HomeFragment();
aboutFragment = new AboutFragment();
addFragment = new AddFragment();
likeFragment = new LikeFragment();
}
@Override
public void onCheckedChanged(RadioGroup radioGroup,int checkId) {
switch (checkId){
case R.id.radio_button_home:
radio_button_home.setChecked(true);
radio_button_about.setChecked(false);
radio_button_add.setChecked(false);
radio_button_like.setChecked(false);
switchFragment(homeFragment);
break;
case R.id.radio_button_like:
radio_button_home.setChecked(false);
radio_button_about.setChecked(false);
radio_button_add.setChecked(false);
radio_button_like.setChecked(true);
switchFragment(likeFragment);
break;
case R.id.radio_button_add:
radio_button_home.setChecked(false);
radio_button_about.setChecked(false);
radio_button_add.setChecked(true);
radio_button_like.setChecked(false);
switchFragment(addFragment);
break;
case R.id.radio_button_me:
radio_button_home.setChecked(false);
radio_button_about.setChecked(true);
radio_button_add.setChecked(false);
radio_button_like.setChecked(false);
switchFragment(aboutFragment);
break;
}
}
public void switchFragment(Fragment fragment) {
//判断当前显示的Fragment是不是切换的Fragment
if(mFragment != fragment) {
//判断切换的Fragment是否已经添加过
if (!fragment.isAdded()) {
//getSupportFragmentManager().popBackStack();
//如果没有，则先把当前的Fragment隐藏，把切换的Fragment添加上
getSupportFragmentManager().beginTransaction().replace(R.id.main_fragment,fragment).addToBackStack(null).commit();
} else {
//getSupportFragmentManager().popBackStack();
//如果已经添加过，则先把当前的Fragment隐藏，把切换的Fragment显示出来
getSupportFragmentManager().beginTransaction().replace(R.id.main_fragment,fragment).addToBackStack(null).commit();
}
mFragment = fragment;
}
}
}
- 在 onCheckedChanged 回调里面切换 Fragment 就行了。因为 RadioButton 有 check 和 unCheck 状态，直接使用 selector 就能切换状态的图标和 check 文字的颜色。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/ic_add_feed" />
<item android:drawable="@drawable/ic_add_feed" />
</selector>
- 其它的实现方式参考 : https://juejin.im/post/5901b564570c35005804424b
