BottomBar的用法

先导包，在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_menu"/>

</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 的背景色，就是右上角显示数字那个。



此次笔记摘要大神之手，仅供学习
时间： 2024-10-26 04:46:59

BottomBar的用法的相关文章

炫酷的底部菜单栏BottomBar

开源项目分析BottomBar 今天分析一个炫酷的底部菜单栏开源项目,先说明下用法,再分析一下源码的实现. GitHub地址 https://github.com/roughike/BottomBar 先上个效果图 使用 添加依赖 compile 'com.roughike:bottom-bar:1.3.3' 创建menu资源文件 res/menu/bottombar_menu.xml: <menu xmlns:android="http://schemas.android.com/apk

【Ext.Net学习笔记】04：Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplate绑定数据 XTemplate是个模板,当我们为一个XTemplate绑定数据之后,将会按照模板的预定格式进行显示. <ext:Window runat="server" ID="win1" Title="XTemplates用法" Width

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

20.5 Shell脚本中的逻辑判断；20.6 文件目录属性判断；20.7 if特殊用法；20.8 20.9 cace判断（上下）

扩展: select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.5 Shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 1. 创建if1.sh测试脚本: [[email protected] ~]# vi if1.sh a=5,如果a大于3,满足这个条件,显示ok 添加内容: #!/bin/bash a=5 if [ $a -gt 3 ] then echo ok fi 2. 执行if1.sh脚本: [[e

20.1 Shell脚本介绍；20.2 Shell脚本结构和执行；20.3 date命令用法；20.4 Shell脚本中的变量

20.1 Shell脚本介绍 1. shell是一种脚本语言 aming_linux blog.lishiming.net 2. 可以使用逻辑判断.循环等语法 3. 可以自定义函数 4. shell是系统命令的集合 5. shell脚本可以实现自动化运维,能大大增加我们的运维效率 20.2 Shell脚本结构和执行 1. 开头(首行)需要加: #!/bin/bash 2. 以#开头的行作为解释说明: 3. 脚本的名字以.sh结尾,用于区分这是一个shell脚本 4. 执行.sh脚本方法有两种:

shell 中seq的用法 echo -n用法

用法:seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 增量 尾数 从1循环到100的两种方法(bash 其它的shell没试过)for x in `seq 1 100`;do echo $x;donefor x in {1..100};do echo $x;done echo -n 不换行输出 $echo -n "123" $echo "456" 最终输出 123456 echo -e 处理特殊字符 若字符串中

sudo的用法

su -l user -C 'COMMAND' 是用user这个用户执行命令 我们一般使用sudo 这个命令 sudo [-u] user COMMAND sudo [-k] COMMAND 清除此前用户的密码. sudo的配置文件/etc/sudoers 配置项为 users    hosts=(runas)    commands users:可以是一个用户的名称也可以是一个组,也可以是一个别名 username #UID user_alias 用户别名的用法 User_Alias NETA

几招学会 Python 3 中 PyMongo 的用法

本文和大家分享的是Python3下MongoDB的存储操作相关内容,在看本文之前请确保你已经安装好了MongoDB并启动了其服务,另外安装好了Python的PyMongo库.下面进入正题,一起来看看吧,希望对大家学习Python3有所帮助. 连接MongoDB 连接MongoDB我们需要使用PyMongo库里面的MongoClient,一般来说传入MongoDB的IP及端口即可,第一个参数为地址host,第二个参数为端口port,端口如果不传默认是27017. import pymongo cl

11 css中分组选择符的用法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> h1,span{color:red;} a:hover{color:#2EE926;} /*分组选择符的用法*/ </style> </head> <body&