網(wǎng)上有很多教程實(shí)現(xiàn)底部導(dǎo)航欄扳剿，這里我就我用的這種radioGroup+rdioButton+fragment娶桦，做一記錄浦楣。
- RadioButton 有默認(rèn)的選中和非選中的樣式，默認(rèn)顏色是 colorAcent 政供，效果如下圖所示：
RadioGroup效果圖.png
因此我們要采用 RadioGroup 這種方式來實(shí)現(xiàn)底部導(dǎo)航欄的話播聪，首先需要去掉它的默認(rèn)樣式朽基，所以我們來定義一個(gè) style：
res->values->styles.xml
<style name="RadioGroupButtonStyle">
<!--去除button默認(rèn)樣式-->
<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="關(guān)于"
android:drawableTop="@drawable/tab_me_selector"
style="@style/RadioGroupButtonStyle"/>
</RadioGroup>
</LinearLayout>
添加一個(gè) RadioGroup 和四個(gè) RadioButton , 因?yàn)槿サ袅嗽瓉淼臉邮剑虼艘O(shè)置我們每個(gè) RadioButton 顯示的圖標(biāo)离陶。
- 布局文件好了之后稼虎，看一下 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;//當(dāng)前顯示的碎片
@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) {
//判斷當(dāng)前顯示的Fragment是不是切換的Fragment
if(mFragment != fragment) {
//判斷切換的Fragment是否已經(jīng)添加過
if (!fragment.isAdded()) {
//getSupportFragmentManager().popBackStack();
//如果沒有，則先把當(dāng)前的Fragment隱藏招刨，把切換的Fragment添加上
getSupportFragmentManager().beginTransaction().replace(R.id.main_fragment,fragment).addToBackStack(null).commit();
} else {
//getSupportFragmentManager().popBackStack();
//如果已經(jīng)添加過杨名，則先把當(dāng)前的Fragment隱藏猜旬，把切換的Fragment顯示出來
getSupportFragmentManager().beginTransaction().replace(R.id.main_fragment,fragment).addToBackStack(null).commit();
}
mFragment = fragment;
}
}
}
- 在 onCheckedChanged 回調(diào)里面切換 Fragment 就行了媳纬。因?yàn)?RadioButton 有 check 和 unCheck 狀態(tài)填渠，直接使用 selector 就能切換狀態(tài)的圖標(biāo)和 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>
- 其它的實(shí)現(xiàn)方式參考 : https://juejin.im/post/5901b564570c35005804424b
