【Coordinatorlayout】
作者:互联网
Coordinatorlayout
简介
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