【Android -- Material Design】AppbarLayout 的基本使用

前言

本篇将介绍 AppbarLayout 的一些功能和属性，结合 CoordinatorLayout 和 CollapsingToolbarLayout 一起使用实现炫酷的 UI 效果。

效果图

AppbarLayout 的使用

AppbarLayout 继承自 LinearLayout ,它就是一个垂直方向的 LinearLayout ,在 LinearLayout 的基础上添加了一些材料设计的概念和特性，即滑动手势。它可以让你定制在某个可滑动的 View（如：ScrollView ,ListView ,RecyclerView 等）滑动手势发生改变时，内部的子 View 该做什么动作。

注意：AppbarLayout 严重依赖于CoordinatorLayout，必须用于CoordinatorLayout 的直接子View，如果你将AppbarLayout 放在其他的ViewGroup 里面，那么它的这些功能是无效的。

1. AppbarLayout 子View 的几种动作 通过 app:layout_scrollFlags 来指定，那么现在我们就看一下layout_scrollFlags有哪几种动作。layout_scrollFlags有5种动作，分别scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap。

2. AppbarLayout 的几个重要方法

• addOnOffsetChangedListener 当 AppbarLayout 的偏移发生改变的时候回调，也就是子 View 滑动。

• getTotalScrollRange 返回 AppbarLayout 所有子 View 的滑动范围

• removeOnOffsetChangedListener 移除监听器

• setExpanded(boolean expanded, boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画

• setExpanded (boolean expanded) 设置AppbarLayout 是展开状态还是折叠状态,默认有动画

实战

1. 效果图 2. 布局文件

3. Activity 代码

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