AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout、NestedScrollView

最新推荐文章于 2024-04-27 19:56:32 发布

楠之枫雪

最新推荐文章于 2024-04-27 19:56:32 发布

阅读量424

点赞数

分类专栏： android开发

本文链接：https://blog.youkuaiyun.com/u014614038/article/details/77524697

版权

android开发专栏收录该内容

73 篇文章

订阅专栏

AppBarLayout：

AppBarLayout是一个LinearLayout，它的子View默认纵向排列，可以通过一些参数控制子View的滑动行为。

滑动行为有以下几种：

scroll: Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。

enterAlways: 快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。

enterAlwaysCollapsed:这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。

snap: 简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。

使用代码示例：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/coordinator_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/testpic2"        app:layout_scrollFlags="scroll|exitUntilCollapsed"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#234467"
            app:layout_scrollFlags="scroll">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="菜单"
                android:textColor="#ffffff"/>
        </LinearLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/coordinator_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">//注意要加上这个
    </android.support.v7.widget.RecyclerView>


</android.support.design.widget.CoordinatorLayout>

代码效果： 向上滑动RecyclerView时，上面部分一起向上滑动，image会随着滑出屏幕，image滑出屏幕后只能滑动RecyclerView，向下滑动RecyclerView，image随着滑动出现。

注意： AppBarLayout好像需要结合CoordinatorLayout一起使用才行？

CoordinatorLayout

基本应用场景：1.作为最上层的View 。2.作为一个容器与一个或者多个子View进行交互。

你可以指定childview的行为，当发生某种情况时，childview做出某种行为反应。

如果是自定义行为，需要继承 Behavior 类自定义行为：

public class ButtonBehavior extends CoordinatorLayout.Behavior<Childviewtype>

重写 layoutDependsOn()判断什么时候调用onDependentViewChanged：

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, Childviewtype child, View dependency) {

  return dependency instanceof Button;//如果childview是Button才做出反应，就是当childview是Button时调用onDependentViewChanged
}

重写onDependentViewChanged对childview进行行为操作：

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
  float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
  child.setTranslationY(translationY);//对childview进行平移行为
  return true;
}

然后指定Button的行为：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="com.hw.ButtonBehavior "
        />

</android.support.design.widget.CoordinatorLayout>

效果：每次点击button，button都会进行平移。

注意：一些控件比如AppBarLayout本身已经有默认的行为了，系统本身也有一些默认的行为，比如AppBarLayout的这个：

  <android.support.v7.widget.RecyclerView
        android:id="@+id/coordinator_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>

除了这个，比如还有这个@string/bottom_sheet_behavior。

CollapsingToolbarLayout

可折叠工具栏布局，结合android.support.v7.widget.Toolbar、AppBarLayout一起使用，只是提供了更多可选的效果。

比如如下使用：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:id="@+id/coordinator_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@mipmap/testpic2"
                app:contentScrim="#45a1cf"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#30469b"
                android:minHeight="?attr/actionBarSize">
                app:layout_collapseMode="parallax"
                >
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#234467"
            app:layout_scrollFlags="enterAlways">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="菜单"
                android:textColor="#ffffff"/>
        </LinearLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/coordinator_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>


</android.support.design.widget.CoordinatorLayout>

app:contentScrim：设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色
app:layout_collapseMode: 折叠模式：parallax(视差)、pin(折叠收缩后，Toolbar还可以保留在屏幕上)
app:layout_collapseParallaxMultiplier： 视差滚动因子，取值0~1
app:expandedTitleMarginStart：设置扩张时候(还没有收缩时)title向左填充的距离