基本實現(xiàn)方式
- 首先創(chuàng)建我們所需要的按鈕的選擇器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/tab_checked" android:state_checked="true" />
<item android:color="@color/tab_unchecked" android:state_checked="false" />
</selector>
我在res/values/color下創(chuàng)建了兩個顏色資源
<color name="tab_checked">#FF4081</color>
<color name="tab_unchecked">#757575</color>
即當前按鈕的選中顏色為粉色，未選中狀態(tài)為灰色
- 準備五張圖標素材
由于我們可以自定義按鈕的選中未選中狀態(tài)，所以我們只需準備一份普通狀態(tài)的即可
在我的github中 github
- 實現(xiàn)menu
在res/創(chuàng)建==menu==資源文件夾，創(chuàng)建 navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_tab1"
android:icon="@drawable/ic_1"
android:title="消息" />
<item
android:id="@+id/item_tab2"
android:icon="@drawable/ic_2"
android:title="聯(lián)系人" />
<item
android:id="@+id/item_tab3"
android:icon="@drawable/ic_3"
android:title="辦公" />
<item
android:id="@+id/item_tab4"
android:icon="@drawable/ic_4"
android:title="應(yīng)用" />
<item
android:id="@+id/item_tab5"
android:icon="@drawable/ic_5"
android:title="我的" />
</menu>
- 接下來就可以在我們的布局文件中創(chuàng)建BottomNavigationView了
在app模塊下的build.gradle中編譯
api 'com.android.support:design:28.0.0-alpha3'
首先我們創(chuàng)建一個最簡單的BottomNavigationView
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bnv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="@drawable/selector_bottom_navigation"
app:itemTextColor="@drawable/selector_bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
</android.support.constraint.ConstraintLayout>
其中有幾個陌生的屬性，在這里需要解釋一下
app:itemIconTint
在這里表示單個圖標的顏色屬性，我們使用了選擇器來設(shè)置
app:itemTextColor
在這里表示單個圖標下的文字的顏色屬性，我們使用了選擇器來設(shè)置
app:menu
我們綁定了自己定義的navigation.xml文件
這樣我們基本的BottomNavigationView就實現(xiàn)了，現(xiàn)在我們運行一下
image
這時候我們發(fā)現(xiàn)，@color/text_checked屬性已經(jīng)顯示在文字和圖標上了。如果我們想要填充格式的圖片。
image
如這種，這時候我們就要重新定義一下menu.xml中的屬性
android:icon
之前我們只是存放的drawable下的圖片資源文件，我們?nèi)绻胗锰畛淠Ｊ降膱D片，就可以使用ColorStateList來實現(xiàn)。設(shè)置我們圖片,在checked=true 或者false下的狀態(tài).就可以了
image
如這種方式。將menu.xml資源文件中的icon替換即可。
那么問題來了，圖中按下狀態(tài)的顏色是藍色，而我們在Layout中給BottomNavigationView定義的屬性==app:itemIconTint==按下狀態(tài)為粉紅色。這樣最后的結(jié)果該顯示成什么樣式。
結(jié)果還是粉色
擴展
實現(xiàn)ViewPager+Fragment+BottomNavigationView
- 實現(xiàn)方式是在布局中實現(xiàn)viewpager控件
- 通過BottomNavigationView 的 setOnNavigationItemSelectedListenerfang() 方法以及 ViewPager的addOnPageChangeListener() 的方法實現(xiàn)切換Fragment。
下面是代碼實現(xiàn)方式
- layout文件中
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bnv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="@drawable/selector_bottom_navigation"
app:itemTextColor="@drawable/selector_bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/bnv"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>
- 我們需要先創(chuàng)建一個ViewPagerAdapter適配器繼承自FragmentPagerAdapter來管理ViewPager切換Fragment
public class ViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mList;
public ViewPagerAdapter(FragmentManager fm, List<Fragment> mList) {
super(fm);
this.mList = mList;
}
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList != null ? mList.size() : 0;
}
}
- 在Activity中實現(xiàn)點擊切換Fragment邏輯
Fragment不多展示，創(chuàng)建一個Fragment綁定布局即可
public class HomeActivity extends AppCompatActivity {
private BottomNavigationView mBottomNavigationView;
private ViewPager mViewPager;
private ViewPagerAdapter mPagerAdapter;
private MenuItem mMenuItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bnv);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
mMenuItem = menuItem;
switch (menuItem.getItemId()) {
case R.id.item_tab1:
mViewPager.setCurrentItem(0);
return true;
case R.id.item_tab2:
mViewPager.setCurrentItem(1);
return true;
case R.id.item_tab3:
mViewPager.setCurrentItem(2);
return true;
case R.id.item_tab4:
mViewPager.setCurrentItem(3);
return true;
case R.id.item_tab5:
mViewPager.setCurrentItem(4);
return true;
}
return false;
}
});
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (mMenuItem != null) {
mMenuItem.setChecked(false);
} else {
mBottomNavigationView.getMenu().getItem(0).setChecked(false);
}
mMenuItem = mBottomNavigationView.getMenu().getItem(position);
mMenuItem.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
List<Fragment> list = new ArrayList<>();
list.add(TestFragment.newInstance("消息"));
list.add(TestFragment.newInstance("聯(lián)系人"));
list.add(TestFragment.newInstance("辦公"));
list.add(TestFragment.newInstance("應(yīng)用"));
list.add(TestFragment.newInstance("我的"));
mPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), list);
mViewPager.setAdapter(mPagerAdapter);
}
}
image
image
待優(yōu)化的問題
這個時候我們基本實現(xiàn)了BottomNavigationView的效果。但是這并不夠。這里有幾個問題是可以修改的
- 當我們來回點擊MenuItem時，在每一個圖標上有類似水波紋的效果，我們是否能夠去除
- 當我們來回點擊MenuItem時，被選中的MenuItem會有一個斜向上的動畫，我們是否能夠去除，只是單純的點擊切換MenuItem
- 目前只有選中的MenuItem才會顯示title屬性，我們是否能夠?qū)itle屬性全部顯示出來
下面我會根據(jù)三個問題一一做解答
移除水波紋動畫
直接在BottomNavigationView控件中添加屬性
app:itemBackground="@null"
移除切換時偏移動畫
在android P版本，由于引用的是28.0.0-alpha3版本，之前在百度中搜索的基本都是老版本，基本都是通過反射，來給BottomNavigationMenuView 設(shè)置setShiftingMode(false)給去除動畫。
在新版本中，BottomNavigationMenuView已經(jīng)不包含此方法，那我們該如何實現(xiàn)。
直接在BottomNavigationView控件中添加屬性
app:itemHorizontalTranslationEnabled="false"
當我們設(shè)置為false時，動畫即消失，true則反之
MenuItem非選中狀態(tài)顯示文字
在新API中，有一個app:labelVisibilityMode屬性,我們可以將其設(shè)置為app:labelVisibilityMode="labeled"，運行之后我們發(fā)現(xiàn)文字全部展示了。
image
除此之外，labelVisibilityMode除了labeled屬性外，共有四個屬性:
- labeled
- auto
- selected
- unlabeled
這幾個屬性根據(jù)MenuItem不同的數(shù)量可以設(shè)置不同的效果。如，當我們設(shè)置為unlabeled時，你會發(fā)現(xiàn)，文字不顯示了。
image
這里提供官方文檔地址
LabelVisibilityMode
細節(jié)優(yōu)化
設(shè)置間隔大小
我們可以在dimens.xml中設(shè)置一些文字以及文字與圖標間隔的大小
<!-- icon與text間隔大小 -->
<dimen tools:override="true" name="design_bottom_navigation_margin">10dp</dimen>
<!-- 導航欄高度 -->
<dimen tools:override="true" name="design_bottom_navigation_height">84dp</dimen>
<!-- text大小 -->
<dimen tools:override="true" name="design_bottom_navigation_text_size">12sp</dimen>
<!-- text大小 -->
<dimen tools:override="true" name="design_bottom_navigation_active_text_size">12sp</dimen>
設(shè)置水波紋效果
直接在styles.xml中重寫屬性
<style name="MyBottomNavigationStyle" parent="Widget.Design.BottomNavigationView">
<!--ripple的顏色-->
<item name="colorControlHighlight">@color/colorAccent</item>
<!--選中時的顏色-->
<item name="colorPrimary">@android:color/holo_green_dark</item>
<!--未選中的顏色-->
<item name="android:textColorSecondary">@android:color/black</item>
</style>
注意事項
通過BottomNavigationView源碼發(fā)現(xiàn),其中有這個方法
public int getMaxItemCount() {
return 5;
}
所以當我們將MenuItem的數(shù)量添加到5以上的時候，項目會報錯
