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.
                }
            }
        });
    }
}

欢迎关注微信公众号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mwq384807683/article/details/53924440

开源项目:BottomBar

前言 寻寻觅觅终于等到你,Material Design系列BottomBar开源库你值得拥有。从我接触android开发遇到tabhost,到radioGroup+ViewPage/FrameLa...
  • AnalyzeSystem
  • AnalyzeSystem
  • 2016-04-25 09:28:30
  • 7303

炫酷的底部菜单栏BottomBar

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

第三方组件BottomBar使用

官方地址https://github.com/roughike/BottomBar 在gradle中配置 compile 'com.roughike:bottom-bar:2.0.2' ...
  • zhang___yong
  • zhang___yong
  • 2017-03-14 19:34:15
  • 860

初识BottomBar

这是一个开源的项目,BottomBar实现酷炫的底部导航栏。
  • Fessible_Max
  • Fessible_Max
  • 2017-05-29 17:17:01
  • 275

BottomBar的基本使用

BottomBar
  • qq_21198501
  • qq_21198501
  • 2017-09-25 08:20:05
  • 127

京东

public interface IMainAciivity { void OnSuccess(List data); void OnFailde(String s); voi...
  • qq_41436470
  • qq_41436470
  • 2018-04-04 14:33:49
  • 7

底部导航控件——BottomNavigationBar简单使用

Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,以后我们的A...
  • qq_38250682
  • qq_38250682
  • 2017-04-10 13:17:06
  • 1079

BottomNavigationView的基础使用3

BottomNavigationBar这是一个第三方库,很强大,有很多效果,但是对于一个公司的项目来说,第三方库越多,不稳定性就会越高,如果可以使用官方或者代码copy的方式,那是最好的。下面是Bot...
  • qq_33645265
  • qq_33645265
  • 2016-12-27 17:28:47
  • 2350

底部导航栏实现页面的切换(四):消息提示

APP4: 导航栏消息提示 参考:http://blog.csdn.net/coder_pig/article/details/48104807 知识点效果图: 是在 底部导航栏实现页面的切换...
  • ss1168805219
  • ss1168805219
  • 2016-09-08 15:52:37
  • 1213

彻底解决Fragment重叠的问题

使用Show和Hide切换fragment时防止重叠问题出现的解决办法
  • u011734444
  • u011734444
  • 2016-11-26 05:20:50
  • 3371
收藏助手
不良信息举报
您举报文章:BottomBar使用
举报原因:
原因补充:

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