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

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

本庫下載地址:https://github.com/githubwing/ByeBurgerNavigationView

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

總之總結一下就是:

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

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

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

image

第一步:寫一個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

本庫下載地址:https://github.com/githubwing/ByeBurgerNavigationView

歡迎加入我的android羣:425983695

發佈了113 篇原創文章 · 獲贊 589 · 訪問量 53萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章