【BottomBar】Android炫酷的底部切换效果V2.0

本文转自：http://www.jianshu.com/p/2bafd1bbb21b，，，感谢支持

项目地址为：https://github.com/roughike/BottomBar
新版本与老版本用法区别较大，所以重写。

注意：此库最低支持版本是 api 11

---

显示效果图：

底部可收回

底部画面

在平板上显示会是这个效果

特别炫酷，有木有？
代码写起来也并不难。
跟着代码来实现第二张图的效果。

---

先导包，在Gradle 加上这个：

compile 'com.roughike:bottom-bar:2.0.2'

我们来实现第二张图
先上步骤：

1. 创建一个res/xml/bottombar_menu.xml;
2. 在 layout/activity_main.xml 中设置 BottomBar;
3. 在 Activity 中设置点击之后的操作。

1. 创建一个res/xml/bottombar_menu.xml

<?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>

2. 在 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_tabs"/></RelativeLayout>

3. 在 Activity 中设置点击之后的操作

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);                    nearby.setBadgeCount(5);                }            }        });        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {            @Override            public void onTabReSelected(@IdRes int tabId) {                if (tabId == R.id.tab_favorites) {                    // 已经选择了这个标签，又点击一次。即重选。                    nearby.removeBadge();                }            }        });    }}

到此，最基本的显示就已经实现了。
打包运行，就可以看到第二张图的效果。

然后还有一些其他的功能。

---

设置滚动隐藏，也就是第一张图的效果

<android.support.design.widget.CoordinatorLayout 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">    <android.support.v4.widget.NestedScrollView        android:id="@+id/myScrollingContent"        android:layout_width="match_parent"        android:layout_height="match_parent">        <!-- 你要显示的内容 -->    </android.support.v4.widget.NestedScrollView>    <com.roughike.bottombar.BottomBar        android:id="@+id/bottomBar"        android:layout_width="match_parent"        android:layout_height="60dp"        android:layout_gravity="bottom"        app:bb_tabXmlResource="@xml/bottombar_tabs_three"        app:bb_behavior="shy"/></android.support.design.widget.CoordinatorLayout>

使用了 CoordinatorLayout 和 NestedScrollView 布局。
其余的用法是一样的。

---

设置平板模式

平板模式也就是第三图的样子。

<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">    <!-- This could be your fragment container, or something -->    <FrameLayout        android:id="@+id/contentContainer"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_toRightOf="@+id/bottomBar" />    <com.roughike.bottombar.BottomBar        android:id="@+id/bottomBar"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_alignParentLeft="true"        app:bb_tabXmlResource="@xml/bottombar_tabs_three"        app:bb_tabletMode="true" /></RelativeLayout>

---

属性详解

BottomBar 的属性：

<com.roughike.bottombar.BottomBar    android:id="@+id/bottomBar"    android:layout_width="match_parent"    android:layout_height="60dp"    android:layout_alignParentBottom="true"    app:bb_tabXmlResource="@xml/bottombar_tabs_three"    app:bb_tabletMode="true"    app:bb_behavior="shifting|shy|underNavbar"    app:bb_inActiveTabAlpha="0.6"    app:bb_activeTabAlpha="1"    app:bb_inActiveTabColor="#222222"    app:bb_activeTabColor="@color/colorPrimary"    app:bb_titleTextAppearance="@style/MyTextAppearance"    app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"    app:bb_showShadow="true" />

bb_tabXmlResource：
设置标签的 xml 资源标识，在 res/xml/ 目录下。
bb_tabletMode：
是否是平板模式。true：是；false：不是。
bb_behavior：（三种模式）
shifting: 选定的标签比其他的更宽。
shy: 将 Bottombar 放在 Coordinatorlayout 它会自动隐藏在滚动！（需要特定的布局）
underNavbar: 正常模式（默认）。
bb_inActiveTabAlpha：
没选中时标签的透明度，icon 和 titiles 有用。（取值：0-1）
bb_activeTabAlpha：
选中时标签的透明度，与上一个相对应。（取值：0-1）
bb_inActiveTabColor：
没选时标签的颜色，icon 和 titiles 有用。
bb_activeTabColor：
选中时标签的颜色，与一个相对应。
bb_badgeBackgroundColor：
设置 Badges 的背景色，就是右上角显示数字那个。
bb_titleTextAppearance：
利用 style 重新设置自定的格式，例如：大小、加粗等。
bb_titleTypeFace：
设置自定的字体, 例： app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"。
将字体放在 src/main/assets/fonts/MySuperDuperFont.ttf 路径下，
只需要写 fonts/MySuperDuperFont.ttf 即可，将自动填充。
bb_showShadow：
控制阴影是否显示或隐藏，类似于蒙板，默认为true。

Tabs

<tab    id="@+id/tab_recents"    title="Recents"    icon="@drawable/empty_icon"    inActiveColor="#00FF00"    activeColor="#FF0000"    barColorWhenSelected="#FF0000"    badgeBackgroundColor="#FF0000" />

inActiveColor：
未被选择时，标签的颜色，作用于 icon 和 title。
activeColor：
被选择时，标签的颜色，作用于 icon 和 title，与上面相对应。
barColorWhenSelected：
当该标签被选择时，整个 BottomBar 的背景色。（就是一点，整个底部渐变的那个颜色）
badgeBackgroundColor：
设置 Badges 的背景色，就是右上角显示数字那个。

---

改版之后的优点：

1. API 变得更简单；
2. 所有 属性 和 行为 都在 xml 中被定义。

确实方便了不少，而且更容易被理解了。

原项目在文章刚开始的时候已经放上了。
这里我写了一个最基本的项目，也就是本文中的代码。
地址：
https://github.com/Wing-Li/AndroidPractice/tree/master/BottomBar2.0

文／Wing_Li（简书作者）
原文链接：http://www.jianshu.com/p/2bafd1bbb21b
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。