BottomBar(2.0新版)使用分析

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

先看下bottombar的效果:

---

下面笔者会详细介绍其新版的使用方法:
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的版本使用更加简化,增加了布局中直接添加控件的办法,使用起来更加直观!至于其他方法,大家可以自行参考官方文档:
链接地址:https://github.com/roughike/BottomBar

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