CollapsingToolbarLayout配合CoordinatorLayout、AppBarLayout，RecyclerView实现伸缩布局

最新推荐文章于 2022-01-17 13:14:39 发布

Jersey-Guo

最新推荐文章于 2022-01-17 13:14:39 发布

阅读量2k

点赞数

分类专栏： Android布局文章标签： android 布局控件

本文链接：https://blog.csdn.net/Jersey_me/article/details/72763879

版权

Android布局专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这四个layout都是Android design中出现的控件，所以要想使用首先要在gradle中配置依赖，其中RecyclerView使用的第三方的库，配置如下：

compile 'com.jcodecraeer:xrecyclerview:1.3.2'
compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.android.support:design:25.1.0'

demo中用到了cardview所以也有cardview-v7的包，要想实现这一功能主要的还是布局，布局写好后其他的就该怎么写就怎么写了；

布局如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xlistviewdemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.xlistviewdemo.view.NoScrollGridView
                android:id="@+id/scroll_gridview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:background="@color/white"
                android:numColumns="5"
                android:layout_margin="10dp"
                android:verticalSpacing="10dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <com.jcodecraeer.xrecyclerview.XRecyclerView
        android:id="@+id/xrecyclerview_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

最外层的CoordinatorLayout继承于ViewGroup，类似于 FrameLayout，功能主要是作为顶层布局调度协调子布局，通过设置子布局的 Behavior来协调子布局

AppBarLayout控制子视图，可以看到CollapsingToobarLayout里面有app：layout_scrollFlags这一属性，这一属性是用来控制滑动试图效果的，其有四个字：

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，XRecyclerView没有设置这个值，将会停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

想要collapsingToolbar有滑动效果，以下是要设置的：
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性

CollapsingToolbarLayout实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。其属性有很多，我就不一一介绍了，想了解的可以看下官方文档:https://developer.android.google.cn/reference/android/support/design/widget/CollapsingToolbarLayout.html

这个demo实现的是随着XRecyclerView上滑，GridView折叠，所以给XRecyclerView设置了layout_behavior，想要实现折叠效果，就要使用Coordinatorlayout作为父布局，想要获取更好的效果，可以自定义Behavior实现。