今天分享一个常用的控件:BottomBar
BottomBar作为一个开源的第三方控件,因其简单实用,且动画效果酷炫,用来作为android App的底部导航栏;
关于这方面的详解一直都有,此次进行重写是因为,该控件进行了版本升级,由原先的1.0版本升级到了现在的2.0版本,使用方法和配置设置发生了较大改变;

先看下bottombar的效果:

Android 怎么在Toolbar右边添加图标 android bottombar_ico


下面笔者会详细介绍其新版的使用方法:
1.导包:
在Module的Build中添加:
compile ‘com.roughike:bottom-bar:2.0.2’

2.配置XML文件
2.1配置资源文件:
在res/xml/创建:bottom_bar.xml
里面具体代码:

<?xml version="1.0" encoding="utf-8"?>
                <tabs>
                   <tab
                       icon="@mipmap/ic_recents"
                       id="@+id/tab_recents"
                       title="Recents" />
                   <tab
                       icon="@mipmap/ic_favorites"
                       id="@+id/tab_favorites"
                       title="Favorites" />
                   <tab
                       icon="@mipmap/ic_nearby"
                       id="@+id/tab_nearby"
                       title="Nearby" />
                   <tab
                       icon="@mipmap/ic_friends"
                       id="@+id/tab_friends"
                       title="Friends" />
                   <tab
                       icon="@mipmap/ic_restaurants"
                       id="@+id/tab_food"
                       title="Food" />
                </tabs>

2.2布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mrzhou.bottombarsample.Main3Activity">


    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar"
        android:orientation="horizontal">

    </LinearLayout>


    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_alignParentBottom="true"
        app:bb_behavior="shifting"
        app:bb_tabXmlResource="@xml/bottom_bars_five" />

</RelativeLayout>

3.java代码设置:
java代码中只需要:bottomBar = (BottomBar) findViewById(R.id.bottomBar);


下面详细介绍一下xml属性和java代码中主要的方法:
xml属性:

<com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        app:bb_activeTabAlpha="0.5" 被选中状态的标签的颜色的透明度
        app:bb_activeTabColor="@color/colorAccent"   被选中状态的标签的颜色
        app:bb_behavior="shifting"   配合CoordinatorLayout使用,是否在界面滑动时隐藏底部导航栏
        app:bb_inActiveTabAlpha="1"   默认状态的标签的颜色的透明度
        app:bb_inActiveTabColor="@color/colorPrimary"  默认状态的标签的颜色的颜色
        app:bb_tabXmlResource="@xml/bottom_bars_five"  关联资源文件:必须设置!!!!
        app:bb_tabletMode="true"   模式:分为底部/竖向 true为竖向,默认为false
        app:bb_titleTextAppearance="@style/CustomTitleTextAppearance"  设置字体的style
        />

Java代码:
主要方法:
getTabCount(); 返回底部标签个数
getTabAtPosition(int position);通过下标得到BottomBarTab
setDefaultTabPosition(int position) 设置底部导航栏默认显示位置
监听事件:
setOnTableSelectListener();
eg:

bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                messageView.setText(TabMessage.get(tabId, true));
            }
        });

项目实战:配合Fragment实现界面导航:
与RadioGroup使用方式基本一致,主要需要的方法为:
1.getTabCount();
2.getTabAtPosition(int position);
3.setOnTableSelectListener();

笔者初步的封装了一个工具类:

public final class BottomBarTabUtils implements OnTabSelectListener {

    private FragmentManager manager;
    private FragmentTransaction transaction;
    private BottomBar bottomBar;
    private List<Fragment> fragments;
    private int layoutId;
    private static BottomBarTabUtils bottomBarTabUtils = null;

    private BottomBarTabUtils() {

    }

    public static BottomBarTabUtils getInstance() {
        if (bottomBarTabUtils == null) {
            bottomBarTabUtils = new BottomBarTabUtils();
        }
        return bottomBarTabUtils;
    }


    public void tabUtils(FragmentManager manager, BottomBar bottomBar, List<Fragment> fragments, int layoutId) {
        this.manager = manager;
        this.bottomBar = bottomBar;
        this.fragments = fragments;
        this.layoutId = layoutId;
        bottomBar.setOnTabSelectListener(this);
    }

    @Override
    public void onTabSelected(@IdRes int tabId) {
        for (int i = 0; i < bottomBar.getTabCount(); i++) {
            transaction = manager.beginTransaction();
            if (bottomBar.getTabAtPosition(i).getId() == tabId) {
                Fragment fragment = fragments.get(i);
                for (int i1 = 0; i1 < fragments.size(); i1++) {
                    if (i1 == i) {
                        if (!fragment.isAdded()) {
                            transaction.add(layoutId, fragment);
                        }
                        transaction.show(fragment);
                    } else {
                        transaction.hide(fragments.get(i1));
                    }
                }
            }
            transaction.commit();
        }
    }
}

此次BottomBar 2.0新版的使用,就为大家分析到这,2.0版本相对于1.0的版本使用更加简化,增加了布局中直接添加控件的办法,使用起来更加直观!至于其他方法

这是笔者第一次发技术类的博客,文笔和格局可能欠缺,希望大家斧正,若有技术方面问题,可以与笔者沟通交流,十分感谢!!!