CoordinatorLayout實現酷炫摺疊效果

Samuelhuahui發表於2017-09-30

動效是我們做移動端都要掌握的，互動設計師給出自己的想法，我們就要用程式碼實現。今天我給大家帶來一個摺疊選單效果，希望的可以收藏，以後用到可以直接使用。

歡迎Star or Follow我的GitHub
歡迎搜尋微信公眾號SamuelAndroid關注我，文章末尾有公眾號二維碼。

執行效果

實現步驟

  1. 瞭解CoordinatorLayout的同學應該都知道，預設是無法實現這種疊加的效果，它預設的效果只是把標識app:layout_scrollFlags="scroll|enterAlways"部分退出展示區域。效果如下：

  2. 為了實現疊加效果，我們這裡採用相對佈局疊加來實現，程式碼如下：

    <RelativeLayout
 >

 <TextView
     android:id="@+id/title"
     android:text="信用卡優惠"/>

 <LinearLayout
     android:layout_below="@id/title">

     <LinearLayout >

         <ImageView />

         <TextView
             android:text="美食"/>
     </LinearLayout>

     <LinearLayout >

         <ImageView />

         <TextView
             android:text="電影"/>
     </LinearLayout>

     <LinearLayout >

         <ImageView />

         <TextView
             android:text="娛樂"/>
     </LinearLayout>

     <LinearLayout >

         <ImageView />

         <TextView
             android:text="商超"/>
     </LinearLayout>

     <LinearLayout>

         <ImageView />

         <TextView
             android:text="網購"/>
     </LinearLayout>
 </LinearLayout>

 <android.support.design.widget.CoordinatorLayout
     android:layout_below="@id/title">

     <android.support.design.widget.AppBarLayout
         android:id="@+id/app_bar"
         android:layout_marginTop="100dp"// 重點
         app:elevation="0dp"> // 重點

         <LinearLayout
             android:id="@+id/lin2"
             app:layout_scrollFlags="scroll|enterAlways">

             <LinearLayout >

                 <ImageView />

                 <TextView
                     android:text="裝潢"/>
             </LinearLayout>

             <LinearLayout >

                 <ImageView />

                 <TextView 
                     android:text="旅行"/>
             </LinearLayout>

             <LinearLayout >

                 <ImageView />

                 <TextView 
                     android:text="娛樂"/>
             </LinearLayout>

             <LinearLayout >

                 <ImageView />

                 <TextView
                     android:text="境外"/>
             </LinearLayout>

             <LinearLayout >

                 <ImageView />

                 <TextView
                     android:text="其他" />
             </LinearLayout>
         </LinearLayout>

     </android.support.design.widget.AppBarLayout>

     <android.support.v4.widget.NestedScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="#AAA"
             android:orientation="vertical">
             .....
         </LinearLayout>
     </android.support.v4.widget.NestedScrollView>

 </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>複製程式碼
  3. 為了AppBarLayout上移能和第一行選單想重疊，我們設定AppBarLayout屬性android:layout_marginTop="100dp"，，所以當我們向上滑動的時候就可以看到與上面重疊了。
  4. AppBarLayout預設會有陰影邊框，可以通過app:elevation="0dp"去除該邊框。
  5. 透明度的實現程式碼如下：
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            int height = appBarLayout.getTotalScrollRange();
            int offSetAbs = Math.abs(verticalOffset);
            float p = (float) offSetAbs / (float) height;
            mLin1.setAlpha(1 - p);
            if ((1 - p) > 0.5 ){//臨界點
                mLin2.setAlpha(1 - p);
                mAppBarLayout.setAlpha(1 - p);
            }else {
                mLin2.setAlpha(p);
                mAppBarLayout.setAlpha(p);
            }
        }
    });複製程式碼

通過監聽滑動佔比，設定第一層選單的透明度，為了能讓使用者看到底層透明度變化，故這裡把上層選單先透明後不透明改變（臨界點未半透明即：0.5）

總結：經過以上分析，是不是發現很簡單？但是在剛剛拿到這個需求的時候，我還是比較懵逼的，第一反應是自己寫一個自定義佈局實現，但是平滑效果一直不能得到很好的解決，最後還是利用擴充套件包已有的功能來實現。

更多內容可以關注我的公眾號或者搜尋SamuelAndroid關注我：

公眾號
公眾號

相關文章