android开发：CoordinatorLayout配合AppBarLayout实现炫酷悬停标题栏

首先介绍上述几个控件在使用的时候的注意点：

CoordinatorLayout：

是一个类似FrameLayout的布局，它是根布局

AppBarLayout：

是一个vertical的LinearLayout，他必须严格地是CoordinatorLayout的直接View，不然他一点作用都发挥不出来。

CollapsingToolbarLayout:

它是AppBarLayout下的子控件，CollapsingToolbarLayout可以看成一个可折叠的toolbar，里面包含一个imageView和一个toolbar当它缩到最小的时候就是一个普通的toolbar，它可以实现：随着滑动，图片逐渐缩小最后只剩下toolbar。必须在CollapsingToolbarLayout设置layout_scrollFlags属性才可以跟随其他view缩放，至于它的属性后面介绍。

它内部的子View一般都要加上属性：app:layout_collapseMode=""，常用的是parallax，pin。parallax是视差滚动，用在imageView, pin是固定，用在toolbar。

内容控件：

我们需要和AppBarLayout同一级下添加一个内容控件，并添加

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

他们的层次关系如下图（图是网上扣来的）

 

先看下xml代码：

    
          app:layout_scrollFlags="scroll|exitUntilCollapsed">

        

              app:layout_collapseMode="pin"

                />


        

    



    

Activity代码： 

在activity添加如下代码：

  //获取Toolbar
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
        CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
        //通过CollapsingToolbarLayout修改字体颜色
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);//设置收缩后Toolbar上字体的颜色

运行效果：

 

首先我们再java代码里获取了CollapsingToolbarLayout，并设置了它的标题，设置未收缩的字体颜色和收缩时的颜色，它的标题初始化的时候是在CollapsingToolbarLayout的底部。

我们在CollapsingToolbarLayout中设置

layout_scrollFlags="scroll|exitUntilCollapsed"

scroll:想滚动就必须设置

exitUntilCollapsed：代表CollapsingToolbarLayout随滚动缩放到最小高度然后悬停在顶部，然后我们往下拉的时候图片慢慢的出现

xml中有个Toolbar，上图灰色的条目，我们设置

app:layout_collapseMode="pin" 它代表着不会随内容移动

整个过程就是CollapsingToolbarLayout随着内容滚动逐渐缩小，标题也逐渐缩小并且往上移直到和Toolbar重合然后就悬停。

当我们修改layout_scrollFlags为：

app:layout_scrollFlags="scroll|enterAlways">

再次运行得到的效果：

enterAlways：代表着CollapsingToolbarLayout慢慢收缩直到最小高度（这个过程Toolbar是不动的，因为我们设置了app:layout_collapseMode="pin"）最后和Toolbar重合之后整个界面连带Toolbar往屏幕外移，同时我们再往下滑的时候CollapsingToolbarLayout瞬间出现。

而上面Toolbar设置成灰色是为了解释的更清楚，当我们把Toolbar设置为透明后，运行效果：

那如果我们想做到像一些商城软件那样，在图片之下有个搜索框，一滑上去搜索框跟随滑动到达顶部，效果如下：

做到这种效果可以在AppBarLayout里面，CollapsingToolbarLayout的外面添加我们的view

 

最后讲一下layout_scrollFlags的几个属性值大概意思：

scroll：如果单单设置它，当我下拉的时候默认优先滚动Scrolling View，直到Scrolling View到达顶部再滚动CollapsingToolbarLayout，效果：

scroll|enterAlways：当我下拉的时候默认优先滚动CollapsingToolbarLayout，再滚动Scrolling View，效果：

scroll|enterAlways|enterAlwaysCollapsed：enterAlwaysCollapsed是enterAlways的一个附加值，当我下拉的时候默认优先滚动CollapsingToolbarLayout到它最小高度，再滚动Scrolling View，最后再完全滚动CollapsingToolbarLayout，效果：

scroll|snap：有弹性的收缩，有个临界点，不超过则回弹，超过直接向上弹效果：

 

 

其他属性：

contentScrim：代表CollapsingToolbarLayou缩到最小后的背景颜色

expandedTitleMarginStart：CollapsingToolbarLayou还没开始收缩时距离左边的距离，上面我们设置未0，所以文字在最左边。

写的可能比较乱，我看的时候也是一脸懵逼，必须要自己写代码运行总结才行，以下是别的参考：

csdn:https://blog.csdn.net/baidu_31093133/article/details/52807465

简书：https://www.jianshu.com/p/1f3974408528

github地址：https://github.com/David-lvfujiang/SlideHoldSmoothDemo.git