Material Design之 AppbarLayout 开发实践总结

前言

本文同步发布到我的掘金专栏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，如下：

<android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior"        >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="18dp"            android:text="@string/large_text"/>    </android.support.v4.widget.NestedScrollView>

通过 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的一部分一样。

布局代码如下：

 <android.support.v7.widget.Toolbar                   android:layout_width="match_parent"                   android:layout_height="?attr/actionBarSize"                   app:title="AppbarLayout"                   app:titleTextColor="@color/white"                   app:layout_scrollFlags="scroll"                   >               </android.support.v7.widget.Toolbar>

效果如下：

appbar_layout1.gif

2, enterAlways ,子View 添加layout_scrollFlags属性 的值有enterAlways 时, 当ScrollView 向下滑动时，子View 将直接向下滑动，而不管ScrollView 是否在滑动。注意：要与scroll 搭配使用，否者是不能滑动的。
代码如下：

 <android.support.v7.widget.Toolbar                   android:layout_width="match_parent"                   android:layout_height="?attr/actionBarSize"                   app:title="AppbarLayout"                   app:titleTextColor="@color/white"                   app:layout_scrollFlags="scroll|enterAlways"                   />

效果如下：

appbar_layout2.gif

3, enterAlwaysCollapsed , enterAlwaysCollapsed 是对enterAlways 的补充，当ScrollView 向下滑动的时候，滑动View（也就是设置了enterAlwaysCollapsed 的View）下滑至折叠的高度，当ScrollView 到达滑动范围的结束值的时候，滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height （最小高度）指定的。

补充说明：要配合scroll｜enterAlways 一起使用

代码如下：

 <android.support.v7.widget.Toolbar                   android:layout_width="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"                   />

效果图如下：

appbar_layout3.gif

4,exitUntilCollapsed, 当ScrollView 滑出屏幕时（也就时向上滑动时），滑动View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 scrollview 继续滑动。

代码如下：

 <android.support.v7.widget.Toolbar                   android:layout_width="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.gif

5, snap,意思是：在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。比如，如果view的底部只有25%可见，它将滚动离开屏幕，而如果底部有75%可见，它将滚动到完全显示。

解释：可能这段话有点难懂，解释一下，就是说，比如在屏幕的顶部有个View ，高度200dp,我向上滑动40％后停止，也就 40% 滑出了屏幕，剩下的60%留在屏幕，那么这个属性就会自动将屏幕外的40% 滑回屏幕，结果的整个View都留在屏幕上，相反，如果我向上将60%的部分滑出屏幕，然后停止滑动，那么这个属性会将剩下的40% 也自动滑出屏幕，结果是整个View都在屏幕之外。这就是上面所说的滑动到最近的边界。

代码如下：

 <android.support.v7.widget.Toolbar                   android:layout_width="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.gif

2.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.gif

4,总结

以上就是对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

布局文件如下：

<?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"    android:orientation="vertical"    android:background="@color/white"    android:layout_width="match_parent"    android:layout_height="match_parent">  <android.support.design.widget.AppBarLayout      android:id="@+id/jianshu_appbar_layout"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:background="@color/white"      app:elevation="0dp"      >    <com.bigkoo.convenientbanner.ConvenientBanner        android:id="@+id/banner"        android:layout_width="match_parent"        android:layout_height="200dp"        app:canLoop="true"        app:layout_scrollFlags="scroll"        />     <HorizontalScrollView         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:layout_scrollFlags="scroll"         android:scrollbars="none"         android:layout_marginLeft="15dp"         android:layout_marginTop="10dp"         >       <LinearLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:orientation="horizontal"           >         <TextView             android:id="@+id/item_label1"             android:layout_width="130dp"             android:layout_height="50dp"             android:textColor="@color/white"             android:textSize="15sp"             android:text="小说精选"             android:gravity="center"             android:background="@drawable/label_shape"             />         <TextView             android:id="@+id/item_label2"             android:layout_width="130dp"             android:layout_height="50dp"             android:textColor="@color/white"             android:textSize="15sp"             android:layout_marginLeft="5dp"             android:text="摄影游记"             android:gravity="center"             android:background="@drawable/label_shape2"             />         <TextView             android:id="@+id/item_label3"             android:layout_width="130dp"             android:layout_height="50dp"             android:textColor="@color/white"             android:textSize="15sp"             android:text="漫画手绘"             android:layout_marginLeft="5dp"             android:gravity="center"             android:background="@drawable/label_shape3"             />         <TextView             android:id="@+id/item_label4"             android:layout_width="130dp"             android:layout_height="50dp"             android:textColor="@color/white"             android:textSize="15sp"             android:text="签约作者"             android:layout_marginLeft="5dp"             android:gravity="center"             android:background="@drawable/label_shape4"             />       </LinearLayout>     </HorizontalScrollView>    <EditText        android:layout_width="match_parent"        android:layout_height="45dp"        android:layout_marginLeft="15dp"        android:layout_marginTop="10dp"        android:layout_marginRight="15dp"        android:hint="搜索简书的内容和朋友"        android:gravity="center"        android:background="@drawable/edti_text_shape"        android:layout_marginBottom="5dp"        />    <View        android:id="@+id/line_divider"        android:layout_width="match_parent"        android:layout_height="1px"        android:background="@android:color/darker_gray"        android:layout_marginBottom="10dp"        android:visibility="gone"        />  </android.support.design.widget.AppBarLayout>  <android.support.v7.widget.RecyclerView      android:id="@+id/vertical_recyclerView"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:background="@color/white"      app:layout_behavior="@string/appbar_scrolling_view_behavior"      /></android.support.design.widget.CoordinatorLayout>

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<NetworkImageHolderView>() {            @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<JsEntry> mockData(){        List<JsEntry> 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<JsEntry> mData;        public void setData(List<JsEntry> 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。

作者：依然范特稀西
链接：http://www.jianshu.com/p/ac56f11e7ce1
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。