### 基本实现方式
- 首先创建我们所需要的按钮的选择器
<?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> <color name="tab_checked">#FF4081</color>
<color name="tab_unchecked">#757575</color>即当前按钮的选中颜色为粉色，未选中状态为灰色
- 准备五张图标素材 <br/>
在我的github中 github
- 实现menu
<?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="联系人" />
<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="应用" />
<item
android:id="@+id/item_tab5"
android:icon="@drawable/ic_5"
android:title="我的" />
</menu><br/>
在app模块下的build.gradle中编译
api 'com.android.support:design:28.0.0-alpha3'<?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:itemIconTintapp:itemTextColorapp:menu这样我们基本的BottomNavigationView就实现了，现在我们运行一下
这时候我们发现，@color/text_checked属性已经显示在文字和图标上了。如果我们想要填充格式的图片。
<br/>
android:icon
如这种方式。将menu.xml资源文件中的icon替换即可。
那么问题来了，图中按下状态的颜色是蓝色，而我们在Layout中给BottomNavigationView定义的属性
app:itemIconTint> 结果还是粉色
### 扩展
#### 实现ViewPager+Fragment+BottomNavigationView
1. 实现方式是在布局中实现viewpager控件
2. 通过BottomNavigationView 的
setOnNavigationItemSelectedListenerfang()addOnPageChangeListener() 下面是代码实现方式
1. 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>2. 我们需要先创建一个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;
}
}3. 在Activity中实现点击切换Fragment逻辑
<br/>Fragment不多展示，创建一个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("联系人"));
list.add(TestFragment.newInstance("办公"));
list.add(TestFragment.newInstance("应用"));
list.add(TestFragment.newInstance("我的"));
mPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), list);
mViewPager.setAdapter(mPagerAdapter);
}
}
### 待优化的问题
这个时候我们基本实现了BottomNavigationView的效果。但是这并不够。这里有几个问题是可以修改的1. 当我们来回点击MenuItem时，在每一个图标上有类似水波纹的效果，我们是否能够去除
2. 当我们来回点击MenuItem时，被选中的MenuItem会有一个斜向上的动画，我们是否能够去除，只是单纯的点击切换MenuItem
3. 目前只有选中的MenuItem才会显示title属性，我们是否能够将title属性全部显示出来
下面我会根据三个问题一一做解答
### 移除水波纹动画
直接在BottomNavigationView控件中添加属性
app:itemBackground="@null"### 移除切换时偏移动画
在android P版本，由于引用的是28.0.0-alpha3版本，之前在百度中搜索的基本都是老版本，基本都是通过反射，来给BottomNavigationMenuView 设置setShiftingMode(false)在新版本中，BottomNavigationMenuView已经不包含此方法，那我们该如何实现。
直接在BottomNavigationView控件中添加属性
app:itemHorizontalTranslationEnabled="false"### MenuItem非选中状态显示文字
在新API中，有一个app:labelVisibilityMode app:labelVisibilityMode="labeled" 
除此之外，labelVisibilityMode除了labeled属性外，共有四个属性:
> 1. labeled
> 2. auto
> 3. selected
> 4. unlabeled这几个属性根据MenuItem不同的数量可以设置不同的效果。如，当我们设置为unlabeled时，你会发现，文字不显示了。
这里提供官方文档地址 官方文档
### 细节优化
##### 设置间隔大小
我们可以在dimens.xml中设置一些文字以及文字与图标间隔的大小 <!-- 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>##### 设置水波纹效果
直接在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源码发现,其中有这个方法
public int getMaxItemCount() {
return 5;
}https://github.com/sdwfhjq123/BottomNavigationViewDemo
#### 参考资料
http://mikescamell.com/bottoms-up-bottomnavigationview-updates-in-the-material-design-design-support-library/https://blog.csdn.net/qq_20451879/article/details/79240842