CoordinatorLayout实现酷炫折叠效果

动效是我们做移动端都要掌握的，交互设计师给出自己的想法，我们就要用代码实现。今天我给大家带来一个折叠菜单效果，希望的可以收藏，以后用到可以直接使用。

欢迎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关注我：