僅2步實現 拜拜 漢堡導航欄效果~ 全新底部導航交互(滑動隱藏)

抄了 @ImmortalZ 哥們的標題..別怪我哈

本文同步自wing的地方酒館
布吉島你們有木有看這一篇文章，再見，漢堡菜單，咱們有了新的 Android 交互設計方案

本庫下載地址：github.com/githubwing/…

裏面介紹的新得交互是這樣的：

總之總結一下就是：

• 滾動時隱藏： 咱們但願在用戶的屏幕上顯示儘量多的內容。所以，咱們決定在向下滾動的時候隱藏導航欄，從而給內容區域提供更多的空間。而向上滾動可使導航欄從新顯現。
• 變換式導航欄： Material Design 底部欄有一個很是平滑的動畫，它參考了變換式導航欄——在不一樣目標間切換的時候，被選中的部分會被放大，同時未被選中的元素會被向後移動，從而在導航欄上瀏覽不一樣的目標就有點像在瀏覽一個旋轉木馬。咱們決定要使用這種效果由於它使得切換導航目標變得更加有趣了。咱們但願這能夠推進咱們的用戶更多地在應用的不一樣功能組間切換。同時，該動畫在咱們的下一個觀點中很是重要。

恩~ 看起來效果還不錯，因此我就封裝了一下系統的BottomNavigationView而且添加了滑動隱藏效果~ 實現如上圖效果，只須要2步！

先來看看使用個人庫的效果：

在gradle添加

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}


dependencies {
   compile 'com.github.githubwing:ByeBurger:v1.0'
  compile 'com.android.support:design:25.0.0'
  }複製代碼

第一步：寫一個xml，以CoordinatorLayout爲跟佈局。把ByeBurgerNavigationView加入到佈局中

<android.support.design.widget.CoordinatorLayout>
  <Viewpager />
  <com.wingsofts.byeburgernavigationview.ByeBurgerNavigationView 
      <--! important --> 
        app:menu="@menu/bottom"
        app:layout_behavior="@string/bye_burger_behavior"  
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
   />
</android.support.design.widget.CoordinatorLayout>複製代碼

注意app:menu是給菜單的佈局關聯的，app:layout_behavior是庫自留behavior的包名。。照寫就對了。。

第二部，建立一個menu xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:icon="@drawable/ic_home_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="home"/>

  <item android:icon="@drawable/ic_search_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="search"/>
  <item android:icon="@drawable/ic_account_circle_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="me" />
  <item android:icon="@drawable/ic_settings_black_24dp" android:enabled="true" app:showAsAction="ifRoom" android:title="setting" />
</menu>複製代碼

以後在代碼裏將viewpager和byeburger關聯便可

mByeBurger.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
          @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            if(item.getTitle().equals("home")){
              mViewPager.setCurrentItem(0);
            }else if(item.getTitle().equals("search")){
              mViewPager.setCurrentItem(1);
            }else if(item.getTitle().equals("me")){
              mViewPager.setCurrentItem(2);
            }else if(item.getTitle().equals("setting")){
              mViewPager.setCurrentItem(3);
            }
            return false;
          }
        });複製代碼

以上就完成了使用~

若是你以爲還不錯 歡迎star

本庫下載地址：github.com/githubwing/…

歡迎加入個人android羣:425983695