CoordinatorLayout+AppBarLayout实现联动

最新推荐文章于 2023-01-30 13:57:28 发布

Yang-Zhou

最新推荐文章于 2023-01-30 13:57:28 发布

阅读量712

点赞数

分类专栏： android学习笔记文章标签：布局

本文链接：https://blog.csdn.net/snailpeople/article/details/77744724

版权

android学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CoordinatorLayout简介

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

也就是作用就是作为顶层布局，调度协调子布局。
下面主要讲Col和AppbarLayout组合使用的方法：

一、AppBarLayout嵌套TabLayout+viewpager

这种组合是经常使用的，一般就是使toolbar能跟随viewpager里面的滑动状态实现联动，达到隐藏的目的，需要注意的是：

CoordinatorLayout作为布局的父布局容器。
给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
给滑动的组件设置app:layout_behavior属性

布局代码：

<?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"
    android:fitsSystemWindows="true"
    tools:context="com.example.zhouyang.news_product.News_all">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
          app:layout_scrollFlags="scroll|enterAlways"
            android:text="hello"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
        <android.support.design.widget.TabLayout
            app:tabMode="scrollable"
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
       app:layout_behavior=
       "@string/appbar_scrolling_view_behavior"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

app:layout_scrollFlags：在AppBarLayout中想要滑动的view里面设置这个属性
关于这个属性有以下可选择(可以组合使用)：
1. scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
2.enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
3.enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
4.exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如，示例中Viewpager设置了此属性：app:layout_behavior=”@string/appbar_scrolling_view_behavior”

总结：
为了使得View有滑动效果，必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性

二、AppBarLayout嵌套CollapsingToolbarLayout

CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。

代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorAccent"
            >
            <ImageView
                app:layout_collapseParallaxMultiplier="0.5"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@mipmap/ic_launcher"/>
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

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

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
        <TextView
            android:text="helloooo"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
            <TextView
                android:text="helloooo"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
            <TextView
                android:text="helloooo"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
            <TextView
                android:text="helloooo"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
            <TextView
                android:text="helloooo"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>