open-android / BottomBarDemo

BottomBar的一个简单的示例项目

BottomBar使用

---

开源地址：https://github.com/roughike/BottomBar

PS：如果觉得文章太长，你也可观看该课程的视频，亲，里面还有高清，无码的福利喔

运行效果

使用步骤

1. 在Module的build.gradle添加依赖

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

2. 创建底部Tab的配置文件res/xml/bottombar_tabs.xml:

<tabs>
    <tab
        id="@+id/tab_favorites"
        icon="@mipmap/ic_favorites"
        title="Favorites"
        barColorWhenSelected="#5D4037" />
    <tab
        id="@+id/tab_nearby"
        icon="@mipmap/ic_nearby"
        title="Nearby"
        barColorWhenSelected="#7B1FA2" />
    <tab
        id="@+id/tab_friends"
        icon="@mipmap/ic_friends"
        title="Friends"
        barColorWhenSelected="#FF5252" />
</tabs>

icon：Tab的图片，注意图片不能是透明的，不能存在padding, 可使用Generic Icon Generator生成， 选择“Trim”, Padding设置为0dp

barColorWhenSelected: 当Tab被选中时BottomBar的背景颜色

3. 在布局中添加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">

    <!-- 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_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_activeTabColor="@android:color/white"
        app:bb_inActiveTabColor="@android:color/white"
        app:bb_inActiveTabAlpha="0.3"
        app:bb_tabXmlResource="@xml/bottombar_tabs"/>
</RelativeLayout>

bb_tabXmlResource: 指定BottomBar底部Tab的布局文件

bb_activeTabColor：设置选中Tab的文本颜色

bb_inActiveTabColor: 设置未选中Tab的文本颜色

bb_inActiveTabAlpha: 设置未选中Tab的文本透明度

4. 设置点击监听

public class MainActivity extends Activity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_favorites) {
                    // The tab with id R.id.tab_favorites was selected,
                    // change your content accordingly.
                }
            }
        });
    }
}

欢迎关注微信公众号