MD笔记——Bottom Navigation

效果图

2017-01-03 20.42.27.gif

组件介绍

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

如何实现

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

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

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

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

[email protected]

[email protected]

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

res/xml/bottombar_tabs.xml

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

4、activity_main.xml

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

5、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);
    }
}

6、修改主题样式

res/values/styles.xml

BottomBar API

For the BottomBar

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

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的标签中添加属性 android:layout_alignParentBottom="true"，并且做好第六步工作。

参考文档

• 谷歌官方文档
• BottomBar 的 Github Repository

与FloatingActionButton和SnackBar合作的效果

2017-01-20 21.41.52.gif