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

372 阅读4分钟

如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。 希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。 本文来自: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;
  1. 在 layout/activity_main.xml 中设置 BottomBar;
  2. 在 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();
                }
            }
        });
        
        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;
            }
        });
    }
}

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

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


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

<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_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
<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 的背景色,就是右上角显示数字那个。 badgeHidesWhenActive: 选择此选项卡时是否应该隐藏徽章,默认为true。


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

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

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