Material design library系列——Botto

作者: 李晓通 | 来源:发表于2017-09-19 20:10 被阅读162次

前言

今天给大家带来Material design系列的第五篇文章，BottomNavigationBar的使用，那么按照国际惯例，先给大家介绍一下什么是BottomNavigationBar。

顾名思义，BottomNavigationBar翻译过来就是底部导航控件，由于Android之前一直没有官方的底部导航栏，所以在此之前大家实现也是各有招数，有用RadioGroup实现的，有用LinearLayout实现的，不过现在好了，Google官方在自己推出的Material design中增加了BottomNavigationBar这个底部导航。

使用

在gradle中添加依赖
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.2'
在xml文件中加入该控件

在代码中添加条目

做到这一步，就能实现上面gif的效果了。

注意事项

BottomNavigationBar高度默认是 56dp
菜单元素建议 3~5 个
BottomNavigationBar的背景颜色默认是 @color/colorAccent

BottomNavigationBar的模式

xml：bnbMode
代码:setMode()
可以改变控件的模式，模式有五种

MODE_DEFAULT

如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式

MODE_FIXED（固定大小）

。填充模式，未选中的Item会显示文字，没有换挡动画。

MODE_FIXED

MODE_FIXED_NO_TITLE（固定大小不带文字）

MODE_FIXED_NO_TITLE

MODE_SHIFTING（不固定大小）

。换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画

MODE_SHIFTING

MODE_SHIFTING_NO_TITLE（不固定大小不带文字）

MODE_SHIFTING_NO_TITLE

Background Style

xml: bnbBackgroundStyle
代码：setBackgroundStyles()
包含3种style

1. BACKGROUND_STYLE_DEFAULT

如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

2. BACKGROUND_STYLE_STATIC

。点击的时候没有水波纹效果
。航条的背景色是白色，加上setBarBackgroundColor（）可以设置成你所需要的任何背景颜色

BACKGROUND_STYLE_STATIC + MODE_SHIFTING效果

BACKGROUND_STYLE_STATIC + MODE_SHIFTING

BACKGROUND_STYLE_STATIC + MODE_FIXED效果

BACKGROUND_STYLE_STATIC + MODE_FIXED

3. BACKGROUND_STYLE_RIPPLE

。点击的时候有水波纹效果
。导航条的背景色取决于选中状态的 Item的颜色（ActiveColor），也就是setActiveColorResource这个设置的颜色

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，一般用作消息提醒的

// 创建一个BadgeItem
BadgeItem badge=new BadgeItem();
// 方法介绍
// .setBorderWidth(2)//Badge的Border(边界)宽度
// .setBorderColor("#FFF")//Badge的边界颜色
// .setBackgroundColor("#93F")//Badge背景颜色
// .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默认右上角
// .setText("20")//显示的文本
// .setTextColor("#FFF")//文本颜色
// .setAnimationDuration(2000)
// .setHideOnSelect(true)//当选中状态时消失，非选中状态显示

// 为item添加角标
new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setBadgeItem(new TextBadgeItem().setText("20")))

结合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)
                //注意，所有的设置都要在该方法之前完成
                .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) {

        }
    };
}

结合Fragment使用

结合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)
                //注意，所有的设置都要在该方法之前完成
                .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) {

        }
    };

结合ViewPager

总结

好了，今天的BottomNavigationBar使用就给大家带到这里，如果大家有什么疑问或者文章中有任何错误，欢迎留言指出，如果觉得写的还不错，那就动动你的小手点个赞吧。

以上纯属于个人平时工作和学习的一些总结分享，如果有什么错误欢迎随时指出，大家可以讨论一起进步。

网友评论

本文标题：Material design library系列——Botto

本文链接：https://www.haomeiwen.com/subject/gaxgsxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Material design library系列——Botto

前言

使用

注意事项

BottomNavigationBar的模式

MODE_DEFAULT

MODE_FIXED（固定大小）

MODE_FIXED_NO_TITLE（固定大小不带文字）

MODE_SHIFTING（不固定大小）

MODE_SHIFTING_NO_TITLE（不固定大小不带文字）

Background Style

1. BACKGROUND_STYLE_DEFAULT

2. BACKGROUND_STYLE_STATIC

BACKGROUND_STYLE_STATIC + MODE_SHIFTING效果

BACKGROUND_STYLE_STATIC + MODE_FIXED效果

3. BACKGROUND_STYLE_RIPPLE

BACKGROUND_STYLE_RIPPLE+ MODE_SHIFTING效果

BACKGROUND_STYLE_RIPPLE+ MODE_FIXED效果