【BottomBar】Android炫酷的底部切换效果V2 0

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。 希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。 本文来自：www.jianshu.com/users/320f9… 感谢您的关注。

项目地址为：github.com/roughike/Bo… 新版本与老版本用法区别较大，所以重写。

注意：此库最低支持版本是 api 11

---

显示效果图：

特别炫酷，有木有？ 代码写起来也并不难。 跟着代码来实现第二张图的效果。

图标必须完全不透明，纯黑色，24dp ，没有填充。

---

先导包，在Gradle 加上这个：

compile 'com.roughike:bottom-bar:2.3.1'
复制代码

我们来实现第二张图 先上步骤：

1. 创建一个res/xml/bottombar_menu.xml;

2. 在 layout/activity_main.xml 中设置 BottomBar;
3. 在 Activity 中设置点击之后的操作。

1. 创建一个res/xml/bottombar_menu.xml

    
    
    
    
    

复制代码

2. 在 layout/activity_main.xml 中设置 BottomBar

    

    

    


复制代码

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();
                }
            }
        });
        
        bottomBar.setTabSelectionInterceptor(new TabSelectionInterceptor() {
            @Override
            public boolean shouldInterceptTabSelection(@IdRes int oldTabId, @IdRes int newTabId) {
                // 点击无效
                if (newTabId == R.id.tab_restaurants ) {
                    // ......
                    // 返回 true 。代表：这里我处理了，你不用管了。
                    return true;
                }

                return false;
            }
        });
    }
}
复制代码

到此，最基本的显示就已经实现了。 打包运行，就可以看到第二张图的效果。

然后还有一些其他的功能。

---

设置滚动隐藏，也就是第一张图的效果

    

        

    

    


复制代码

使用了 CoordinatorLayout 和 NestedScrollView 布局。 其余的用法是一样的。

---

设置平板模式

平板模式也就是第三图的样子。

	
	

	


复制代码

---

属性详解

#### BottomBar 的属性：

复制代码

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_badgesHideWhenActive： 小红点是否隐藏，默认为 true 隐藏。就是右上角显示数字那个。 bb_titleTextAppearance： 利用 style 重新设置自定的格式，例如：大小、加粗等。 bb_titleTypeFace： 设置自定的字体, 例： app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"。 将字体放在 src/main/assets/fonts/MySuperDuperFont.ttf 路径下， 只需要写 fonts/MySuperDuperFont.ttf 即可，将自动填充。 bb_showShadow： 控制阴影是否显示或隐藏，类似于蒙板，默认为true。

#### Tabs

复制代码

inActiveColor： 未被选择时，标签的颜色，作用于 icon 和 title。 activeColor： 被选择时，标签的颜色，作用于 icon 和 title，与上面相对应。 barColorWhenSelected： 当该标签被选择时，整个 BottomBar 的背景色。（就是一点，整个底部渐变的那个颜色） badgeBackgroundColor： 设置 Badges 的背景色，就是右上角显示数字那个。 badgeHidesWhenActive： 选择此选项卡时是否应该隐藏徽章，默认为true。

*** 改版之后的优点： 1. API 变得更简单； 2. 所有 属性 和 行为 都在 xml 中被定义。

确实方便了不少，而且更容易被理解了。

原项目在文章刚开始的时候已经放上了。 这里我写了一个最基本的项目，也就是本文中的代码。 地址： github.com/Wing-Li/And…

转载于:https://juejin.im/post/5bff5a8fe51d453f321944a0