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

androidwing發表於2019-03-04

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

本文同步自wing的地方酒館
布吉島大家有木有看這一篇文章，再見，漢堡選單，我們有了新的 Android 互動設計方案

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

裡面介紹的新得互動是這樣的：

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

總之總結一下就是：

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

恩~ 看起來效果還不錯，所以我就封裝了一下系統的BottomNavigationView並且新增了滑動隱藏效果~ 實現如上圖效果，只需要2步！

先來看看使用我的庫的效果：

僅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

相關文章