BottomBar

项目介绍

BottomBar是一个叫Iiro Krankka的哥们写出来的，这个项目是基于Google于2014年推出的设计语言Material Design而设计出来的，其中Material Design被设计出来是因为Google想做的是“从Android到衍生的Android Wear、Auto和TV，Material Design贯穿其中，成为沟通不同平台、设备的灵魂，让用户在不同平台上也有连贯的体验。”

好了题外话就说这么多，来看看BottonBar吧。

BottomBar是一个底部的菜单栏，可以实现许多炫酷动画，例如在滑动过程中隐藏菜单栏（图挂了，想看图的童鞋可点击图片链接查看），点击菜单栏中不同的标签而让菜单栏变色，除此之外菜单栏上标签还支持显示通知数量，等等。不多说，直接上图：

这个项目目前已经开发到了v2.0版，而且仍然处于维护状态中，想关注最新进展的童鞋可以直接点击其在GitHub上的地址进行查看。

实现步骤

接下来就看一下怎么实现一个使用BottomBar的Demo程序吧。

作者在GitHub上有一篇wiki介绍怎么使用BottoBar的，直接上原文地址。英文不好的童鞋可以接着往下看：

分三步：

1.建立项目并导入BottomBar的远程库；

2.编写BottomBar的相关布局；

3.完成MainActivity，实现完整的代码逻辑。

开发环境：Windows10

AndroidStudio 2.2.3

ps：由于wiki上的例子比较陈旧了，自此处使用代码均参考http://www.jianshu.com/p/2bafd1bbb21b# ，在此表示感谢

1.建立项目并导入BottomBar的远程库

建立一个Android项目，就叫BottomBarDemo吧。建立完成后，切换到Android项目结构模式。然后选择打开Gradle Scripts中的app模块的build.gradle文件（有两个build.gradle，第一个是整个项目的gradle构建脚本，第二个才是我们需要的，你的app模块的gradle构建脚本，不要弄错了），在其中的dependencies块中添加代码

 compile 'com.roughike:bottom-bar:2.0.2'这样我们就将BottomBar导入我们的项目中了，最后别忘了点击sync now同步一下。然后开始欢快地敲起代码吧~
            
2.编写BottomBar的相关布局
a. 建立xml文件
之后我们需要在res/menu目录下新建bottombar_menu.xml，用来存放BottomBar的多个标签，其用<tabs></tabs>围住，代码如下：
<?xml version="1.0" encoding="utf-8"?><tabs>    <tab        id="@+id/tab_recents"        title="Recents"        icon="@mipmap/ic_recents"        barColorWhenSelected="#FE3D81"        />    <tab        id="@+id/tab_favorites"        title="Favorites"        icon="@mipmap/ic_favorites"        barColorWhenSelected="#5D3C35"        />    <tab        id="@+id/tab_nearby"        title="Nearby"        icon="@mipmap/ic_nearby"        barColorWhenSelected="#7B1FA2"        />    <tab        id="@+id/tab_friends"        title="Friends"        icon="@mipmap/ic_friends"        barColorWhenSelected="#FF5252"        />    <tab        id="@+id/tab_restaurants"        title="Restaurants"        icon="@mipmap/ic_restaurants"        barColorWhenSelected="#FF9800"        /></tabs>其中有5个标签分别是Recents、Favorites、Nearby、Friends和Restaurants。
b.在 activity_main.xml 中设置 BottomBar
在res/layout/activity_main.xml中设置BottomBar，代码如下：
<?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"                android:layout_width="match_parent"                android:layout_height="match_parent">    <FrameLayout        android:id="@+id/contentContainer"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/bottomBar"/>    <com.roughike.bottombar.BottomBar        android:id="@+id/bottomBar"        android:layout_width="match_parent"        android:layout_height="60dp"        android:layout_alignParentBottom="true"        app:bb_behavior="shifting"        app:bb_tabXmlResource="@xml/bottombar_menu"/></RelativeLayout>在此处直接引入BottomBar的各项参数。
3.完成MainActivity，实现完整的代码逻辑。
在java/packagename.bottombardemo/MainActivity.java里实现功能逻辑，代码如下：
public class MainActivity extends AppCompatActivity {    PRivate BottomBar bottomBar;    private BottomBarTab nearby;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        bottomBar = (BottomBar) findViewById(R.id.bottomBar);        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {            @Override            public void onTabSelected(@IdRes int tabId) {                if (tabId == R.id.tab_favorites) {                    // 选择指定 id 的标签                    nearby = bottomBar.getTabWithId(R.id.tab_nearby);                    // 执行操作，设置通知数量是5                    nearby.setBadgeCount(5);                }            }        });        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {            @Override            public void onTabReSelected(@IdRes int tabId) {                if (tabId == R.id.tab_favorites) {                    // 已经选择了这个标签，又点击一次。即重选。                    // 如果重选了，就移除标签上的通知。                    nearby.removeBadge();                }            }        });    }}
之后工作就基本完成了，接下来在虚拟机上run一下就可以实现第一幅效果图里的效果了。未完待续……
参考资料
http://www.jianshu.com/p/2bafd1bbb21b#