Android学习之路-开源项目-BottomBar

BottomBar

项目介绍

GitHub地址:https://github.com/roughike/BottomBar

BottomBar是一个叫Iiro Krankka的哥们写出来的,这个项目是基于Google于2014年推出的设计语言Material Design而设计出来的,其中Material Design被设计出来是因为Google想做的是“从Android到衍生的Android
Wear、Auto和TV,Material Design贯穿其中,成为沟通不同平台、设备的灵魂,让用户在不同平台上也有连贯的体验。

好了题外话就说这么多,来看看BottonBar吧。

BottomBar是一个底部的菜单栏,可以实现许多炫酷动画,例如在滑动过程中隐藏菜单栏(图挂了,想看图的童鞋可点击图片链接查看),点击菜单栏中不同的标签而让菜单栏变色,除此之外菜单栏上标签还支持显示通知数量,等等。不多说,直接上图:

   

这个项目目前已经开发到了v2.0版,而且仍然处于维护状态中,想关注最新进展的童鞋可以直接点击其在GitHub上的地址进行查看。

实现步骤

接下来就看一下怎么实现一个使用BottomBar的Demo程序吧。

作者在GitHub上有一篇wiki介绍怎么使用BottoBar的,直接上原文地址。英文不好的童鞋可以接着往下看:

分三步:

1.建立项目并导入BottomBar的远程库;

2.编写BottomBar的相关布局;

3.完成MainActivity,实现完整的代码逻辑。

开发环境:Windows10

AndroidStudio 2.2.3

ps:由于wiki上的例子比较陈旧了,自此处使用代码均参考http://www.jianshu.com/p/2bafd1bbb21b# ,在此表示感谢

1.建立项目并导入BottomBar的远程库

建立一个Android项目,就叫BottomBarDemo吧。建立完成后,切换到Android项目结构模式。然后选择打开Gradle
Scripts中的app模块的build.gradle文件(有两个build.gradle,第一个是整个项目的gradle构建脚本,第二个才是我们需要的,你的app模块的gradle构建脚本,不要弄错了),在其中的dependencies块中添加代码

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

这样我们就将BottomBar导入我们的项目中了,最后别忘了点击sync now同步一下。然后开始欢快地敲起代码吧~

            

2.编写BottomBar的相关布局

a. 建立xml文件

之后我们需要在res/menu目录下新建bottombar_menu.xml,用来存放BottomBar的多个标签,其用<tabs></tabs>围住,代码如下:

<?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>

其中有5个标签分别是Recents、Favorites、Nearby、Friends和Restaurants。

b.在 activity_main.xml 中设置 BottomBar

在res/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>
在此处直接引入BottomBar的各项参数。


3.完成MainActivity,实现完整的代码逻辑。

在java/packagename.bottombardemo/MainActivity.java里实现功能逻辑,代码如下:


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);
                    // 执行操作,设置通知数量是5
                    nearby.setBadgeCount(5);
                }
            }
        });

        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
            @Override
            public void onTabReSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_favorites) {
                    // 已经选择了这个标签,又点击一次。即重选。
                    // 如果重选了,就移除标签上的通知。
                    nearby.removeBadge();
                }
            }
        });
    }
}

之后工作就基本完成了,接下来在虚拟机上run一下就可以实现第一幅效果图里的效果了。
未完待续……

参考资料

http://www.jianshu.com/p/2bafd1bbb21b#

IT文库 » Android学习之路-开源项目-BottomBar
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址