CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout+NestedScrollView实现上下滑动悬停效果

这张图解析上面几个控件的关系： 

转载：https://www.jianshu.com/p/1f3974408528   CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout、Toolbar使用

转载：https://blog.csdn.net/feather_wch/article/details/80021699   

载：https://www.jianshu.com/p/f09723b7e887/  使用CoordinatorLayout打造各种炫酷的效果

精华文章：https://blog.csdn.net/a_yue10/article/details/78653805 一句代码解决CoordinatorLayout+AppBarLayout+NestedScrollView滑动不流畅的问题

Android Toolbar使用系统原生返回键，并改变其颜色，自定义图片替换系统原生返回键

 

先认识以下控件及属性

1、导入包：//根据自己的模拟器版本

    implementation 'com.android.support:design:26.1.0'

2、CoordinatorLayout的作用

1. 加强版FrameLayout，适合作为应用顶层的布局（必须是根部局），提供交互行为
2. 通过给子View设定Behavior可以实现他们的交互性为。Behavior能实现一系列的交互行为和布局变化，包括侧滑菜单、可滑动删除的UI元素、View之间跟随移动。
3. 常用支持滑动效果的子View有：比如RecyclerView，NestedScrollView、TabLayout等    ScrollView是无效的！！

 3、CoordinatorLayout的Behavoir 观察者

布局: 需要给观察者设置Behavoir（一般搭配使用的）RecyclerView，NestedScrollView、TabLayout都可以是它的观察者

AppBarLayout

8、AppBarLayout是什么 。 

• 是一个vertical的LinearLayout，其子View应通过setScrollFlags(int)或者xmL中的app:layout_scrollFlags来提供他们的Behavior。
• 具体的app:layout_scrollFlags有这么几个： scroll, exitUntilCollapsed, enterAlways, enterAlwaysCollapsed, snap
• 他必须严格地是CoordinatorLayout的子View，不然他一点作用都发挥不出来。
• AppBarLayout下方的滑动控件，比如RecyclerView，NestedScrollView（与AppBarLayout同属于CoordinatorLayout的子View,并列的关系，）,必须严格地通过在xml中指出其滑动Behavior来与AppBarLayout进行绑定。
• 通常这样：app:layout_behavior="@string/appbar_scrolling_view_behavior"

Toolbar:

• 他的title如果需要带有CollapsingToolbarLayout的动画的话，就要用collapsingToolbarLayout.setTitle(); 否则是没有动画的，其他的和toolbar平时一样。

9、app:layout_scrollFlags的具体参数

参数	作用
scroll	-值设为scroll的View会跟随滚动事件(可以滚动的View)一起发生移动
EnterAlways	-实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。
ExitUntilCollapsed	- 向上滚动时收缩View，但可以固定Toolbar一直在上面。
EnterAlwaysCollapsed	当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
snap	“观察者-标题栏”要么完全出现，要么完全为0 （同时出现，同时回收）

其中还设置了一些属性，简要说明一下：
contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。（不设置就不会有淡出淡入的效果）

expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

10、AppBarLayout的联动使用实例 

1. CoordinatorLayout包裹着一个AppBarLayout和一个Scrolling View(RV等等)
2. AppBarLayout内部控件需要指明scrollFlags
3. Scrolling View需要指定layout_behavior

 11、AppBarLayout展开和折叠的状态判断

//监听是展开还是折叠
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if(verticalOffset == 0){
            //完全展开状态
        }else if(Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
            //折叠状态
        }else{
            //中间状态
        }
    }
});

CollapsingToolBarLayout

• 是一个专门用来包裹Toolbar的控件，里面可以放置一个imageView和一个toolbar然后轻松地实现：随着滑动，图片和toolbar的标题也有动画。
• 内部的子View一般都要加上属性：app:layout_collapseMode=""，常用的是parallax，pin。parallax是视差滚动，用在imageView, pin是固定，用在toolbar。
• 用setContentScrimColor(int)或者setContentScrim(drawable)来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用一个另外的图片或者颜色来设置toolbar的背景。

1. 用于实现具有折叠效果的顶部栏
2. CollapsingToolBarLayout必须是AppBarLayout的直接子View

13、CollapsingToolBarLayout包含的特性

