開發(fā)小技巧--google推薦的底部導航欄的使用BottomNavigationBar

Google在自己推出的Material design中增加了Bottom Navigation導航控制。Android一直沒有官方的導航控制器,自己實現(xiàn)確實是五花八門,有了這個規(guī)定之后,就類似蘋果的底部Toolbar,以后我們的APP就會有一致的風格,先看一張效果:

1.BottomNavigationBar的下載地址
https://github.com/Ashok-Varma/BottomNavigation

2.用法
compile 'com.ashokvarma.android:bottom-navigation-bar:1.4.3'

布局

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

初始化

bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.*bottom_navigation_bar*);

設置背景樣式和選中/未選中 顏色(整體的)

bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING)
        .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

bottomNavigationBar //值得一提,模式跟背景的設置都要在添加tab前面,不然不會有效果。
        .setActiveColor(R.color.colorPrimary)//選中顏色 圖標和文字
        .setInActiveColor("#8e8e8e")//默認未選擇顏色
        .setBarBackgroundColor("#ECECEC");//默認背景色

添加item

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"Like"))
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp,"Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp,"Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp,"TV"))

//                .addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"Like").setActiveColor().setInActiveColor())
//                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp,"Home").setActiveColor().setInActiveColor())
//                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp,"Music").setActiveColor().setInActiveColor())
//                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp,"TV").setActiveColor().setInActiveColor())
                .setFirstSelectedPosition(1)//設置默認選擇的按鈕
                .initialise();//所有的設置需在調用該方法前完成

這里添加item可以在添加時設置圖標 和文字,也可以在后面繼續(xù)添加選中顏色和默認顏色(每一個可以不同)
設置底部按鈕點擊事件

bottomNavigationBar //設置lab點擊事件
        .setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {

                switch (position){

                    case 0:
                        Toast.makeText(MainActivity.this,"竟讓有這種操作!",Toast.LENGTH_SHORT).show();

                        break;
                    case 1:
                        Toast.makeText(MainActivity.this,"真的有這種操作!",Toast.LENGTH_SHORT).show();

                        break;
            case 2:
                    Toast.makeText(MainActivity.this,"這是假的操作!",Toast.LENGTH_SHORT).show();

                break;
            case 3:
                Toast.makeText(MainActivity.this,"我有一句嗎賣批不知當講不當講!",Toast.LENGTH_SHORT).show();

                break;

                }
            }

            @Override
            public void onTabUnselected(int position) {

            }

            @Override
            public void onTabReselected(int position) {

            }
        });

這里可以根據(jù)postion切換fragment 我就直接彈吐司提示了

設置BottomNavigationBar

1Mode

xml:bnbMode方法:setMode()包含3種Mode:
MODE_DEFAULT如果Item的個數(shù)<=3就會使用MODE_FIXED模式,否則使用MODE_SHIFTING模式
MODE_FIXED填充模式,未選中的Item會顯示文字,沒有換擋動畫。
MODE_SHIFTING換擋模式,未選中的Item不會顯示文字,選中的會顯示文字。在切換的時候會有一個像換擋的動畫

2.Background Style

xml: bnbBackgroundStyle方法:setBackgroundStyles()包含3種Style:
BACKGROUND_STYLE_DEFAULT如果設置的Mode為MODE_FIXED,將使用BACKGROUND_STYLE_STATIC 。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。

BACKGROUND_STYLE_STATIC點擊的時候沒有水波紋效果

BACKGROUND_STYLE_RIPPLE點擊的時候有水波紋效果

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

這里寫圖片描述

MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果

這里寫圖片描述

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

這里寫圖片描述

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

這里寫圖片描述

值得一提,模式跟背景的設置都要在添加tab前面,不然不會有效果。

3.設置默認顏色

xml:bnbActiveColor, bnbInactiveColor, bnbBackgroundColor方法:setActiveColor, setInActiveColor, setBarBackgroundColor例如:
bottomNavigationBar .setActiveColor(R.color.primary) .setInActiveColor("#FFFFFF") .setBarBackgroundColor("#ECECEC")

in-active color:

表示未選中Item中的圖標和文本顏色。默認為 Color.LTGRAY

active color :

在BACKGROUND_STYLE_STATIC下,表示選中Item的圖標和文本顏色。而在BACKGROUND_STYLE_RIPPLE下,表示整個容器的背景色。默認Theme's Primary Color

background color :

在BACKGROUND_STYLE_STATIC下,表示整個容器的背景色。而在BACKGROUND_STYLE_RIPPLE下,表示選中Item的圖標和文本顏色。默認 Color.WHITE

4.定制Item的選中未選中顏色

我們可以為每個Item設置選中未選中的顏色,如果沒有設置,將繼承BottomNavigationBar設置的選中未選中顏色。方法:

BottomNavigationItem.setInActiveColor() 設置Item未選中顏色方法BottomNavigationItem.setActiveColor() 設置Item選中顏色方法

5.Icon的定制

如果使用顏色的變化不足以展示一個選項Item的選中與非選中狀態(tài),可以使用BottomNavigationItem.setInActiveIcon()方法來設置。例如:
new BottomNavigationItem(R.mipmap.ic_directions_bus_white_24dp, "公交")//這里表示選中的圖片 .setInactiveIcon(ContextCompat.getDrawable(this,R.mipmap.ic_launcher)))//非選中的圖片

6.設置自動隱藏與顯示

如果BottomNavigationBar是在CoordinatorLayout布局里,默認設置當向下滑動時會自動隱藏它,當向上滑動時會自動顯示它。我們可以通過setAutoHideEnabled(boolean)設置是否允許這種行為,好像這個方法木有啦。

7.手動隱藏與顯示

我們可以在任何時間,通過代碼隱藏或顯示BottomNavigationBar方法:
bottomNavigationBar.hide();//隱藏bottomNavigationBar.hide(true);//隱藏是否啟動動畫,這里并不能自定義動畫bottomNavigationBar.unHide();//顯示bottomNavigationBar.hide(true);//隱藏是否啟動動畫,這里并不能自定義動畫

實際上這里都是通過屬性動畫ViewPropertyAnimatorCompat來完成的,所以如果我們要自定義它的隱藏和顯示的話,通過屬性動畫即可實現(xiàn)。

8.為Item添加Badge

什么是Badge,看圖說話:



上面紅色的圖標就是Badge了,那如何使用呢?
1.創(chuàng)建一個BadgeItem

badge=new BadgeItem()
//                .setBorderWidth(2)//Badge的Border(邊界)寬度
//                .setBorderColor("#FF0000")//Badge的Border顏色
//                .setBackgroundColor("#9ACD32")//Badge背景顏色
//                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默認右上角
          .setText("2")//顯示的文本
//                .setTextColor("#F0F8FF")//文本顏色
//                .setAnimationDuration(2000)
//                .setHideOnSelect(true)//當選中狀態(tài)時消失,非選中狀態(tài)顯示

2.為BottomNavigationItem設置BadgeItemnew

BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp, "騎行").setBadgeItem(badge)

感謝 閱讀

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容