BottomBar使用

原创 2016年12月29日 10:48:52

开源地址: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="@drawable/ic_favorites"
        title="Favorites"
        barColorWhenSelected="#5D4037" />
    <tab
        id="@+id/tab_nearby"
        icon="@drawable/ic_nearby"
        title="Nearby"
        barColorWhenSelected="#5D4037" />
    <tab
        id="@+id/tab_friends"
        icon="@drawable/ic_friends"
        title="Friends"
        barColorWhenSelected="#5D4037" />
</tabs>

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

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

3. 在布局中添加BottomBar

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- 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_inActiveTabColor="#222222"
        app:bb_activeTabColor="@color/colorPrimary"
        app:bb_tabXmlResource="@xml/bottombar_tabs" />
</RelativeLayout>

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

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

bb_activeTabColor:设置选中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.
                }
            }
        });
    }
}

欢迎关注微信公众号

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

开源项目:BottomBar

前言 寻寻觅觅终于等到你,Material Design系列BottomBar开源库你值得拥有。从我接触android开发遇到tabhost,到radioGroup+ViewPage/FrameLa...

炫酷的底部菜单栏BottomBar

开源项目分析BottomBar 今天分析一个炫酷的底部菜单栏开源项目,先说明下用法,再分析一下源码的实现。 GitHub地址 https://github.com/roughike/BottomB...

第三方组件BottomBar使用

官方地址https://github.com/roughike/BottomBar 在gradle中配置 compile 'com.roughike:bottom-bar:2.0.2' ...

TabLayout.setOnTabSelectedListener不切换fragment

用TabLayout+ViewPager实现选项卡的地方多了,就想着把它们封装成一个类库tablayoutlibrary,布局中:...

初识BottomBar

这是一个开源的项目,BottomBar实现酷炫的底部导航栏。

BottomBar的基本使用

BottomBar

第三方开源库:BottomBar 底部导航栏

简介github地址:BottomBar 参考:【BottomBar】Android炫酷的底部切换效果V2.0 BottomBar可以跟BottomNavagionView一样,是一种Materi...

android界面底部BottomBar以及fragment

1.今天不想写了,下次再写

BottomBarLayout——方便快捷地实现底部导航栏

转载请注明出处:http://blog.csdn.net/chay_chan/article/details/73715607轻量级的底部导航栏  目前市场上的App,几乎都有底部页签导航栏,所以我们...

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

本文转自:http://www.jianshu.com/p/2bafd1bbb21b,,,感谢支持 项目地址为:https://github.com/roughike/BottomBar 新版本与...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BottomBar使用
举报原因:
原因补充:

(最多只允许输入30个字)