特性
Collapsing title(可折叠标题)	布局完全可见时，标题比较大；布局折叠起来时，标题会变小。外观可以通过expandedTextAppearance和collapsedTextAppearance属性调整。
contentScrim(内容抹布)	如果滚动到临界点，内容麻布会显示或者隐藏。setContentScrim(Drawable)设置抹布内容。
Status bar Scrim(状态栏纱布)	设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
app:layout_collapseMode（视差滚动）	parallax，pin。parallax

14、CollapsingToolbarLayout的重要属性

/**======================
 * 自身属性
 *======================*/
# 纱布
app:contentScrim="?attr/colorPrimary" //完全折叠后的背景色
app:scrimAnimationDuration="1000"     //纱布动画持续时间
app:scrimVisibleHeightTrigger="20dp"  //纱布可见的最小距离(低于就会开始隐身)

# 状态栏纱布(下面会特别介绍)
app:statusBarScrim="@color/colorAccent"

# 标题
app:title="Hello"             //标题优先于"ToolBar标题Title"
app:titleEnabled="true"       //是否使用大标题，true-使用；false-不使用

app:expandedTitleMargin="1dp" //"自身Title"或者"ToolBar标题Title"的Margin值
app:expandedTitleMarginStart="1dp"
app:expandedTitleMarginEnd="1dp"
app:expandedTitleMarginTop="1dp"
app:expandedTitleMarginBottom="1dp"
app:expandedTitleTextAppearance="?attr/cardBackgroundColor"

app:expandedTitleGravity="bottom|center_horizontal" //"ToolBar标题Title"的重力

# 折叠后Title的重力和样式
app:collapsedTitleGravity="center_horizontal"
app:collapsedTitleTextAppearance="?attr/colorAccent"

# 需要参考AppBarLayout的`app:layout_scrollFlags`
app:layout_scrollFlags=“xxxx”

# 指明toolbar的ID
app:toolbarId="@id/stars_toolbar"

 一般是Toolbar放在顶部固定不动

/**======================
 * 内部控件的属性
 *======================*/
# 视差(以ParallaxMultiplier的速度折叠，0:最慢~1:最快)
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"

# 折叠后会固定在顶部
app:layout_collapseMode="pin"

15、状态栏纱布(statusBarScrim)如何生效?

给CollapsingToolBarLayout设置app:statusBarScrim="@color/colorAccent"

给父容器AppBarLayout设置属性android:fitsSystemWindows="true"，防止状态栏透明后出现标题栏移位到状态栏的错误。

通过下面三种方法之一将状态栏设置为全透明

1.在style.xml中增加下面的代码把状态栏设置成全透明

 @android:color/transparent

2.在style.xml中增加下面的代码把状态栏设置成半透明

 true

3.在java代码中onCreate()方法里把状态栏设置成半透明

 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

补充：如果你已经在style里面把状态栏设置成了透明，那么CollapsingToolbarLayout也想要透明效果的话就无需设置了。

16、FloatingActionButton的属性以及CoordinatorLayout中的锚点属性

# 参考的锚点 app:layout_anchor=”@id/appbar”

# 与锚点的位置关系 app:layout_anchorGravity=”end|bottom|right”

17、代码设置CollapsingToolbarLayout的标题颜色

//1. 展开时标题颜色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.BLACK);
//2. 折叠时标题颜色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);

 

参考资料

1. CollapsingToolBarLayout用法
2. 利用 CollapsingToolbarLayout 完成联动的动画效果
3. CollapsingToolbarLayout 收缩时状态栏颜色设置不生效

代码:

xml文件：

 

MainActivity:

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    CollapsingToolbarLayout collapsingToolbarLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.coordinatory_layout);
        //toolbar
        toolbar = findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
        //Palette用来更漂亮地展示配色
        Palette.from(BitmapFactory.decodeResource(getResources(),R.drawable.beauty))
                .generate(new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(@NonNull Palette palette) {
                        int color=palette.getVibrantColor(getResources().getColor(R.color.colorAccent));
                        collapsingToolbarLayout.setContentScrimColor(color);
                        //因为我暂时没有找到比较好的透明状态栏来适配这一套效果布局。
                        //因此就直接替换掉StatusBar的颜色，这样其实也蛮好看的。
                        getWindow().setStatusBarColor(color);
                    }
                });
        //CollapsingToolbarLayout
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);
        collapsingToolbarLayout.setTitle("我是一个标题啊哈哈哈");
    }
}

下面是我自己的效果：

大家一起学习。。。。