android新特性：底部导航栏BottomNavigationView系统库与第三方库的两种不同库的使用方法

20161223172807254.gif

Android Design Support Library中增加了 BottomNavigationView 这个控件。那么以后底部导航栏是不是就有新的方式了呢？

在这里让我们来学习一下系统的BottomNavigationView和第三方BottomNavigationView库的使用吧！

一、首先来看看系统的BottomNavigationView实现方式：
在 build.gradle 文件中增加依赖：

     compile 'com.android.support:design:25.0.0'

在布局文件添加BottomNavigationView组件

     <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.hnshangyu.bottomnavigationviewdemo.MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/secondColor"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu"
        app:itemIconTint="@drawable/bottom_navigation_color_selector"
        app:itemTextColor="@drawable/bottom_navigation_color_selector"
        app:itemBackground="@color/secondColor"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/button"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="点击~~~" />
</RelativeLayout>

app:itemBackground:设置item的背景，对应setItemBackgroundResource(int resId)方法

app:itemIconTintUsed:设置icon的颜色，对应setItemIconTintList(ColorStateList tint)方法

app:itemTextColor:设置文字的颜色，对应setIteTextColor(ColorStateList textColor)方法

app:menu=”@menu/bottom_menu”对应为导航栏的Menu布局在/res/menu/目录下:

  <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/home"
            android:enabled="true"
            app:showAsAction="ifRoom"
            android:icon="@drawable/sy"
            android:title="home" />
        <item
            android:id="@+id/service"
            android:enabled="true"
            app:showAsAction="ifRoom"
            android:icon="@drawable/fw"
            android:title="service" />
        <item
            android:id="@+id/message"
            android:enabled="true"
            app:showAsAction="ifRoom"
            android:icon="@drawable/xx"
            android:title="message" />

        <item
            android:id="@+id/personal"
            android:enabled="true"
            app:showAsAction="ifRoom"
            android:icon="@drawable/wo"
            android:title="personal" />
    </menu>

以app:menu=”@menu/bottom_menu”的方式添加到布局中。

选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/firstColor" android:state_checked="true" />
    <item android:color="@color/gray" android:state_checked="false" />
</selector>

在Activity中添加事件监听,如下:

package cn.hnshangyu.bottomnavigationviewdemo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;

    private TextView textView;

    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView) findViewById(R.id.textView);
        button = (Button) findViewById(R.id.button);
        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.home:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.service:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.message:
                        textView.setText(item.getTitle());
                        break;
                    case R.id.personal:
                        textView.setText(item.getTitle());
                        break;
                }
                return true;
            }
        });

    }
}

    如果和ViewPager进行交互的话，进行如下操作：

            viewPager = (ViewPager) findViewById(R.id.viewpager);
            bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

            bottomNavigationView.setOnNavigationItemSelectedListener(
                    new BottomNavigationView.OnNavigationItemSelectedListener() {
                        @Override
                        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                            switch (item.getItemId()) {
                                case R.id.item_call:
                                    viewPager.setCurrentItem(0);
                                    break;
                                case R.id.item_mail:
                                    viewPager.setCurrentItem(1);
                                    break;
                                case R.id.item_person:
                                    viewPager.setCurrentItem(2);
                                    break;
                            }
                            return false;
                        }
                    });

            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    if (prevMenuItem != null) {
                        prevMenuItem.setChecked(false);
                    } else {
                        bottomNavigationView.getMenu().getItem(0).setChecked(false);
                    }
                    bottomNavigationView.getMenu().getItem(position).setChecked(true);
                    prevMenuItem = bottomNavigationView.getMenu().getItem(position);

                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });

            // 如果想禁止滑动，可以把下面的代码取消注释
    //        viewPager.setOnTouchListener(new View.OnTouchListener() {
    //            @Override
    //            public boolean onTouch(View v, MotionEvent event) {
    //                return true;
    //            }
    //        });

这样系统的BottomNavigationView库的基本用法就就结束了！

二、下面我们来学习一下一个第三方的BottomNavigationView库LuseenBottomNavigation：
在 build.gradle 文件中增加依赖:

compile 'com.github.armcha:LuseenBottomNavigation:1.8.2'

