Android最火的框架系列（二）BottomBar

Android最火的框架系列（二）BottomBar

今天，来总结一下一款轻量级的底部菜单控件，叫“BottomBar”。我不花太多的篇幅去介绍它的背景，但凡能找到这篇博客的，我敢肯定你们已经通过某些途径知道了BottomBar这个框架。因此，我不多废话，我只讲一下它的一些用法。在这丢一下GitHub的地址：https://github.com/roughike/BottomBar。截止到我写这篇博客，BottomBar的star数是8094，很不错的一款框架。

第一  导入BottomBar框架到项目

导入BottomBar框架到项目，介绍两种方法。一种是联网环境下在线导入，一种是下载后离线配置。其实，大多数公司是给开放外网的，但也有一些公司因为保密不给开放外网（我就是这样的），因此，掌握离线配置还是很不错的。

第一种  gradle文件在线导入

这种方式很简单，只需要在app目录下的build.gradle文件中添加：

implementation 'com.roughike:bottom-bar:2.3.1'

完整的build.gradle文件如下（在这里我习惯性地删除了test相关的dependencies），：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        minSdkVersion 24
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.roughike:bottom-bar:2.3.1'
}

通过这种方式导入后的源代码在External Libraries目录下可以看到：

第二种  下载后以Module的形式导入

1、GitHub下载最新的项目，地址：https://github.com/roughike/BottomBar

2、File——>New——>Import Module：

3、选择目录下项目里的Module，我是放在F/AndroidModule目录下，选中bottom-bar，点击OK，finish：

4、修改bottom-bar这个Module的build.gradle文件，除了最上面的那一行以外（标志着这是个library），其他的可以直接把app的build.gradle文件复制过来，由于BottomBar使用到support：design，因此，我们在最后面添加一行。文件如下：

apply plugin: 'com.android.library'

android {
    compileSdkVersion 26
    defaultConfig {
        minSdkVersion 24
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:design:26.1.0'
}

5、Sync Now以后，查看settings.gradle文件，如果最后面没有':bottom-bar'，自己在后面添加，添加完后，Sync Now一下，搞定：

include ':app', ':bottom-bar'

第二  BottomBar框架的简单使用

1、布局xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="blog.zhao.tudu.tudu.MainActivity">

    <com.roughike.bottombar.BottomBar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:id="@+id/bottombar"
        android:layout_alignParentBottom="true"
        app:bb_behavior="shifting"
        app:bb_tabXmlResource="@xml/bottom_bar">

    </com.roughike.bottombar.BottomBar>

</RelativeLayout>

（1）app:bb_behavior:设置点击时的几种形式：

（2）app:bb_tabXmlResource:设置bottombar的xml资源

2、新建xml文件夹，在里面新建bottom_bar文件：

<?xml version="1.0" encoding="utf-8"?>
<tabs>
    <tab
        id="@+id/tab1"
        barColorWhenSelected="@color/gold"
        icon="@drawable/ic_recents"
        title="@string/tab1" />
    <tab
        id="@+id/tab2"
        barColorWhenSelected="@color/lightsalmon"
        icon="@drawable/ic_favorites"
        title="@string/tab2" />
    <tab
        id="@+id/tab3"
        barColorWhenSelected="@color/hotpink"
        icon="@drawable/ic_nearby"
        title="@string/tab3" />
    <tab
        id="@+id/tab4"
        barColorWhenSelected="@color/lightblue"
        icon="@drawable/ic_friends"
        title="@string/tab4" />
    <tab
        id="@+id/tab5"
        barColorWhenSelected="@color/springgreen"
        icon="@drawable/ic_restaurants"
        title="@string/tab5" />
</tabs>

（1）barColorWhenSelected：设置点击时bottombar的背景颜色

3、MainActivity:

package blog.zhao.tudu.tudu;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.OnTabSelectListener;

public class MainActivity extends AppCompatActivity {
    private BottomBar bottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomBar = findViewById(R.id.bottombar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(int tabId) {
                switch (tabId) {
                    case R.id.tab1:
                        break;
                    case R.id.tab2:
                        break;
                    case R.id.tab3:
                        break;
                    case R.id.tab4:
                        break;
                    case R.id.tab5:
                        break;

                }
            }
        });
    }
}

4.string文件：

<resources>
    <string name="app_name">Tudu</string>

    <string name="tab1">tab1</string>
    <string name="tab2">tab2</string>
    <string name="tab3">tab3</string>
    <string name="tab4">tab4</string>
    <string name="tab5">tab5</string>
</resources>

以上就是对BottomBar基本使用的一些总结。通过上面的简单使用，我们就能实现很漂亮的底部菜单控件。注：图片资源直接使用的Github项目里的图片。