仿小米商城底部導(dǎo)航欄（基于BottomNavigationBar）

簡介

現(xiàn)在大多數(shù)App都會(huì)用到底部導(dǎo)航欄，比如QQ、微信和購物App等等。有了底部導(dǎo)航欄，用戶可以隨時(shí)切換界面，查看不同的內(nèi)容。Android底部導(dǎo)航欄的實(shí)現(xiàn)方式特別多，例如TabHost，TabLayout，或者TextView等，都可以實(shí)現(xiàn)底部導(dǎo)航欄的效果，但是卻沒有Google官方統(tǒng)一的導(dǎo)航欄樣式，今天講的就是Google最近添加到Material Design中的底部導(dǎo)航欄BottomNavigationBar。

使用場(chǎng)景

（1）底部導(dǎo)航欄需要有3-5個(gè)標(biāo)簽（tab）,并且每個(gè)tab選擇的視圖重要性要相似，對(duì)于少于3個(gè)tab的情況，是不推薦使用Bottom navigation的。
（2）如果標(biāo)簽很多，比如有超過了5個(gè)這種情況呢？Google也是不提倡使用Bottom navigation的，可以用Drawer navigation替換。

風(fēng)格樣式

（1）標(biāo)簽Icons和文字的顏色選擇是很重要的，一亮一暗才能有對(duì)比，用戶才很快知道你選擇了哪個(gè)，如果五顏六色，你是很難分清選擇了哪個(gè)的。
（2）標(biāo)簽的文字說明要簡短而有意義，避免太長的，也不提倡太長了換行和省略的方式。

基本使用

  1. 在Android Studio下添加依賴：
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
  1. 在布局文件中，添加布局
<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
  1. 在代碼中為BottomNavigationBar添加Item選項(xiàng)
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
  1. 添加選項(xiàng)卡切換事件監(jiān)聽
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
         @Override
         public void onTabSelected(int position) {//未選中 -> 選中
         }

         @Override
         public void onTabUnselected(int position) {//選中 -> 未選中
         }

         @Override
         public void onTabReselected(int position) {//選中 -> 選中
         }
     });

設(shè)置BottomNavigationBar

  1. Mode
    xml：bnbMode
    方法：setMode()
    包含3種Mode:
  • MODE_DEFAULT
    如果Item的個(gè)數(shù)<=3就會(huì)使用MODE_FIXED模式，否則使用MODE_SHIFTING模式
  • MODE_FIXED
    填充模式，未選中的Item會(huì)顯示文字，沒有換擋動(dòng)畫。
  • MODE_SHIFTING
    換擋模式，未選中的Item不會(huì)顯示文字，選中的會(huì)顯示文字。在切換的時(shí)候會(huì)有一個(gè)像換擋的動(dòng)畫
  1. Background Style
    xml: bnbBackgroundStyle
    方法：setBackgroundStyles()
    包含3種Style:

  • BACKGROUND_STYLE_DEFAULT
    如果設(shè)置的Mode為MODE_FIXED，將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。

  • BACKGROUND_STYLE_STATIC點(diǎn)擊的時(shí)候沒有水波紋效果

  • BACKGROUND_STYLE_RIPPLE點(diǎn)擊的時(shí)候有水波紋效果

  1. 設(shè)置默認(rèn)顏色
    xml：bnbActiveColor, bnbInactiveColor, bnbBackgroundColor
    方法：setActiveColor, setInActiveColor, setBarBackgroundColor

  • in-active color表示未選中Item中的圖標(biāo)和文本顏色。默認(rèn)為 Color.LTGRAY

  • active color :
    在BACKGROUND_STYLE_STATIC下，表示選中Item的圖標(biāo)和文本顏色。而
    在BACKGROUND_STYLE_RIPPLE下，表示整個(gè)容器的背景色。默認(rèn)Theme's Primary Color

  • background color :
    在BACKGROUND_STYLE_STATIC下，表示整個(gè)容器的背景色。而
    在BACKGROUND_STYLE_RIPPLE下，表示選中Item的圖標(biāo)和文本顏色。默認(rèn) Color.WHITE

  1. 定制Item的選中未選中顏色
    我們可以為每個(gè)Item設(shè)置選中未選中的顏色，如果沒有設(shè)置，將繼承BottomNavigationBar設(shè)置的選中未選中顏色。
    方法：
    BottomNavigationItem.setInActiveColor() 設(shè)置Item未選中顏色方法
    BottomNavigationItem.setActiveColor() 設(shè)置Item選中顏色方法

  2. Icon的定制
    如果使用顏色的變化不足以展示一個(gè)選項(xiàng)Item的選中與非選中狀態(tài)，可以使用BottomNavigationItem.setInActiveIcon()方法來設(shè)置。

  3. 設(shè)置自動(dòng)隱藏與顯示
    如果BottomNavigationBar是在CoordinatorLayout布局里，默認(rèn)設(shè)置當(dāng)向下滑動(dòng)時(shí)會(huì)自動(dòng)隱藏它，當(dāng)向上滑動(dòng)時(shí)會(huì)自動(dòng)顯示它。我們可以通過setAutoHideEnabled(boolean)設(shè)置是否允許這種行為,好像這個(gè)方法木有啦。

  4. 手動(dòng)隱藏與顯示
    我們可以在任何時(shí)間，通過代碼隱藏或顯示BottomNavigationBar
    方法：

