前言
本文同步发布到我的简书专栏Material Design之 AppbarLayout 开发实践总结
前一篇文章是Material Design 系列的第一篇文章，讲了Toolbar 的使用，《Material Design 之 Toolbar 开发实践总结》，还没看过的同学可以去看一下，这篇是Material Design 系列的第二篇文章，这次我们讲AppbarLayout。一说到AppbarLayout,那么我们必然会说到另外两个与AppbarLayout经常一起使用的View，那就是 CoordinatorLayout和CollapsingToolbarLayout。这三个View在一起使用的功能非常强大，可以实现很多炫酷的UI和动画效果。本篇文章将分别介绍三个view的一些功能和属性，最将三个View结合在一起使用实现炫酷的UI效果。
正文
1, CoordinatorLayout
第一次接触CoordinatorLayout 你可能有这些疑问，CoordinatorLayout 到底是个什么玩意儿呢？它到底能帮我们做什么？我们要了解它，肯定是先看官方文档了。文档的第一句话就非常醒目： CoordinatorLayout is a super-powered FrameLayout ,非常明了，CoordinatorLayout 继承于ViewGroup,它就是一个超级强大Framelayout。CoordinatorLayout的作用就是协调子View。它有两种使用场景：
1,作为 一个应用顶层的装饰布局，也就是一个Activity Layout 的最外一层布局。
2，As a container for a specific interaction with one or more child views，作为一个或多个有特定响应动作的容器。
CoordinatorLayout 可以协调子View，而这些子View 的具体响应动作是通过 behavior 来指定的。如果你有特定的需求，你就需要自己定义一个特定的 Behavior,Google 也给我们定义了一些常用的Behavior，如后面要用的到的 appbar_scrolling_view_behavior ，用于协调 AppbarLayout 与 ScrollView 滑动的Behavior，如下：
复制代码通过 layout_behavior 属性来指定 Behavior。本篇文章不会过多的去介绍Behavior,后面会单独拿出来介绍，我们只要知道CoordinatorLayout 的作用就行了，可以通过Behavior 协调子View 。在网上也看到了一篇不错的专门介绍CoordinatorLayout 的文章,CoordinatorLayout的使用如此简单,需要的可以去了解一下。
2,AppbarLayout 的使用
AppbarLayout继承自LinearLayout,它就是一个垂直方向的LinearLayout,在LinearLayout的基础上添加了一些材料设计的概念和特性，即滑动手势。它可以让你定制在某个可滑动的View（如：ScrollView ,ListView ,RecyclerView 等）滑动手势发生改变时，内部的子View 该做什么动作。子View应该提供滑动时他们期望的响应的动作Behavior,通过setScrollFlags(int))，或者xml 中使用属性：
app:layout_scrollFlags复制代码注意：AppbarLayout 严重依赖于CoordinatorLayout，必须用于CoordinatorLayout 的直接子View，如果你将AppbarLayout 放在其他的ViewGroup 里面，那么它的这些功能是无效的。
2.1 AppbarLayout 子View 的几种动作
上面说了 AppbarLayout 可以定制当某个可滑动的View滑动手势改变时内部子View的动作，通过app:layout_scrollFlags来指定，那么现在我们就看一下layout_scrollFlags有哪几种动作。layout_scrollFlags有5种动作，分别是 scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap。我们来分别看一下这五种动作的含义和效果。
1, scroll ,子View 添加layout_scrollFlags属性 的值scroll 时，这个View将会随着可滚动View（如：ScrollView,以下都会用ScrollView 来代替可滚动的View ）一起滚动，就好像子View 是属于ScrollView的一部分一样。
布局代码如下：
复制代码效果如下：
2, enterAlways ,子View 添加layout_scrollFlags属性 的值有enterAlways 时, 当ScrollView 向下滑动时，子View 将直接向下滑动，而不管ScrollView 是否在滑动。注意：要与scroll 搭配使用，否者是不能滑动的。
代码如下："match_parent" android:layout_height="?attr/actionBarSize" app:title="AppbarLayout" app:titleTextColor="@color/white" app:layout_scrollFlags="scroll|enterAlways" />复制代码 效果如下：
3, enterAlwaysCollapsed , enterAlwaysCollapsed 是对enterAlways 的补充，当ScrollView 向下滑动的时候，滑动View（也就是设置了enterAlwaysCollapsed 的View）下滑至折叠的高度，当ScrollView 到达滑动范围的结束值的时候，滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height （最小高度）指定的。
补充说明：要配合scroll｜enterAlways 一起使用
代码如下：
"match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:title="AppbarLayout"
android:gravity="bottom"
android:layout_marginBottom="25dp"
app:titleTextColor="@color/white"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
/>复制代码 效果图如下：
4,exitUntilCollapsed, 当ScrollView 滑出屏幕时（也就时向上滑动时），滑动View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 scrollview 继续滑动。
代码如下：
"match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:title="AppbarLayout"
android:gravity="bottom"
app:titleTextColor="@color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>复制代码 效果图如下：
appbar_layout4.gif5, snap,意思是：在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。比如，如果view的底部只有25%可见，它将滚动离开屏幕，而如果底部有75%可见，它将滚动到完全显示。
解释：可能这段话有点难懂，解释一下，就是说，比如在屏幕的顶部有个View ，高度200dp,我向上滑动40％后停止，也就 40% 滑出了屏幕，剩下的60%留在屏幕，那么这个属性就会自动将屏幕外的40% 滑回屏幕，结果的整个View都留在屏幕上，相反，如果我向上将60%的部分滑出屏幕，然后停止滑动，那么这个属性会将剩下的40% 也自动滑出屏幕，结果是整个View都在屏幕之外。这就是上面所说的滑动到最近的边界。
代码如下：
"match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:title="AppbarLayout"
android:gravity="bottom"
app:titleTextColor="@color/white"
app:layout_scrollFlags="scroll|snap"
/>复制代码 效果图如下：
appbar_layout5.gif2.2 AppbarLayout 的几个重要方法
介绍一下AppbarLayout几个常用且重要的方法
addOnOffsetChangedListener 当AppbarLayout 的偏移发生改变的时候回调，也就是子View滑动。
getTotalScrollRange 返回AppbarLayout 所有子View的滑动范围
removeOnOffsetChangedListener 移除监听器
setExpanded (boolean expanded, boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画
setExpanded (boolean expanded) 设置AppbarLayout 是展开状态还是折叠状态,默认有动画
3,CollapsingToolbarLayout 的使用
CollapsingToolbarLayout 是对Toolbar的包装并且实现了折叠app bar效果，使用时，要作为 AppbarLayout 的直接子View。CollapsingToolbarLayout有以下特性：
（1） Collapsing title(折叠标题) 当布局全部可见的时候，title 是最大的，当布局开始滑出屏幕，title 将变得越来越小，你可以通过setTitle（CharSequence） 来设置要显示的标题。
注意：Toolbar 和CollapsingToolbarLayout 同时设置了title时，不会显示Toolbartitle而是显示CollapsingToolbarLayout 的title，如果要显示Toolbar 的title，你可一在代码中添加如下代码：
collapsingToolbarLayout.setTitle("");复制代码（2）Content scrim(内容纱布) 当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布，可以通过setContentScrim(Drawable)来设置纱布的图片。
提醒：纱布可以是图片也可以是颜色色值，如果要显示颜色，在xml 布局文件中用contentScrim属性添加，代码如下：
app:contentScrim="@color/colorPrimary"复制代码（3）Status bar scrim（状态栏纱布） 当CollapsingToolbarLayout滑动到一个确定的阀值时，状态栏显示或隐藏纱布，你可以通过setStatusBarScrim(Drawable)来设置纱布图片。
提醒：同内容纱布一样，状态栏纱布可以是图片也可以是一个颜色值，如果要显示颜色值，在xml 中用statusBarScrim 属性指定。
（4）Parallax scrolling children（有视差地滚动子View） 让CollapsingToolbarLayout 的子View 可以有视差的滚动，需要在xml中用 添加如下代码：
app:layout_collapseMode="parallax"复制代码（5）Pinned position children（固定子View的位置）子View可以固定在全局空间内，这对于实现了折叠并且允许通过滚动布局来固定Toolbar 这种情况非常有用。在xml 中将collapseMode设为pin，代码如下：
app:layout_collapseMode="pin"复制代码以上就是CollapsingToolbarLayout的一些特性，有了CollapsingToolbarLayout，配合AppbarLayout我们就可以很轻松的做出这种折叠header的效果了，请看效果图：
Coll_toolbar1.gif我们再来看一下设置了Content scrim(内容纱布) 的效果：
Coll_toolbar2.gif4,总结
以上就是对CollapsingToolbarLayout 、AppbarLayout、CoordinatorLayout 3个View的使用介绍，总的来说，CoordinatorLayout 是协调子View的，通过Behavior指定子View动作。AppbarLayout就是一个竖直方向的LinearLayout,只不过它添加了一些材料的概念和特性，可以定制子View的滑动。CollapsingToolbarLayout 是对Toolbar 的包装，它有5个特性，Collapsing title、Content scrim、Status bar scrim、Parallax scrolling children、Pinned position children。这个三个View配合使用，可以做出一些很炫酷的UI效果。需要注意的是： AppbarLayout 要作为CoordinatorLayout 的直接子View使用，而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View 使用，否则，上面将的特性是没有效果的。
5,AppbarLayout 实践之仿简书首页效果
前文讲了CollapsingToolbarLayout 、AppbarLayout、CoordinatorLayout 3个View的使用方法，最后就通过一个实例来结束本文，使用AppbarLayout 实现简书首页效果。简书首页效果如下：
jianshu.gif实现效果如下：
jianshu_2.gif布局文件如下：
复制代码Activity 代码如下：
**
*
* 仿简书 首页效果
* Created by zhouwei on 16/12/8.
*/
public class JanshuActivity extends AppCompatActivity {
private ConvenientBanner mConvenientBanner;
private RecyclerView mRecyclerView;
private AppBarLayout mAppBarLayout;
private View mLine;
private String[] images = {"http://img2.imgtn.bdimg.com/it/u=3093785514,1341050958&fm=21&gp=0.jpg",
"http://img2.3lian.com/2014/f2/37/d/40.jpg",
"http://d.3987.com/sqmy_131219/001.jpg",
"http://img2.3lian.com/2014/f2/37/d/39.jpg",
"http://www.8kmm.com/UploadFiles/2012/8/201208140920132659.jpg",
"http://f.hiphotos.baidu.com/image/h%3D200/sign=1478eb74d5a20cf45990f9df460b4b0c/d058ccbf6c81800a5422e5fdb43533fa838b4779.jpg",
"http://f.hiphotos.baidu.com/image/pic/item/09fa513d269759ee50f1971ab6fb43166c22dfba.jpg"
};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.janshu_activity_layout);
initView();
}
private void initView() {
mAppBarLayout = (AppBarLayout) findViewById(R.id.jianshu_appbar_layout);
mLine = findViewById(R.id.line_divider);
mConvenientBanner = (ConvenientBanner) findViewById(R.id.banner);
mRecyclerView = (RecyclerView) findViewById(R.id.vertical_recyclerView);
LinearLayoutManager manager = new LinearLayoutManager(this);
manager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(manager);
MyAdapter myAdapter = new MyAdapter();
mRecyclerView.setAdapter(myAdapter);
myAdapter.setData(mockData());
myAdapter.notifyDataSetChanged();
mConvenientBanner.setPages(new CBViewHolderCreator() {
@Override
public NetworkImageHolderView createHolder() {
return new NetworkImageHolderView();
}
}, Arrays.asList(images));
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(Math.abs(verticalOffset) >= mAppBarLayout.getTotalScrollRange()){
mLine.setVisibility(View.VISIBLE);
}else{
mLine.setVisibility(View.GONE);
}
}
});
}
@Override
protected void onResume() {
super.onResume();
mConvenientBanner.startTurning(2000);// 2s 换一张
}
@Override
protected void onPause() {
super.onPause();
mConvenientBanner.stopTurning();
}
/**
* 模拟首页数据
* @return
*/
private List mockData() {
List data = new ArrayList<>();
JsEntry jsEntry = new JsEntry();
jsEntry.comment = 50;
jsEntry.award = 3;
jsEntry.like = 460;
jsEntry.seek = 12504;
jsEntry.time = "15小时前";
jsEntry.title = "这些情商的技巧，你是不是都掌握了？";
jsEntry.authorName = "JayChou";
jsEntry.label = "心理";
jsEntry.cover ="http://upload-images.jianshu.io/upload_images/2785318-5306a632b46a8c27.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";
JsEntry jsEntry2 = new JsEntry();
jsEntry2.comment = 150;
jsEntry2.award = 33;
jsEntry2.like = 1460;
jsEntry2.seek = 170444;
jsEntry2.time = "10小时前";
jsEntry2.title = "除了阴谋，《锦绣未央》里还有哪些温情？";
jsEntry2.authorName = "菇凉似梦";
jsEntry2.label = "文化.艺术";
jsEntry2.cover = "http://upload-images.jianshu.io/upload_images/2881988-b217e714eb05f88e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";
for (int i=0;i<100;i++){
if(i % 2 == 0){
data.add(jsEntry);
}else{
data.add(jsEntry2);
}
}
return data;
}
public static class NetworkImageHolderView implements CBPageAdapter.Holder<String>{
private ImageView imageView;
@Override
public View createView(Context context) {
imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return imageView;
}
@Override
public void UpdateUI(Context context, int position, String data) {
ImageLoader.getInstance().displayImage(data,imageView);
}
}
public static class MyAdapter extends RecyclerView.Adapter{
private List mData;
public void setData(List data) {
mData = data;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.jianshu_label_item,null));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
MyViewHolder viewHolder = (MyViewHolder) holder;
JsEntry jsEntry = mData.get(position);
viewHolder.title.setText(jsEntry.title);
viewHolder.name.setText(jsEntry.authorName);
viewHolder.label.setText(jsEntry.label);
viewHolder.time.setText(jsEntry.time);
ImageLoader.getInstance().displayImage(jsEntry.cover,viewHolder.cover);
viewHolder.comment.setText(String.format(viewHolder.comment.getContext().getResources().getString(R.string.js_comment),jsEntry.seek,jsEntry.comment,jsEntry.like,jsEntry.award));
}
@Override
public int getItemCount() {
return mData == null ? 0:mData.size();
}
}
public static class MyViewHolder extends RecyclerView.ViewHolder{
private TextView title;
private TextView time;
private TextView comment;
private TextView label;
private TextView name;
private ImageView cover;
public MyViewHolder(View itemView) {
super(itemView);
title = (TextView) itemView.findViewById(R.id.item_content);
time = (TextView) itemView.findViewById(R.id.publish_time);
comment = (TextView) itemView.findViewById(R.id.js_comment);
label = (TextView) itemView.findViewById(R.id.js_label);
name = (TextView) itemView.findViewById(R.id.author_name);
cover = (ImageView) itemView.findViewById(R.id.cover);
}
}
}复制代码 Demo 源码请看GithubMaterialDesignSamples
好了，以上就是关于AppbarLayout 、CollapsingToolbarLayout、CollapsingToolbarLayout的使用介绍，如有什么问题，欢迎评论区指正，Good night。