Android 使用Bottom Navigation

   <p>现在的App设计中，很多都会使用我们的底部导航，也就是我们经常说的底部Tab导航，称为Bottom</p>    <p>Navigation，在iOS中，这是一种自带的默认导航结构，而在Android中，以前是没有这种导航的，而在</p>    <p>今年，Android的开发者网站中，Google官方已经给出了官方的底部导航的设计。然而，我们却没有找到</p>    <p>Google官方的Demo和其他的介绍，在我们的支持库里面也没有相关的组件出来。也就是说，Google只是</p>    <p>给出了一个设计的指导，而没有给出相关的组件。我们今天就来看看这个到底如何做？</p>    <h2>Bottom Navigation是什么样子的</h2>    <p>根据官方的介绍，我们的地步导航应该是这个样子的（其实如果做过iOS的话，你就应该比较了解了），如下图：</p>    <p><img src="https://simg.open-open.com/show/d69f593f442b6b78c1ed4fd68417bf6b.png"></p>    <p><img src="https://simg.open-open.com/show/ea165ff8c050b39d2969a3675391c475.png"></p>    <p><img src="https://simg.open-open.com/show/e869b19951a412abd550be70b182f5d8.png"></p>    <p><img src="https://simg.open-open.com/show/2f92d29b105a204af038bb5e64160f9f.png"></p>    <p>另外，还有一点，我们Android的底部导航，在我们滑动上面的内容的时候，会动态隐藏掉的。在向上滑动的时候，需要隐藏掉tab,在向下滑动的时候，显示底部的tab。而且有了我们的底部导航，就不应该在内容区域在使用</p>    <p>滑动手势来操作。</p>    <p>说了这么多，开始开动了。</p>    <h2>使用BottomBar来进行计算</h2>    <p>通过比较，我们选择第三方库 <a href="/misc/goto?guid=4959722773464527740" rel="nofollow,noindex">bottomTab</a> 来实现的</p>    <p>底部导航，首先，我们需要在我们的项目里面build.gradle里面增加这么一行</p>    <pre>  <code class="language-javascript">compile 'com.roughike:bottom-bar:1.3.3'</code></pre>    <p>我们的build.gradle看起来就是这个样子的</p>    <pre>  <code class="language-groovy">apply plugin: 'com.android.application'    android {      compileSdkVersion 23      buildToolsVersion "23.0.2"        defaultConfig {          applicationId "com.youqiantu.android"          minSdkVersion 16          targetSdkVersion 23          versionCode 1          versionName "1.0"      }      buildTypes {          release {              minifyEnabled false              proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'          }      }  }    dependencies {      compile fileTree(dir: 'libs', include: ['*.jar'])      testCompile 'junit:junit:4.12'      compile 'com.android.support:appcompat-v7:23.4.0'      compile 'com.roughike:bottom-bar:1.3.3'  }</code></pre>    <p>然后，我们就可以做我们的Layout了。</p>    <p>首先我们准备好我们几个tab的图片，放到我们的res/layout 或者是res/mipmap底下，为了方便起见，</p>    <p>我这里使用的是默认的launcher的icon。</p>    <p>然后创建文件res/menu/mbottombar_menu.xml</p>    <pre>  <code class="language-xml"><?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android">        <item          android:id="@+id/tab_summary"          android:icon="@mipmap/ic_launcher"          android:title="@string/tab_summary_title"          />        <item          android:id="@+id/tab_config"          android:icon="@mipmap/ic_launcher"          android:title="@string/tab_config_title"          />        <item          android:id="@+id/tab_discover"          android:icon="@mipmap/ic_launcher"          android:title="@string/tab_discover_title"          />        <item          android:id="@+id/tab_mine"          android:icon="@mipmap/ic_launcher"          android:title="@string/tab_mine_title"          />  </menu></code></pre>    <p>然后在我们的mainActivity里面，我们使用我们的BottmBar就行了。</p>    <pre>  <code class="language-java">package com.youqiantu.android;    import android.os.Bundle;  import android.support.annotation.IdRes;  import android.support.v4.content.ContextCompat;  import android.support.v7.app.AppCompatActivity;  import android.widget.TextView;  import android.widget.Toast;    import com.roughike.bottombar.BottomBar;  import com.roughike.bottombar.OnMenuTabClickListener;    public class MainActivity extends AppCompatActivity {      private BottomBar mBottomBar;      private TextView mMessageView;        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);            mMessageView = (TextView) findViewById(R.id.messageView);            mBottomBar = BottomBar.attach(this, savedInstanceState);          mBottomBar.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {              @Override              public void onMenuTabSelected(@IdRes int menuItemId) {                  mMessageView.setText(getMessage(menuItemId, false));              }                @Override              public void onMenuTabReSelected(@IdRes int menuItemId) {                  Toast.makeText(getApplicationContext(), getMessage(menuItemId, true), Toast.LENGTH_SHORT).show();              }          });            // Setting colors for different tabs when there's more than three of them.          // You can set colors for tabs in three different ways as shown below.          mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));          mBottomBar.mapColorForTab(1, 0xFF5D4037);          mBottomBar.mapColorForTab(2, "#7B1FA2");          mBottomBar.mapColorForTab(3, "#FF5252");  //        mBottomBar.mapColorForTab(4, "#FF9800");      }        private String getMessage(int menuItemId, boolean isReselection) {          String message = "Content for ";            switch (menuItemId) {              case R.id.tab_summary:                  message += "盘点";                  break;              case R.id.tab_config:                  message += "配置";                  break;              case R.id.tab_discover:                  message += "发现";                  break;              case R.id.tab_mine:                  message += "我的";                  break;          }            if (isReselection) {              message += " WAS RESELECTED! YAY!";          }            return message;      }        @Override      protected void onSaveInstanceState(Bundle outState) {          super.onSaveInstanceState(outState);            // Necessary to restore the BottomBar's state, otherwise we would          // lose the current tab on orientation change.          mBottomBar.onSaveInstanceState(outState);      }  }</code></pre>    <p>最终，我们的效果就是如下:</p>    <p><img src="https://simg.open-open.com/show/b9b1546710c282e4bf172072eb338863.png">这些只是最基本的功能，此外，你还可以添加动态的隐藏，客户化动画效果等等。更多功能呢请参照第三方文档。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/0b9e3db06c31</p>    <p> </p>