Android 底部导航栏 BottomNavigationBar的简单使用

来源:互联网 发布:网络舆情工作计划 编辑:程序博客网 时间:2024/05/17 03:16

不知道扯点什么 直奔主题吧

1.使用BottomNavigationBar首先要先添加依赖,
compile ‘com.ashokvarma.android:bottom-navigation-bar:1.3.0’

2.接下来是布局

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.yzq.csdn_bottomnav.MainActivity">    <!--内容区域-->    <LinearLayout        android:id="@+id/bottom_nav_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        app:layout_behavior="@string/appbar_scrolling_view_behavior" />    <!--BottomNavigationBar-->    <com.ashokvarma.bottomnavigation.BottomNavigationBar        android:id="@+id/bottom_navigation_bar_container"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom">    </com.ashokvarma.bottomnavigation.BottomNavigationBar></android.support.design.widget.CoordinatorLayout>

布局很简单,就是一个内容区域和一个底部的导航栏。
内容区域只是用来显示不同的fragment

3.接下来转到MainActivity中
先设置BottomNavigationBar的样式和添加选项

默认有3种样式,通过对setMode和setBackgroundStyle的进行不同的组合会有不同的效果,感兴趣的可以自己尝试。

  bottom_navigation_bar_container.setAutoHideEnabled(true);//自动隐藏        //BottomNavigationBar.MODE_SHIFTING;        //BottomNavigationBar.MODE_FIXED;        //BottomNavigationBar.MODE_DEFAULT;        bottom_navigation_bar_container.setMode(BottomNavigationBar.MODE_FIXED);        // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;        // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE        // BottomNavigationBar.BACKGROUND_STYLE_STATIC        bottom_navigation_bar_container.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);        bottom_navigation_bar_container.setBarBackgroundColor(R.color.white);//背景颜色        bottom_navigation_bar_container.setInActiveColor(R.color.nav_gray);//未选中时的颜色        bottom_navigation_bar_container.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色

我们还可以设置角标
badgeItem = new BadgeItem().setBackgroundColor(Color.RED).setText(“99”).setHideOnSelect(true);//角标

接下来创建选项

msgItem = new BottomNavigationItem(R.drawable.msg, "消息");        msgItem.setBadgeItem(badgeItem);        taskItem = new BottomNavigationItem(R.drawable.task, "任务");        noticeItem = new BottomNavigationItem(R.drawable.notice, "公告");

然后将选项添加并初始化,设置监听
bottom_navigation_bar_container.addItem(msgItem).addItem(taskItem).addItem(noticeItem);
bottom_navigation_bar_container.initialise();
bottom_navigation_bar_container.setTabSelectedListener(this);

这样 底部导航栏就出来啦

4.接下来就是对监听做处理 选择选项时显示相应的fragment

/*底部NaV监听*/    @Override    public void onTabSelected(int position) {        hideAllFrag();//先隐藏所有frag        switch (position) {            case 0:                if (msgFrag == null) {                    msgFrag = new MsgFragment();                }                addFrag(msgFrag);                getSupportFragmentManager().beginTransaction().show(msgFrag).commit();                getSupportActionBar().setTitle("消息");                break;            case 1:                if (taskFrag == null) {                    taskFrag = new TaskFragment();                }                addFrag(taskFrag);                getSupportFragmentManager().beginTransaction().show(taskFrag).commit();                getSupportActionBar().setTitle("任务");                break;            case 2:               /*公告Frag*/                if (noticeFrag == null) {                    noticeFrag = new NoticeFragment();                }                addFrag(noticeFrag);                getSupportFragmentManager().beginTransaction().show(noticeFrag).commit();                getSupportActionBar().setTitle("公告");                break;        }    }

大功告成!这样一个漂亮的底部导航就完成了,很简单吧。效果图如下
效果图
下面是写的一个小demo
底部导航栏Demo

1 0
原创粉丝点击