顶部栏的收缩效果
Material Design发布之后，Google推出了两个控件：AppBarLayout和CollapsingToolBarLayout。它们都是用于修饰App顶部栏效果的控件。
AppBarLayout
简介
AppBarLayout继承LinearLayout，同时它的布局方向是垂直的。它存在的意义就是Content布局文件中某个可垂直滚动的View发生滚动事件时，其内部的子View也跟随发生相应变化。
其原理就是利用了Coordinatorlayout的Behavior来关联垂直滚动View和AppBarLayout，实现两者的交互，共同处理Touch事件。
Scroll Flags
可以通过layout_scrollFlags属性来指定内部子View应该执行哪些动作。属性值有五中:
- scroll
- snap
- enterAlways
- enterAlwaysCollapsed
- exitUntilCollapsed
先设置好基本布局文件:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_coordinatorlayout_appbar_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar_scroll"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="scroll"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
布局中，可以垂直滚动的View是RecyclerView，通过设置app:layout_behavior="@string/appbar_scrolling_view_behavior"关联AppBarLayout。
其实在AppBarLayout.java中两个Behavior，一个是AppBarLayout.Behavior(NestedScrolling机制)，另一个是AppBarLayout.ScrollingViewBehavior(依赖机制)。前者通过注解声明，根据偏移量处理AppBarLayout内部View；后者供开发者自行声明，但是一定要给可以垂直滚动的View设置。
flag scroll
设置scroll之后AppBarLayout的子View会随着滚动事件一起滚动。效果如下：
scroll.gif
flag snap
当给AppBarLayout设置app:layout_scrollFlags="scroll|snap"时，增加一个滚动效果。当停止滚动，顶部栏的显示部分大于或等于一定的值后会自动复位，全部显示；如果小于该值，则自动移出屏幕。效果如下:
snap.gif
flag enterAlways
当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways"时，AppBarLayout在下拉时直接显示，并不会考虑RecyclerView滚动的位置。效果如下:
enterAlways.gif
flag enterAlwaysCollapsed
当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"，同时顶部栏的Toolbar设置minHeight属性时，下拉后会先显示最小高度，到顶部时显示完全。效果如下:
enterAlwaysCollapsed.gif
enterAlwaysCollapsed一般是配合enterAlways一起使用的，同时一定要给Toolbar设置最小高度(minheight)，不过Toolbar默认最小高度就是ActionBar的高度...
flag exitUntilCollapsed
当给AppBarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed"，同时顶部栏的Toolbar设置minHeight属性时。当RecyclerView向上滚动至顶部栏的最小高度后，AppBarLayout不在收缩。下拉时，RecyclerView没有到达最顶部时，只显示顶部栏最小高度。效果如下:
exitUntilCollapsed.gif
同理上一个flag，一定要设置minHeight属性
坑
状态栏着色
当使用上面的布局想改变状态栏的颜色，给CoordinatorLayout设置fitsSystemWindow属性为true无效。一定要给AppBarLayout设置。(没有验证过，参考自CoordinatorLayout最佳实践)
但是本人比较喜欢在代码中设置该属性为true。
protected void setFitsSystemWindow() {
ViewGroup content = (ViewGroup) findViewById(android.R.id.content);
if(content.getChildCount() == 0)
return;
View rootView = content.getChildAt(0);
rootView.setFitsSystemWindows(true);
}
因为fitsSystemWindow必须设置给Content布局的根View才有效，所以就想到了这个办法，不用像网上那样在布局中给多个View设置fitsSystemWindow属性。
Toolbar样式设置
在将Toolbar设置为supportActionBar之前一定要设置好Title等除了NavigationIcon属性，否则在之后设置无效。而NavigationIcon以及NavigationListener可以后面设置。
CollapsingToolbarLayout
从上面的分析可以看到顶部栏不一定是ActionBar的高度，可以很大。但是直接给ToolBar的layout_height设置较大的值整个效果非常的难看。于是就有了CollapsingToolbarLayout，对Toolbar在一次包装。它继承FrameLayout，为AppBarLayout的scrollFlags添加折叠的效果。必须作为AppBarLayout的直接子View。
常用属性
- Title，当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。在代码中可以通过调用setTitle函数来设置title。注意，Toolbar的title必须通过该属性来设置，通过自己的属性来设置无效
- ExpandedTitleColor/CollapsedTitleTextColor，设置还没收缩时状态下字体颜色与收缩后Toolbar上字体的颜色。当设置这两个属性后，在动画过程中Android系统会自动配置好过渡效果。
- expandedTitleTextAppearance/collapsedTitleTextAppearance，设置未折叠状态下字体样式和设置折叠后字体样式。
- expendsTitleMargin，可以给未折叠时字体四周的margin值
- contentScrim，这是ToolBar被折叠到顶部固定后的背景。
- Status bar scrim，根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。
- 折叠模式(layout_collpaseMode)
- pin模式：即固定模式，在折叠的时候最后固定在顶端
- parallax模式：即视差模式，在折叠的时候会有个视差折叠的效果
- layout_collapseParallaxMultiplier，CollapsingToolbarLayout滑动时，子视图的视觉差。这个值的范围为0.0-1.0之间。为0的时候，你可以感觉到视图完全随NestedScrollView滚动；为1的时候，似乎又是完全不滚动。
注意为了让顶部栏跟随RecyclerView有折叠效果，一定要把ScrollFlags设置给CollapsingToolbarLayout。
实践
布局代码
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_coordinatorlayout_collapsing_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/id_collapselayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="@style/MyToolbarTextStyle"
app:contentScrim="?attr/colorPrimaryDark"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/MyToolbarTextStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/id_img_collapse"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6"/>
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar_collapse"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/id_recyclerview_collapse"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Java代码
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collapsing_layout);
initDate();
initView();
}
private void initView() {
mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.id_coordinatorlayout_collapsing_layout);
mToolbar = (Toolbar) findViewById(R.id.id_toolbar_collapse);
mImg = (ImageView) findViewById(R.id.id_img_collapse);
mImg.setImageResource(R.mipmap.jupiter);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
mCollapsingLayout = (CollapsingToolbarLayout) findViewById(R.id.id_collapselayout);
mCollapsingLayout.setTitle("CollapsingToolbarLayout");
mCollapsingLayout.setCollapsedTitleTextColor(Color.WHITE);
mCollapsingLayout.setExpandedTitleColor(Color.YELLOW);
mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview_collapse);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setAdapter(mAdapter);
}
效果
CollapsingToolbarLayout.gif
坑
当Toolbar配合CollapsingToolbarLayout一起使用时，不能设置layout_height为wrap_content，否则会出现意想不到的效果...有可能是Toolbar设置的title无法显示，或者AppbarLayout不会跟随RecyclerView一起滚动折叠（只能说很僵，研究了半天）...
网友评论