banner
半米牙

半米牙的笔记

分享技术、记录生活
email
HomeNFTsArchives

Android 开发之 Bottom Navigation 初尝试

#技术分享106

一直感觉 Material Design 设计很是好看，尤其是底部的导航栏，简约的图标以及透明的背景。决定自己体验一把。

Material Design 是由 Google 推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和 “其他平台” 提供更一致、更广泛的 “外观和感觉”。

Material Design 的一些重要功能包括系统字体 Roboto 的升级版本，同时颜色更鲜艳，动画效果更突出。谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。

组件介绍#

Bottom Navigation 经常用于底部导航栏。不过它所包含的标签页不应过多也不应该过少，谷歌官方文档中表示，标签页的个数在 3-5 个左右合适。

如何实现#

在 Module 的 build.gradle 中添加如下代码

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

实现 Bottom Navigation 功能，比较好用的是第三方的 BottomBar 库，截止 2017.1.8，最新的版本是 2.0.2，如果需要最新版，请访问 BottomBar 的 Github Repository

在 res 下新建类型为 xml 的 xml 文件夹

在 xml 文件夹下新建 bottombar_tabs.xml 文件

res/xml/bottombar_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <tabs>
        <tab
            id="@+id/tab_one"
            icon="@drawable/ic_3d_rotation_white_24dp"
            title="财务"
            barColorWhenSelected="#865242"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_two"
            icon="@drawable/ic_account_balance_white_24dp"
            title="群组"
            barColorWhenSelected="#268434"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
        <tab
            id="@+id/tab_three"
            icon="@drawable/ic_accessibility_white_24dp"
            title="朋友"
            barColorWhenSelected="#8b2099"
            inActiveColor="#FFFFFF"
            activeColor = "#FFFFFF"/>
    </tabs>
</PreferenceScreen>

barColorWhenSelected属性控制着当这个 Tab 被选择时，BottomBar 的整体颜色。inActiveColor属性是这个 Tab 未激活时图片的颜色。与之相对应的activeColor属性，则是控制着激活时的图片颜色。

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="me.luzhoumin.bottomnavigation.MainActivity">

    <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"
        app:bb_behavior="underNavbar"
        app:bb_inActiveTabAlpha="0.6"
        app:bb_activeTabAlpha="1"
        app:bb_showShadow="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="Hello World!"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="51dp" />

</RelativeLayout>

app:bb_tabXmlResource指向的是第三步建的 xml 文件，里面有每个 Tab 的属性。

MainActivity.java

import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.BottomBarTab;
import com.roughike.bottombar.OnTabReselectListener;
import com.roughike.bottombar.OnTabSelectListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取Bottom Bar组件
        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        //获取用来显示的TextView组件
        final TextView tv = (TextView) findViewById(R.id.textview);
        //设置Bottom Bar的选择监听器
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one 被点击");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_group 被点击");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three 被点击");
                }
            }
        });
        //设置Bottom Bar的重复选择监听器
        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
            @Override
            public void onTabReSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_one){
                    tv.setText("tab_one 再次被点击");
                }
                if (tabId == R.id.tab_two){
                    tv.setText("tab_two 再次被点击");
                }
                if (tabId == R.id.tab_three){
                    tv.setText("tab_three 再次被点击");
                }
            }
        });
        //设置Tab的Badge
        BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_two);
        nearby.setBadgeCount(5);
    }
}

修改主题样式

res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <!--修改主题为无ActionBar-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--添加-->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

BottomBar API#

For the 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

the XML Resource id for your tabs, that reside in values/xml/

  • bb_tabletMode

if you want the BottomBar to behave differently for tablets. There’s an example of this in the sample project!

  • bb_behavior
    • shifting: the selected tab is wider than the rest.
    • shy: put the BottomBar inside a CoordinatorLayout and it’ll automatically hide on scroll!
    • underNavbar: draw the BottomBar under the navBar!
  • bb_inActiveTabAlpha

the alpha value for inactive tabs, that’s used in the tab icons and titles.

  • bb_activeTabAlpha

the alpha value for active tabs, that’s used in the tab icons and titles.

  • bb_inActiveTabColor

the color for inactive tabs, that’s used in the tab icons and titles.

  • bb_activeTabColor

the color for active tabs, that’s used in the tab icons and titles.

  • bb_badgeBackgroundColor

the background color for any Badges in this BottomBar.

  • bb_titleTextAppearance

custom textAppearance for the titles

  • bb_titleTypeFace

path for your custom font file, such as fonts/MySuperDuperFont.ttf. In that case your font path would look like src/main/assets/fonts/MySuperDuperFont.ttf, but you only need to provide fonts/MySuperDuperFont.ttf, as the asset folder will be auto-filled for you.

  • bb_showShadow

controls whether the shadow is shown or hidden, defaults to true.

For the tabs

<tab
    id="@+id/tab_recents"
    title="Recents"
    icon="@drawable/empty_icon"
    inActiveColor="#00FF00"
    activeColor="#FF0000"
    barColorWhenSelected="#FF0000"
    badgeBackgroundColor="#FF0000" />
  • inActiveColor

the color for inactive tabs, that’s used in the tab icons and titles.

  • activeColor

the color for active tabs, that’s used in the tab icons and titles.

  • barColorWhenSelected

the color that the whole BottomBar should be when selected this tab.

  • badgeBackgroundColor

the background color for any Badges in this tab.

需要注意的地方#

  • Tab 的图标必须是全透明、纯黑、24dp、Padding = 0dp，而且最好所有分辨密度的图片都要有，否则图标会很大或者很小，影响显示效果。
  • 如果想保持在屏幕最底部，记得在布局 xml 的<com.roughike.bottombar.BottomBar>标签中添加属性android:layout_alignParentBottom="true"，并且做好第六步工作。

参考文档#

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.