顶部栏的收缩效果
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
先设置好基本布局文件:
布局中,可以垂直滚动的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会随着滚动事件一起滚动。效果如下:
flag snap
当给AppBarLayout设置app:layout_scrollFlags="scroll|snap"
时,增加一个滚动效果。当停止滚动,顶部栏的显示部分大于或等于一定的值后会自动复位,全部显示;如果小于该值,则自动移出屏幕。效果如下:
flag enterAlways
当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways"
时,AppBarLayout在下拉时直接显示,并不会考虑RecyclerView滚动的位置。效果如下:
flag enterAlwaysCollapsed
当给AppBarLayout设置app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
,同时顶部栏的Toolbar设置minHeight属性时,下拉后会先显示最小高度,到顶部时显示完全。效果如下:
enterAlwaysCollapsed一般是配合enterAlways一起使用的,同时一定要给Toolbar设置最小高度(minheight),不过Toolbar默认最小高度就是ActionBar的高度...
flag exitUntilCollapsed
当给AppBarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed"
,同时顶部栏的Toolbar设置minHeight属性时。当RecyclerView向上滚动至顶部栏的最小高度后,AppBarLayout不在收缩。下拉时,RecyclerView没有到达最顶部时,只显示顶部栏最小高度。效果如下:
同理上一个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。
实践
布局代码
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);
}
效果
坑
当Toolbar配合CollapsingToolbarLayout一起使用时,不能设置layout_height为wrap_content,否则会出现意想不到的效果...有可能是Toolbar设置的title无法显示,或者AppbarLayout不会跟随RecyclerView一起滚动折叠(只能说很僵,研究了半天)...
参考
玩转AppBarLayout,更酷炫的顶部栏
CoordinatorLayout——小试牛刀