Material design library系列——BottomNavigationBar

前言

今天給大家?guī)?lái)Material design系列的第五篇文章，BottomNavigationBar的使用，那么按照國(guó)際慣例，先給大家介紹一下什么是BottomNavigationBar。

顧名思義，BottomNavigationBar翻譯過(guò)來(lái)就是底部導(dǎo)航控件，由于Android之前一直沒有官方的底部導(dǎo)航欄，所以在此之前大家實(shí)現(xiàn)也是各有招數(shù)，有用RadioGroup實(shí)現(xiàn)的，有用LinearLayout實(shí)現(xiàn)的，不過(guò)現(xiàn)在好了，Google官方在自己推出的Material design中增加了BottomNavigationBar這個(gè)底部導(dǎo)航。

使用

  1. 在gradle中添加依賴
    compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.2'
  2. 在xml文件中加入該控件
  1. 在代碼中添加條目

做到這一步，就能實(shí)現(xiàn)上面gif的效果了。

注意事項(xiàng)

  • BottomNavigationBar高度默認(rèn)是 56dp
  • 菜單元素建議 3~5 個(gè)
  • BottomNavigationBar的背景顏色默認(rèn)是 @color/colorAccent

BottomNavigationBar的模式

xml：bnbMode
代碼:setMode()
可以改變控件的模式，模式有五種

  • MODE_DEFAULT

如果Item的個(gè)數(shù)<=3就會(huì)使用MODE_FIXED模式，否則使用MODE_SHIFTING模式

  • MODE_FIXED（固定大?。?/h6>

。填充模式，未選中的Item會(huì)顯示文字，沒有換擋動(dòng)畫。

MODE_FIXED
  • MODE_FIXED_NO_TITLE（固定大小不帶文字）
MODE_FIXED_NO_TITLE
  • MODE_SHIFTING（不固定大?。?/h6>

。換擋模式，未選中的Item不會(huì)顯示文字，選中的會(huì)顯示文字。在切換的時(shí)候會(huì)有一個(gè)像換擋的動(dòng)畫

MODE_SHIFTING
  • MODE_SHIFTING_NO_TITLE（不固定大小不帶文字）
MODE_SHIFTING_NO_TITLE

Background Style

xml: bnbBackgroundStyle
代碼：setBackgroundStyles()
包含3種style

1. BACKGROUND_STYLE_DEFAULT

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

2. BACKGROUND_STYLE_STATIC

。點(diǎn)擊的時(shí)候沒有水波紋效果
。航條的背景色是白色，加上setBarBackgroundColor（）可以設(shè)置成你所需要的任何背景顏色

  • BACKGROUND_STYLE_STATIC + MODE_SHIFTING效果
BACKGROUND_STYLE_STATIC + MODE_SHIFTING
  • BACKGROUND_STYLE_STATIC + MODE_FIXED效果
BACKGROUND_STYLE_STATIC + MODE_FIXED
3. BACKGROUND_STYLE_RIPPLE

。點(diǎn)擊的時(shí)候有水波紋效果
。導(dǎo)航條的背景色取決于選中狀態(tài)的 Item的顏色（ActiveColor），也就是setActiveColorResource這個(gè)設(shè)置的顏色

  • BACKGROUND_STYLE_RIPPLE+ MODE_SHIFTING效果
BACKGROUND_STYLE_RIPPLE + MODE_SHIFTING
  • BACKGROUND_STYLE_RIPPLE+ MODE_FIXED效果
BACKGROUND_STYLE_RIPPLE+ MODE_FIXED

TabChangeListener

 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                //tab被選擇
            }

            @Override
            public void onTabUnselected(int position) {
                //tab未被選擇
            }

            @Override
            public void onTabReselected(int position) {
                //tab被重新選擇
            }
        });

給Item添加Badge，一般用作消息提醒的

// 創(chuàng)建一個(gè)BadgeItem
BadgeItem badge=new BadgeItem();
// 方法介紹
// .setBorderWidth(2)//Badge的Border(邊界)寬度
// .setBorderColor("#FFF")//Badge的邊界顏色
// .setBackgroundColor("#93F")//Badge背景顏色
// .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默認(rèn)右上角
// .setText("20")//顯示的文本
// .setTextColor("#FFF")//文本顏色
// .setAnimationDuration(2000)
// .setHideOnSelect(true)//當(dāng)選中狀態(tài)時(shí)消失，非選中狀態(tài)顯示

// 為item添加角標(biāo)
new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setBadgeItem(new TextBadgeItem().setText("20")))

結(jié)合Fragment切換

public class MainActivity extends AppCompatActivity {

    private ChatmesFragment mChatmesFragment;
    private NewLoanFragment mNewLoanFragment;
    private SettingFragment mSettingFragment;
    private SystemFragment mSystemFragment;


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

        BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb);
        bottomNavigationBar.setTabSelectedListener(tabSelectedListener);

        bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.appbar_chatmes, "chatmes").setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setActiveColorResource(R.color.black))
                .addItem(new BottomNavigationItem(R.drawable.appbar_setting, "setting").setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.appbar_sysmes, "systems").setActiveColorResource(R.color.pink))
                .setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)
                .setFirstSelectedPosition(0)
                //注意，所有的設(shè)置都要在該方法之前完成
                .initialise();

    }

    private void setDefaultFragment() {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        mChatmesFragment = ChatmesFragment.newInstance();
        transaction.replace(R.id.framelayout, mChatmesFragment);
        transaction.commit();
    }

    private BottomNavigationBar.OnTabSelectedListener tabSelectedListener = new BottomNavigationBar.OnTabSelectedListener() {
        @Override
        public void onTabSelected(int position) {
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            switch (position) {
                case 0:
                    if (mChatmesFragment == null) {
                        mChatmesFragment = ChatmesFragment.newInstance();
                    }
                    transaction.replace(R.id.framelayout, mChatmesFragment);
                    break;
                case 1:
                    if (mNewLoanFragment == null) {
                        mNewLoanFragment = NewLoanFragment.newInstance();
                    }
                    transaction.replace(R.id.framelayout, mNewLoanFragment);
                    break;
                case 2:
                    if (mSettingFragment == null) {
                        mSettingFragment = SettingFragment.newInstance();
                    }
                    transaction.replace(R.id.framelayout, mSettingFragment);
                    break;
                case 3:
                    if (mSystemFragment == null) {
                        mSystemFragment = SystemFragment.newInstance();
                    }
                    transaction.replace(R.id.framelayout, mSystemFragment);
                    break;
            }
            transaction.commit();
        }

        @Override
        public void onTabUnselected(int position) {

        }

        @Override
        public void onTabReselected(int position) {

        }
    };
}
結(jié)合Fragment使用

結(jié)合ViewPager使用

public class MainActivity extends AppCompatActivity {
    private List<Fragment> mFragments = new ArrayList<>();
    private ViewPager mViewPager;
    private BottomNavigationBar mBottomNavigationBar;

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

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        MyAdapter pagerAdapter = new MyAdapter(getSupportFragmentManager(), mFragments);
        mViewPager.setAdapter(pagerAdapter);
        mViewPager.addOnPageChangeListener(onPageChangeListener);
        mViewPager.setCurrentItem(0);

        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb);
        mBottomNavigationBar.setTabSelectedListener(tabSelectedListener);

        mBottomNavigationBar.setBarBackgroundColor(R.color.black)
                .setMode(BottomNavigationBar.MODE_SHIFTING)
                .addItem(new BottomNavigationItem(R.drawable.appbar_chatmes, "chatmes").setActiveColorResource(R.color.white))
                .addItem(new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setActiveColorResource(R.color.blue))
                .addItem(new BottomNavigationItem(R.drawable.appbar_setting, "setting").setActiveColorResource(R.color.red))
                .addItem(new BottomNavigationItem(R.drawable.appbar_sysmes, "systems").setActiveColorResource(R.color.orange))
                .setFirstSelectedPosition(0)
                //注意，所有的設(shè)置都要在該方法之前完成
                .initialise();
    }

    private void initFragment() {
        mFragments.add(ChatmesFragment.newInstance());
        mFragments.add(NewLoanFragment.newInstance());
        mFragments.add(SettingFragment.newInstance());
        mFragments.add(SystemFragment.newInstance());
    }

    private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            mBottomNavigationBar.selectTab(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

    private BottomNavigationBar.OnTabSelectedListener tabSelectedListener = new BottomNavigationBar.OnTabSelectedListener() {
        @Override
        public void onTabSelected(int position) {
            mViewPager.setCurrentItem(position);
        }

        @Override
        public void onTabUnselected(int position) {

        }

        @Override
        public void onTabReselected(int position) {

        }
    };
結(jié)合ViewPager

總結(jié)

好了，今天的BottomNavigationBar使用就給大家?guī)У竭@里，如果大家有什么疑問(wèn)或者文章中有任何錯(cuò)誤，歡迎留言指出，如果覺得寫的還不錯(cuò)，那就動(dòng)動(dòng)你的小手點(diǎn)個(gè)贊吧。

以上純屬于個(gè)人平時(shí)工作和學(xué)習(xí)的一些總結(jié)分享，如果有什么錯(cuò)誤歡迎隨時(shí)指出，大家可以討論一起進(jìn)步。

最后編輯于 ：
?著作權(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)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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