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...
  • AnalyzeSystem
  • AnalyzeSystem
  • 2016年04月25日 09:28
  • 6723

炫酷的底部菜单栏BottomBar

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

第三方组件BottomBar使用

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

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

简介github地址:BottomBar 参考:【BottomBar】Android炫酷的底部切换效果V2.0 BottomBar可以跟BottomNavagionView一样,是一种Materi...
  • ss1168805219
  • ss1168805219
  • 2016年12月05日 15:35
  • 5325

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

BottomBar 简介 github地址:BottomBar  参考:【BottomBar】Android炫酷的底部切换效果V2.0  BottomBar可以跟BottomNavag...
  • wolfking0608
  • wolfking0608
  • 2017年11月17日 11:24
  • 390

android界面底部BottomBar以及fragment

1.今天不想写了,下次再写
  • qq_17273659
  • qq_17273659
  • 2016年08月30日 19:24
  • 3035

简单的底部标签开源项目:BottomBar

最近忙着把公司的eclipse项目移植到Android Studio上,移植完后就忙着看各种开源的特效,想加点到项目里,下面先看底部标签导航特效:BottomBar 本文参考自:https://git...
  • wenwins
  • wenwins
  • 2016年07月13日 17:59
  • 798

BottomBar之Android底部菜单

开源项目BottomBar,实现Android底部菜单(常用菜单,BottomBar实现动画(上下式)+消息菜单,BottomBar+ViewPager+Fragment实现炫酷的底部导航效果)...
  • zhh_csdn_ard
  • zhh_csdn_ard
  • 2017年03月31日 17:18
  • 516

Android BottomNavigationBar底部导航控制器的使用

最近Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹...
  • u010046908
  • u010046908
  • 2016年03月23日 12:37
  • 41037

Iwfu-GitHub--BottomBar组件

组件来源于GitHub。 地址: https://github.com/roughike/BottomBar效果:以下是我自己的学习使用BottomBar过程。...
  • RoseChan
  • RoseChan
  • 2016年04月07日 17:29
  • 2888
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BottomBar使用
举报原因:
原因补充:

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