高仿支付宝首页的头部伸缩动画(使用design实现效果,CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar)
1、CoordinatorLayout嵌套AppBarLayout,这是为了让头部导航栏能够跟随内容视图下拉而展开,跟随内容视图上拉而收缩。这个内容视图可以是RecyclerView,也可以是NestedScrollView;
2、AppBarLayout嵌套CollapsingToolbarLayout,这是为了定义导航栏下面需要展开和收缩的部分视图;
3、CollapsingToolbarLayout嵌套Toolbar,这是为了定义导航栏上方显示的搜索区域或小图标区域,其中Toolbar还要定义两个不同的样式布局,用于分别显示搜索区域或小图标区域。
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="leifu.alipayhome.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/abl_bar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> <include layout="@layout/include_title_big" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="50dp" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7"/> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="50dp" app:contentInsetLeft="0dp" app:contentInsetStart="0dp" app:layout_collapseMode="pin"> <include android:id="@+id/include_toolbar_search" layout="@layout/include_toolbar_search"/> <include android:id="@+id/include_toolbar_small" layout="@layout/include_toolbar_small"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="220dp" android:scaleType="centerCrop" android:src="@drawable/menu"/> <ImageView android:layout_width="match_parent" android:layout_height="580dp" android:scaleType="centerInside" android:src="@drawable/bg"/> <TextView android:layout_width="match_parent" android:layout_height="350dp" android:gravity="center_horizontal" android:padding="20dp" android:text="上下可以滑动"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
1.使用之前要在 /app/build.gradle中添加
dependencies { compile 'com.android.support:design:26.0.0-alpha1' compile 'com.gyf.barlibrary:barlibrary:2.3.0' }
design为材料设计仓库,barlibrary为第三方沉浸式状态栏的实现
2.CollapsingToolbarLayout中需要添加
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
3.include_title_big(扫一扫 付一付 聊一聊 咻一咻 的大图标)的布局需要
android:layout_marginTop="50dp" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7"
layout_marginTop预留出toolbar的高度,否则布局重叠
4.Toolbar
android:layout_height="50dp" app:contentInsetLeft="0dp" app:contentInsetStart="0dp" app:layout_collapseMode="pin"
高度为50dp,app:layout_collapseMode="pin"为固定模式
Toolbar里面放两个布局(一个搜索的布局,一个扫一扫 付一付 聊一聊 咻一咻 的小图标布局),通过监听AppBarLayout的移动控制显示还是隐藏
5.最下面防止滚动的控件,可以是RecyclerView,也可以是NestedScrollView,一定要在布局中设置
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这个渐变动画其实可分为两段:
1、导航栏从展开状态向上收缩时,头部的各控件要慢慢向背景色过渡,也就是淡入效果;
2、导航栏向上收缩到一半,顶部的工具栏要换成收缩状态下的工具栏布局,并且随着导航栏继续向上收缩,新工具栏上的各控件也要慢慢变得清晰起来,也就是淡出效果。
我们可以采取类似遮罩的做法,即一开始先给导航栏罩上一层透明的视图,此时导航栏的画面就完全显示;然后随着导航栏的移动距离,计算当前位置下的遮罩透明度,比如该遮罩变得越来越不透明,看起来导航栏就像蒙上了一层面纱,蒙到最后就看不见了。反过来,也可以一开始给导航栏罩上一层不透明的视图,此时导航栏的控件是看不见的,然后随着距离的变化,遮罩变得越来越不透明,导航栏也会跟着变得越来越清晰了。
只需给AppBarLayout对象调用addOnOffsetChangedListener方法,即可实现给导航栏注册偏移监听器的功能。
//AppBarLayout的监听方法 @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { Log.d("aaa", "verticalOffset=" + verticalOffset); //720*1080手机 verticalOffset取值范围[0-200]px int absVerticalOffset = Math.abs(verticalOffset);//AppBarLayout竖直方向偏移距离px int totalScrollRange = appBarLayout.getTotalScrollRange();//AppBarLayout总的距离px //背景颜色转化成RGB的渐变色 int argb = Color.argb(absVerticalOffset, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); int argbDouble = Color.argb(absVerticalOffset * 2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); //appBarLayout上滑一半距离后小图标应该由渐变到全透明 int title_small_offset = (200 - absVerticalOffset) < 0 ? 0 : 200 - absVerticalOffset; int title_small_argb = Color.argb(title_small_offset * 2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor)); //appBarLayout上滑不到一半距离 if (absVerticalOffset <= totalScrollRange / 2) { include_toolbar_search.setVisibility(View.VISIBLE); include_toolbar_small.setVisibility(View.GONE); //为了和下面的大图标渐变区分,乘以2倍渐变 v_toolbar_search_mask.setBackgroundColor(argbDouble); } else { include_toolbar_search.setVisibility(View.GONE); include_toolbar_small.setVisibility(View.VISIBLE); //appBarLayout上滑一半距离后小图标应该由渐变到全透明 v_toolbar_small_mask.setBackgroundColor(title_small_argb); } //上滑时遮罩由全透明到半透明 v_title_big_mask.setBackgroundColor(argb); }
扫描二维码 或者 点击二维码 下载