Android开发：BottomNavigationBar实现底部标题栏

 BottomNavigationBar实现底部标题栏

 

 一、添加依赖

andriod studio gradle加载添加依赖：

//底部导航栏样式BottomNavigationBar
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3'

 

二、正文

/** * setMode() 内的参数有三种模式类型：

 MODE_DEFAULT 自动模式：导航栏Item的个数<=3 用 MODE_FIXED 模式，否则用 MODE_SHIFTING 模式

 MODE_FIXED 固定模式：未选中的Item显示文字，无切换动画效果。

 MODE_SHIFTING 切换模式：未选中的Item不显示文字，选中的显示文字，有切换动画效果。 

 

/** * setBackgroundStyle() 内的参数有三种样式

 BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC

如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

 BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果

 BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果 

 

2.1、MainActivity.java 文件

public class MainActivity extends AppCompatActivity {
    private BottomNavigationBar mBottomNavigationBar;
    private TextBadgeItem textBadgeItem;
    private ShapeBadgeItem shapeBadgeItem;

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

    /**
     * 初始化控件
     */
    private void initView() {
        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        textBadgeItem = new TextBadgeItem();

        //显示信息提示数字
        textBadgeItem.setBorderWidth(4)
                .setBackgroundColor(R.color.colorAccent)
                .setAnimationDuration(200)
                .setText("3").
                setHideOnSelect(false);

        //显示信息提示图形
        shapeBadgeItem = new ShapeBadgeItem();
        shapeBadgeItem.setShapeColorResource(R.color.colorPrimary)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(false);
    }

    /**
     * 配置控件
     */
    private void setView() {
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED)
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        mBottomNavigationBar.setActiveColor(R.color.light_blue);

        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_tabbar_home_press, "工具箱")
                .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_home_nor))
                .setBadgeItem(textBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_timetable_press, "课程表")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_timetable_nor)))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_message_press, "小纸条")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_message_nor))
                        .setBadgeItem(shapeBadgeItem))
                .addItem(new BottomNavigationItem(R.drawable.ic_tabbar_my_press, "我")
                        .setInactiveIcon(ContextCompat.getDrawable(MainActivity.this, R.drawable.ic_tabbar_my_nor)))
                .setFirstSelectedPosition(0)//设置第一个菜单为选中状态
                .initialise();//必须调用该方法，才会生效
        //设置第一个要显示的Fragment
        replace(new UtilFragment());
        //BottomNavigationBar选项卡，选择事件
        mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {//未选中 -> 选中
                switch (position) {
                    case 0:
                        replace(new UtilFragment());
                        break;
                    case 1:
                        replace(new ClassScheduleFragment());
                        break;
                    case 2:
                        replace(new MessageFragment());
                        break;
                    case 3:
                        replace(new MyFragment());
                        break;
                    default:
                        break;
                }
            }

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

            }

            @Override
            public void onTabReselected(int position) {//选中 -> 选中

            }
        });
    }

    /**
     * 切换Fragment
     *
     * @param fragment Fragment
     */
    private void replace(Fragment fragment) {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.frameContent, fragment);
        transaction.commit();
    }

    /**
     * 启动Activity
     *
     * @param context 上下文
     */
    public static void startActivity(Context context) {
        Intent intent = new Intent();
        intent.setClass(context, MainActivity.class);
        context.startActivity(intent);
    }
}

2.2、activity_main布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/frameContent"
        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>

 

Fragment自行定义即可，然后把文中的Fragment替换成自己的Fragment