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);

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容