在布局文件添加BottomNavigationView组件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/white">

   <com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
       android:id="@+id/bottomNavigation"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true" />

   <TextView
       android:id="@+id/textView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <Button
       android:id="@+id/button"
       style="?android:attr/buttonStyleSmall"
       android:layout_width="wrap_content"
       android:layout_below="@+id/textView"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:text="Change tab" />
</RelativeLayout>

在Activity中添加事件监听,如下:

package com.luseen.myapplication;

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationItem;
import com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView;
import com.luseen.luseenbottomnavigation.BottomNavigation.OnBottomNavigationItemClickListener;

public class MainActivity extends AppCompatActivity {

   private BottomNavigationView bottomNavigationView;

   private TextView textView;

   private Button button;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       textView = (TextView) findViewById(R.id.textView);
       button = (Button) findViewById(R.id.button);
       bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigation);

       int[] image = {R.drawable.ic_mic_black_24dp, R.drawable.ic_favorite_black_24dp,
               R.drawable.ic_book_black_24dp, R.drawable.github_circle};
       int[] color = {ContextCompat.getColor(this, R.color.firstColor), ContextCompat.getColor(this, R.color.secondColor),
               ContextCompat.getColor(this, R.color.thirdColor), ContextCompat.getColor(this, R.color.fourthColor)};

       if (bottomNavigationView != null) {
           /**
            * 汉字是否一直显示:(false:显示选中的；true全部显示)
            */
//            bottomNavigationView.isWithText(false);
           bottomNavigationView.isWithText(true);
           /**
            * 开启跑到左边
            */
//             bottomNavigationView.activateTabletMode();
           /**
            * 整体背景色
            */
           bottomNavigationView.isColoredBackground(true);
           /**
            * 当 bottomNavigationView.isColoredBackground(true);设置为false时icon和汉字显示颜色能用
            */
           bottomNavigationView.setItemActiveColorWithoutColoredBackground(ContextCompat.getColor(this, R.color.secondColor));
           /**
            * 选中字体的大小
            */
           bottomNavigationView.setTextActiveSize(getResources().getDimension(R.dimen.text_active));
           /**
            * 未选中字体的大小
            */
           bottomNavigationView.setTextInactiveSize(getResources().getDimension(R.dimen.text_active));
           /**
            * 设置字体
            */
           bottomNavigationView.setFont(Typeface.createFromAsset(getApplicationContext().getAssets(), "fonts/Noh_normal.ttf"));
           /**
            * 去掉影子
            */
//            bottomNavigationView.disableShadow();
           /**
        *使用viewpager
        */
//            bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);
       }

       BottomNavigationItem bottomNavigationItem = new BottomNavigationItem
               ("Record", color[0], image[0]);
       BottomNavigationItem bottomNavigationItem1 = new BottomNavigationItem
               ("Like", color[1], image[1]);
       BottomNavigationItem bottomNavigationItem2 = new BottomNavigationItem
               ("Books", color[2], image[2]);
       BottomNavigationItem bottomNavigationItem3 = new BottomNavigationItem
               ("GitHub", color[3], image[3]);


       bottomNavigationView.addTab(bottomNavigationItem);
       bottomNavigationView.addTab(bottomNavigationItem1);
       bottomNavigationView.addTab(bottomNavigationItem2);
       bottomNavigationView.addTab(bottomNavigationItem3);

       bottomNavigationView.setOnBottomNavigationItemClickListener(new OnBottomNavigationItemClickListener() {
           @Override
           public void onNavigationItemClick(int index) {
               switch (index) {
                   case 0:
                       textView.setText("Record");
                       break;
                   case 1:
                       textView.setText("Like");
                       break;
                   case 2:
                       textView.setText("Books");
                       break;
                   case 3:
                       textView.setText("GitHub");
                       break;
               }
           }
       });

       button.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               bottomNavigationView.selectTab(2);
           }
       });
   }
}

三、如果使用的是:viewpage,您可以连接到BottomNavigationView,并以这种方式设置颜色:

ContextCompat.getColor(context, R.color.firstColor)
  bottomNavigationView.setUpWithViewPager(yourPager , colorResources , imageResources);

好了！到此结束，欢迎大家指教…谢谢！~！

最后编辑于：2017.12.05 15:35:35

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

android新特性： 底部导航栏BottomNavigationView系统库与第三方库的两种不同库的使用方法

推荐阅读更多精彩内容

android新特性：底部导航栏BottomNavigationView系统库与第三方库的两种不同库的使用方法