基于android P(9.0)版本的BottomNavigationView使用教程(去除动画效果，水波纹效果)

基本实现方式

  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>

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

  1. 准备五张图标素材

    由于我们可以自定义按钮的选中未选中状态，所以我们只需准备一份普通状态的即可

在我的github中 github

  1. 实现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>
  1. 接下来就可以在我们的布局文件中创建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>
  1. 我们需要先创建一个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;
    }
}
  1. 在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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 224,815评论 6赞 522
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 96,251评论 3赞 402
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 171,999评论 0赞 366
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 60,996评论 1赞 300
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 69,993评论 6赞 400
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 53,477评论 1赞 314
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 41,848评论 3赞 428
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 40,823评论 0赞 279
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 47,361评论 1赞 324
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,401评论 3赞 346
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,518评论 1赞 354
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 37,119评论 5赞 351
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 42,850评论 3赞 338
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,292评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,424评论 1赞 275
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 50,072评论 3赞 381
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 46,588评论 2赞 365

推荐阅读更多精彩内容