基于android P(9.0)版本的BottomNavigat

基本实现方式

1. 首先创建我们所需要的按钮的选择器

<?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下创建了两个颜色资源

 <color name="tab_checked">#FF4081</color>
 <color name="tab_unchecked">#757575</color>

即当前按钮的选中颜色为粉色，未选中状态为灰色

2. 准备五张图标素材
   
   由于我们可以自定义按钮的选中未选中状态，所以我们只需准备一份普通状态的即可

在我的github中 github

3. 实现menu
   
   在res/创建==menu==资源文件夹，创建 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="联系人" />
    <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>

4. 接下来就可以在我们的布局文件中创建BottomNavigationView了
   
   
   在app模块下的build.gradle中编译

api 'com.android.support:design:28.0.0-alpha3'

首先我们创建一个最简单的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

在这里表示单个图标的颜色属性，我们使用了选择器来设置

app:itemTextColor

在这里表示单个图标下的文字的颜色属性，我们使用了选择器来设置

app:menu 

我们绑定了自己定义的navigation.xml文件

这样我们基本的BottomNavigationView就实现了，现在我们运行一下

image

这时候我们发现，@color/text_checked属性已经显示在文字和图标上了。如果我们想要填充格式的图片。

image

如这种，这时候我们就要重新定义一下menu.xml中的属性

android:icon

之前我们只是存放的drawable下的图片资源文件，我们如果想用填充模式的图片，就可以使用ColorStateList来实现。设置我们图片,在checked=true 或者false下的状态.就可以了

image

如这种方式。将menu.xml资源文件中的icon替换即可。

那么问题来了，图中按下状态的颜色是蓝色，而我们在Layout中给BottomNavigationView定义的属性==app:itemIconTint==按下状态为粉红色。这样最后的结果该显示成什么样式。

结果还是粉色

扩展

实现ViewPager+Fragment+BottomNavigationView

1. 实现方式是在布局中实现viewpager控件
2. 通过BottomNavigationView 的 setOnNavigationItemSelectedListenerfang() 方法以及 ViewPager的addOnPageChangeListener() 的方法实现切换Fragment。

下面是代码实现方式

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逻辑
   
   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);
    }
}

image
image

待优化的问题

这个时候我们基本实现了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"

当我们设置为false时，动画即消失，true则反之

MenuItem非选中状态显示文字

在新API中，有一个app:labelVisibilityMode属性,我们可以将其设置为app:labelVisibilityMode="labeled"，运行之后我们发现文字全部展示了。

image

除此之外，labelVisibilityMode除了labeled属性外，共有四个属性:

1. labeled
2. auto
3. selected
4. unlabeled

这几个属性根据MenuItem不同的数量可以设置不同的效果。如，当我们设置为unlabeled时，你会发现，文字不显示了。

image

这里提供官方文档地址
LabelVisibilityMode

细节优化

设置间隔大小

我们可以在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;
    }

所以当我们将MenuItem的数量添加到5以上的时候，项目会报错

参考资料

http://mikescamell.com/bottoms-up-bottomnavigationview-updates-in-the-material-design-design-support-library/

https://blog.csdn.net/qq_20451879/article/details/79240842