bottomNavigationBar.hide();//隱藏
bottomNavigationBar.hide(true);//隱藏是否啟動(dòng)動(dòng)畫，這里并不能自定義動(dòng)畫
bottomNavigationBar.unHide();//顯示
bottomNavigationBar.hide(true);//隱藏是否啟動(dòng)動(dòng)畫，這里并不能自定義動(dòng)畫

  1. 為Item添加Badge

  2. 創(chuàng)建一個(gè)BadgeItem

badge=new BadgeItem()
//                .setBorderWidth(2)//Badge的Border(邊界)寬度
//                .setBorderColor("#FF0000")//Badge的Border顏色
//                .setBackgroundColor("#9ACD32")//Badge背景顏色
//                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默認(rèn)右上角
          .setText("2")//顯示的文本
//                .setTextColor("#F0F8FF")//文本顏色
//                .setAnimationDuration(2000)
//                .setHideOnSelect(true)//當(dāng)選中狀態(tài)時(shí)消失，非選中狀態(tài)顯示
  1. 為BottomNavigationItem設(shè)置BadgeItem
new BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp, "騎行").setBadgeItem(badge)

案例實(shí)現(xiàn)

GitHub地址：https://github.com/Ashok-Varma/BottomNavigation
Demo：https://github.com/maxliaops/android-exercise/tree/master/MiShop

  1. 布局文件activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.rainsong.mishop.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>

</LinearLayout>
  1. 源碼 MainActivity.java
package com.rainsong.mishop;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;

public class MainActivity extends AppCompatActivity implements BottomNavigationBar
        .OnTabSelectedListener {
    BottomNavigationBar bottomNavigationBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.setTabSelectedListener(this);
        bottomNavigationBar.clearAll();
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.icon_main_home_selected, R.string.home)
                        .setInactiveIconResource(R.drawable.icon_main_home_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_category_selected, R.string.category)
                        .setInactiveIconResource(R.drawable.icon_main_category_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_discover_selected, R.string.discover)
                        .setInactiveIconResource(R.drawable.icon_main_discover_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_mine_selected, R.string.mine)
                        .setInactiveIconResource(R.drawable.icon_main_mine_normal)
                        .setActiveColorResource(R.color.orange))
                .initialise();
    }

    @Override
    public void onTabSelected(int position) {

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

效果對(duì)比

小米商城
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容