CoordinatorLayout学习笔记

2020-01-14  本文已影响0人  Small_Cake

AppBarLayout需要CoordinatorLayout的配合,所以要让AppBarLayout中视图联动效果生效,只有采用CoordinatorLayout包裹AppBarLayout的布局方案:

1. app:layout_behavior介绍

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
滚动控件(如:NestedScrollView,RecyclerView)在AppBarLayout下面,且关联AppBarLayout的联动

2. app:layout_scrollFlags的属性介绍

app:layout_scrollFlags="scroll"

向上滚动时:View随着滚动逐渐隐藏
向下滚动时:滚动区域内容到达顶部后View逐渐显示(需要到达顶部才滚动显示)

app:layout_scrollFlags="scroll|enterAlways"

向上滚动时:View随着滚动逐渐隐藏
向下滚动时:View随着滚动逐渐显示(只要向下滚动就开始滚动显示)

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:minHeight="20dp"

向上滚动时:View随着滚动逐渐隐藏
向下滚动时:View随着滚动逐渐显示(只要向下滚动就开始滚动显示所定义的minHeight,需要到达顶部才逐步显示View的全部高度)

app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:minHeight="20dp"

向上滚动时:View随着滚动逐渐隐藏(但却始终显示设置的minHeight的高度)
向下滚动时:View随着滚动逐渐显示(只要向下滚动就开始滚动显示)

有必要说明一下,可能看图很多同学很容易觉得不都是一样的效果吗?
其实关键点在于要理解enterAlwaysCollapsed和exitUntilCollapsed的含义:
enterAlwaysCollapsed【向上滑动】,随着滚动逐渐隐藏
exitUntilCollapsed【向上滑动】,View隐藏部分内容,但始终保持minHeight的高度视图显示
enterAlwaysCollapsed【向下滑动】,始终保持minHeight高度视图的显示,底部滚动区域到顶部后View显示完整
exitUntilCollapsed【向下滑动】,始终保持minHeight高度视图的显示,底部滚动区域到顶部后View显示完整
由于它们的【向下滑动】效果一样,所以很容易混淆

app:layout_scrollFlags="scroll|snap"

向上滚动时:View随着滚动逐渐隐藏(如果View已经隐藏了大于50%内容后松手,则View自动隐藏余下部分,如果小于50%则自动完整显示View)
向下滚动时:View随着滚动逐渐显示(效果同上)
snap和enterAlwaysCollapsed或exitUntilCollapsed也是同样先遵循enterAlwaysCollapsed或exitUntilCollapsed的规则后执行snap的规则效果,由于篇幅有限,这里就不再啰嗦了。

下面看看四种效果:

app:layout_scrollFlags="scroll"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:minHeight="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed" android:minHeight="20dp"

3.CollapsingToolbarLayout介绍

CollapsingToolbarLayout是基于AppBarLayout基础上的,用来显示顶部图片渐现渐隐的交互效果,只有AppBarLayout布局中的第一个元素,设置app:layout_scrollFlags才有效
CollapsingToolbarLayout的子View对应属性:

app:layout_collapseMode="parallax"

layout_collapseMode为parallax,代表ImageView滑动会有一个视差滚动的效果,而视差滚动的比值(layout_collapseParallaxMultiplier)是0.9

4.需要滑动后自动完成收起或展开,加入snap即可

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

参考:

1.ConstraintLayout的布局设置

ConstraintLayout 用法全解析

2.ConstraintLayout的联动动画

关于CoordinatorLayout与Behavior的一点分析:

一个神奇的控件——Android CoordinatorLayout与Behavior使用指南:

CollapsingToolbarLayout 和AppBarLayout(头像左移贴边):

Android CoordinatorLayout之自定义Behavior

Material Design之CoordinatorLayout里behavior的详解

3.ConstraintLayout的特性

ConstraintLayout 2.0 新特性详解及实战

4.ConstraintLayout的部分异常情况处理

ConstraintLayout布局中,设置 setLayoutParams时,约束失效

实例:

  1. 顶部Banner,RecyclerView在其底部
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginTop="@dimen/home_tab_height"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.appbar.AppBarLayout
        android:background="@color/white"
        android:paddingTop="@dimen/home_tab_height"
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

参考:
Material Design系列(一)- CollapsingToolbarLayout 和AppBarLayout
CoordinatorLayout 学习笔记
CoordinatorLayout 学习(一) - CoordinatorLayout的基本使用
关于CoordinatorLayout.behavior 学习总结
# 使用 CoordinatorLayout 实现复杂联动效果

参考Demo:
自定义CoordinatorLayout.Behavior颜色渐变的TitleBar

上一篇下一篇

猜你喜欢

热点阅读