【Coordinatorlayout】

2021-12-12 23:58:01 阅读：143 来源： 互联网

标签：AppBarLayout layout app Coordinatorlayout CollapsingToolbarLayout 折叠 view

Coordinatorlayout

简介
- 声明依赖项
Coordinatorlayout、AppBarLayout、CollapsingToolbarLayout结合使用

简介

CoordinatorLayout 是一个超级强大的FrameLayout.结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的折叠悬浮效果。
CoordinatorLayout 适用于两个主要用例：
1.作为顶级应用程序装饰或镀铬布局
2.作为与一个或多个子视图进行特定交互的容器

·app:layout_scrollFlags ：（子布局设置是否可滑动）
·android:layout_gravity ：属性控制组件在布局中的位置
·app:layout_behavior="@string/appbar_scrolling_view_behavior" ：通知布局中包含滑动组件！
·app:layout_scrollFlags：子布局通过此确定是否可滑动.给需要滑动的组件设置app:layout_scrollFlags="scroll|enterAlways"属性。

layout_scrollFlags：

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

声明依赖项

在应用或模块的 build.gradle 文件中添加所需工件的依赖项：

    implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

Coordinatorlayout、AppBarLayout、CollapsingToolbarLayout结合使用

AppBarLayout

如果我们想要实现折叠的ActionBar效果，在CoordinatorLayout中，AppBarLayout绝对是作为首选的控件。AppBarLayout是继承与LinearLayout的，默认的方向是Vertical，所以你可以把它当成垂直布局的LinearLayout来使用。
内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作：

·enterAlways :只要屏幕下滑，view就会立即拉下出来。
·scroll :子view会跟随滚动事件一起滚动，相当于添加到scrollview头部
·snap ：这个属性让控件变得有弹性,如果控件下拉了75%的高度，就会自动展开，如果只有25%显示，就会反弹回去关闭。（去试试支付宝首页吧，就是加了弹性这个效果）
·exitUntilCollapsed ：当scrollview滑到订部，再将子view折叠起来
·enterAlwaysCollapsed ：当scrollview滑到底，再将子view展开

 <androidx.coordinatorlayout.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">

     <androidx.core.widget.NestedScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <!-- Your scrolling content -->

     </androidx.core.widget.NestedScrollView>

     <com.google.android.material.appbar.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">

         <androidx.appcompat.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <com.google.android.material.tabs.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

     </com.google.android.material.appbar.AppBarLayout>

 </androidx.coordinatorlayout.widget.CoordinatorLayout>

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar。
使用CollapsingToolbarLayout时，我们需要注意CollapsingToolbarLayout需要作为AppBarLayout子View。CollapsingToolbarLayout 是一个包装器，Toolbar用于实现折叠应用栏。它旨在用作AppBarLayout.

CollapsingToolbarLayout属性和含义

·app:title 设置标题
·app:collapsedTitleGravity="center" 设置标题位置
·app:contentScrim 设置折叠时toolbar的颜色，默认是colorPrimary的色值
·app:statusBarScrim 设置折叠时状态栏的颜色 ，默认是colorPrimaryDark的色值
·app:layout_collapseParallaxMultiplier 设置视差
·app:layout_collapseMode="parallax" 视差模式，在折叠的时候会有个视差折叠的效果
·app:layout_collapseMode="pin" 固定模式，在折叠的时候最后固定在顶端

设置简单的xml文件看看效果

xml布局文件用android.support.design.widget.CoordinatorLayout和android.support.design.widget.AppBarLayout等报错改为androidx.coordinatorlayout.widget.CoordinatorLayout 和com.google.android.material.appbar.AppBarLayout；AndroidX 是对support library 的一次升级：包名从在android.support.*下面面变成androidx.*下面。命名规则不会再包含具体操作系统API的版本号。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/dog"
                app:layout_collapseMode="parallax" />


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:background="#5FF"
                app:layout_collapseMode="pin" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar3"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#ffffff"
                app:layout_collapseMode="parallax" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar2"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:background="#000000"
                app:layout_collapseMode="parallax" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在这里插入图片描述

AppBarLayout放多个Toolbar，其中有一个设置app:layout_collapseMode="pin"固定模式，折叠的时候最后固定在顶端，其余都设置为app:layout_collapseMode=“parallax” 视差模式，在折叠的时候会有个视差折叠的效果。

github上的完整参照代码: https://github.com/18380438200/CoordinatorlayoutFull
最后效果图：
在这里插入图片描述

作者：zza

原文链接

标签：AppBarLayout,layout,app,Coordinatorlayout,CollapsingToolbarLayout,折叠,view
来源： https://blog.csdn.net/fjnu_se/article/details/121896082

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Coordinatorlayout】