【Coordinatorlayout】
2021/12/13 6:23:34
本文主要是介绍【Coordinatorlayout】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Coordinatorlayout
- 简介
- 声明依赖项
- Coordinatorlayout、AppBarLayout、CollapsingToolbarLayout结合使用
- AppBarLayout
- CollapsingToolbarLayout
- 设置简单的xml文件看看效果
简介
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
原文链接
这篇关于【Coordinatorlayout】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23增量更新怎么做?-icode9专业技术文章分享
- 2024-11-23压缩包加密方案有哪些?-icode9专业技术文章分享
- 2024-11-23用shell怎么写一个开机时自动同步远程仓库的代码?-icode9专业技术文章分享
- 2024-11-23webman可以同步自己的仓库吗?-icode9专业技术文章分享
- 2024-11-23在 Webman 中怎么判断是否有某命令进程正在运行?-icode9专业技术文章分享
- 2024-11-23如何重置new Swiper?-icode9专业技术文章分享
- 2024-11-23oss直传有什么好处?-icode9专业技术文章分享
- 2024-11-23如何将oss直传封装成一个组件在其他页面调用时都可以使用?-icode9专业技术文章分享
- 2024-11-23怎么使用laravel 11在代码里获取路由列表?-icode9专业技术文章分享
- 2024-11-22怎么实现ansible playbook 备份代码中命名包含时间戳功能?-icode9专业技术文章分享