Android控件之BottomNavigationBar底部滑动栏

开发工具：android studio2.2.3

测试机型：夜深模拟器 金立GN007

官网github地址：https://github.com/Ashok-Varma/BottomNavigation

效果图：

如何使用？

1、添加依赖

compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'

Activity：

package com.wentong.administrator.buttomnavigationdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.ashokvarma.bottomnavigation.BadgeItem;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.wentong.administrator.buttomnavigationdemo.fragment.FragmentFive;
import com.wentong.administrator.buttomnavigationdemo.fragment.FragmentFour;
import com.wentong.administrator.buttomnavigationdemo.fragment.FragmentOne;
import com.wentong.administrator.buttomnavigationdemo.fragment.FragmentThree;
import com.wentong.administrator.buttomnavigationdemo.fragment.FragmentTwo;

public class MainActivity extends AppCompatActivity {

    BottomNavigationBar bottomNavigationBar ;
    BadgeItem badge;
    int lastSelectedPosition = 0 ;
    FragmentOne fra_one ;
    FragmentTwo fra_two ;
    FragmentThree fra_three ;
    FragmentFour fra_four ;
    FragmentFive fra_five ;

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

        initView() ;

    }

    private void initView() {
        //实例化fragment
        fra_one = new FragmentOne() ;
        fra_two = new FragmentTwo() ;
        fra_three = new FragmentThree() ;
        fra_four = new FragmentFour() ;
        fra_five = new FragmentFive() ;
        //绑定控件
        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.act_main_bnb) ;
        //设置bottomNavigationBar的样式
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING) ;
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE) ;
        //设置默认颜色
        bottomNavigationBar
                .setInActiveColor(R.color.hite)//设置未选中的Item的颜色，包括图片和文字
                .setActiveColor(R.color.whilte)//设置整个控件的背景色
                .setBarBackgroundColor(R.color.colorInActive);//设置选中的Item的颜色，包括图片和文字
        //设置徽章
        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)//当选中状态时消失，非选中状态显示
        //设置item
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_directions_run_white_24dp , "菜谱").setBadgeItem(badge))//setBadgeItem(badge)设置徽章
                .addItem(new BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp , "新闻"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_directions_car_white_24dp , "音乐"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_directions_bus_white_24dp , "视屏"))
                .addItem(new BottomNavigationItem(R.mipmap.ic_directions_railway_white_24dp , "小说"))
                .setFirstSelectedPosition(lastSelectedPosition)//设置默认显示的
                .initialise();
        //设置监听
        bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            FragmentManager fm = getSupportFragmentManager() ;
            @Override
            public void onTabSelected(int position) {//未选中 -> 选中
                FragmentTransaction ft_1 = fm.beginTransaction() ;
                switch (position){
                    case 0:
                        if (!fra_one.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_one) ;
                        }
                        ft_1.show(fra_one) ;
                        break;
                    case 1:
                        if (!fra_two.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_two) ;
                        }
                        ft_1.show(fra_two) ;
                        break;
                    case 2:
                        if (!fra_three.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_three) ;
                        }
                        ft_1.show(fra_three) ;
                        break;
                    case 3:
                        if (!fra_four.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_four) ;
                        }
                        ft_1.show(fra_four) ;
                        break;
                    case 4:
                        if (!fra_five.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_five) ;
                        }
                        ft_1.show(fra_five) ;
                        break;
                    default:
                        break;
                }
                ft_1.commit() ;
            }

            @Override
            public void onTabUnselected(int position) {//选中 -> 未选中
                FragmentTransaction ft_1 = fm.beginTransaction() ;
                switch (position){
                    case 0:
                        if (!fra_one.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_one) ;
                        }
                        ft_1.hide(fra_one) ;
                        break;
                    case 1:
                        if (!fra_two.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_two) ;
                        }
                        ft_1.hide(fra_two) ;
                        break;
                    case 2:
                        if (!fra_three.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_three) ;
                        }
                        ft_1.hide(fra_three) ;
                        break;
                    case 3:
                        if (!fra_four.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_four) ;
                        }
                        ft_1.hide(fra_four) ;
                        break;
                    case 4:
                        if (!fra_five.isAdded()){
                            ft_1.add(R.id.act_main_ll , fra_five) ;
                        }
                        ft_1.hide(fra_five) ;
                        break;
                    default:
                        break;
                }
                ft_1.commit() ;
            }

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

            }
        }) ;
        //第一次进入app显示的fragment
        setDefault();
    }
    //设置默认显示的fragment
    private void setDefault(){
        FragmentManager fm = getSupportFragmentManager() ;//fragment管理器
        FragmentTransaction tran = fm.beginTransaction() ;//fragment事务所
        tran.add(R.id.act_main_ll , fra_one) ;//事务所添加一个fragment
        tran.show(fra_one) ;//事务所将fragment显示出来
        tran.commit() ;//事务所提交操作
    }
}

XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wentong.administrator.buttomnavigationdemo.MainActivity">

    <LinearLayout
        android:id="@+id/act_main_ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/act_main_bnb"
        android:orientation="vertical"></LinearLayout>

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

</RelativeLayout>

colors：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="colorInActive">#7FFFD4</color>
    <color name="colorBarBg">#FFA07A</color>

    <color name="colorBike">#D8BFD8</color>
    <color name="colorUnBike">#EE82EE</color>
    <color name="colorRun">#BA55D3</color>
    <color name="colorUnRun">#8A2BE2</color>
    <color name="colorBus">#B0C4DE</color>
    <color name="colorUnBus">#00BFFF</color>
    <color name="whilte">#ffffff</color>
    <color name="hite">#85000000</color>
</resources>

Fragment和mipmap我就不贴了，自己解决。

ps：

官网一共四种添加方式，有一种为下载jar包是为eclipse用的，但是下载下来是一个aar文件（aar是谷歌转为as准备的），我去网上查阅信息，搞了好久都没有弄好。所以如果有弄好了的麻烦知会我一声。万分感谢。