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

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

今天，来总结一下一款轻量级的底部菜单控件，叫“BottomBar”。我不花太多的篇幅去介绍它的背景，但凡能找到这篇博客的，我敢肯定你们已经通过某些途径知道了BottomBar这个框架。因此，我不多废话，我只讲一下它的一些用法。在这丢一下GitHub的地址：GitHub - roughike/BottomBar: (Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.。截止到我写这篇博客，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 26defaultConfig {minSdkVersion 24targetSdkVersion 26versionCode 1versionName "1.0"}buildTypes {release {minifyEnabled falseproguardFiles 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下载最新的项目，地址：GitHub - roughike/BottomBar: (Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

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 26defaultConfig {minSdkVersion 24targetSdkVersion 26versionCode 1versionName "1.0"}buildTypes {release {minifyEnabled falseproguardFiles 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.BottomBarandroid: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><tabid="@+id/tab1"barColorWhenSelected="@color/gold"icon="@drawable/ic_recents"title="@string/tab1" /><tabid="@+id/tab2"barColorWhenSelected="@color/lightsalmon"icon="@drawable/ic_favorites"title="@string/tab2" /><tabid="@+id/tab3"barColorWhenSelected="@color/hotpink"icon="@drawable/ic_nearby"title="@string/tab3" /><tabid="@+id/tab4"barColorWhenSelected="@color/lightblue"icon="@drawable/ic_friends"title="@string/tab4" /><tabid="@+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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bottomBar = findViewById(R.id.bottombar);bottomBar.setOnTabSelectListener(new OnTabSelectListener() {@Overridepublic 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项目里的图片。