android CoordinatorLayout使用

一、CoordinatorLayout有什么作用

CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能：
1、作为顶层布局
2、调度协调子布局

CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。系统（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。

使用CoordinatorLayout需要在Gradle加入Support Design Library：

compile 'com.android.support:design:22.2.1'

二、CoordinatorLayout与FloatingActionButton

定义布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayoutxmlns: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"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@drawable/ic_done" /> </android.support.design.widget.CoordinatorLayout>
  • 1

CoordinatorLayout作为“super-powered FrameLayout”，设置子视图的Android:layout_gravity属性控制位置。

Activity:

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG) .setAction("cancel", new View.OnClickListener() { @Override public void onClick(View v) { //这里的单击事件代表点击消除Action后的响应事件 } }) .show(); } }); } }
  • 2

效果： 

FloatingActionButton是最简单的使用CoordinatorLayout的例子，FloatingActionButton默认使用FloatingActionButton.Behavior。

三、CoordinatorLayout与AppBarLayout

3.1 AppBarLayout嵌套TabLayout

布局文件代码：


<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_done" /> </android.support.design.widget.CoordinatorLayout>

 

效果： 

效果显示，视图滚动时，Toolbar会隐藏，这个效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout实现的。通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局，Toobar有app:layout_scrollFlags属性，这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值：
  1. scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
  2. enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
  3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
  4. exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

为了ToolBar可以滚动，CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如，示例中Viewpager设置了此属性。

app:layout_behavior="@string/appbar_scrolling_view_behavior"
  • 1

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

3.2 AppBarLayout嵌套CollapsingToolbarLayout

<?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" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="256dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" android:src="@drawable/header" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 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"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="CardView" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/card_string" /> </LinearLayout> </android.support.v7.widget.CardView> …… </LinearLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" android:src="@drawable/ic_done" android:layout_margin="@dimen/fab_margin" android:clickable="true"/> </android.support.design.widget.CoordinatorLayout>

效果：

这种效果在详情页面用的较多，展示个性化内容，图像有强烈的吸引力。这个效果重点使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供以下属性和方法是用：
1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton。

通过下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得FAB 浮动按钮也能折叠消失，展现。

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"

使用CollapsingToolbarLayout实现折叠效果，需要注意3点
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

四、自定义behavior

CoordinatorLayout功能如此强大，而他的神奇之处在于Behavior对象，CoordinatorLayout自己并不控制View，所有的控制权都在Behavior。前面写到了FloatingActionButton.Behavior，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有两个Behavior，一个是拿来给它自己用的，另一个是拿来给它的兄弟结点用的。这些Behavior实现了复杂的控制功能。系统的Behavior毕竟有限，我们可以通过自定义的方式来实现自己的Behavior。

通过 CoordinatorLayout.Behavior(YourView.Behavior.class) 来定义自己的Behavior，并在layout 文件中设置 app:layout_behavior=”com.example.app.YourView$Behavior” 来达到效果。

自定义Behavior 需要重写两个方法：

 public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
  • 1

如下面的例子，实现了点击FloatingActionButton点击旋转90度，并适配Snackbar。

public class RotateBehavior  extends CoordinatorLayout.Behavior<FloatingActionButton> { private static final String TAG = RotateBehavior.class.getSimpleName(); public RotateBehavior() { } public RotateBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) { return dependency instanceof Snackbar.SnackbarLayout; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { float translationY = getFabTranslationYForSnackbar(parent, child); float percentComplete = -translationY / dependency.getHeight(); child.setRotation(-90 * percentComplete); child.setTranslationY(translationY); return false; } private float getFabTranslationYForSnackbar(CoordinatorLayout parent, FloatingActionButton fab) { float minOffset = 0; final List<View> dependencies = parent.getDependencies(fab); for (int i = 0, z = dependencies.size(); i < z; i++) { final View view = dependencies.get(i); if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) { minOffset = Math.min(minOffset, ViewCompat.getTranslationY(view) - view.getHeight()); } } return minOffset; } }

 

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_done" app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/> </android.support.design.widget.CoordinatorLayout>

效果：

综上，基本覆盖了CoordinatorLayout的使用方式。

转载于:https://www.cnblogs.com/Free-Thinker/p/6807360.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/416788.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

deepin15.11系统体验

deepin15.11系统体验

目录 1.下载 2.安装 3.装好后的体验 4.命令情况 5.windows共享 6.总结 听说华为笔记本都预装deepin&#xff0c;下载下来体验下 vmware创建linux系统&#xff0c;版本选择Other Linux 4.x or later kernel 64-bit 1.下载 官网 https://www.deepin.org/ 从官网下载iso真心…
阅读更多...
带视觉差的轮播图

带视觉差的轮播图

最终结果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>html {box-sizing: border-box;font-family: Open Sans, sans-serif;}*, *:befor…
阅读更多...
深度终端：ubuntu等linux下好用的远程终端软件

深度终端：ubuntu等linux下好用的远程终端软件

终端好不好用&#xff0c;直接上图&#xff0c;有图有真相—— 这终端不错啊&#xff0c;可以添加远程链接信息&#xff0c;像xshell似的&#xff0c;比ubuntu那些的终端强多了&#xff0c;每次都得一步步连。 怎么装&#xff1f; sudo apt install -y deepin-terminal PS&…
阅读更多...
三国人物共现网络

三国人物共现网络

三国部分人物共现图 转载于:https://www.cnblogs.com/jzssuanfa/p/6814865.html
阅读更多...
Spark单独集群模式部署

Spark单独集群模式部署

目录 网络配置 SSH 免密码登录 部署 执行测试 网络配置 192.168.81.157 node1 master 192.168.81.158 node2 slave1 192.168.81.159 node3 slave2 相同的配置先在一个节点上配置&#xff0c;配置完成后复制到其它节点上。 vi /etc/hosts 192.168.81.157 node1 192.168.…
阅读更多...
10.1.2 Document类型【JavaScript高级程序设计第三版】

10.1.2 Document类型【JavaScript高级程序设计第三版】

JavaScript 通过Document 类型表示文档。在浏览器中&#xff0c;document 对象是HTMLDocument&#xff08;继承自Document 类型&#xff09;的一个实例&#xff0c;表示整个HTML 页面。而且&#xff0c;document 对象是window 对象的一个属性&#xff0c;因此可以将其作为全局对…
阅读更多...
Ubuntu18.04 Flutter开发环境搭建

Ubuntu18.04 Flutter开发环境搭建

目录 flutter安装 android studio安装 Android Studio创建Flutter项目 运行应用程序 flutter安装 下载flutter https://flutter.dev/docs/development/tools/sdk/releases?tablinux https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_…
阅读更多...
STL浅析——序列式容器vector的数据结构

STL浅析——序列式容器vector的数据结构

vecotr 一词原来的意思是&#xff1a;矢量&#xff0c;向量&#xff0c;航向&#xff0c;顾名思义指的就是类似于数组的一个存储数据的序列&#xff0c;因此所采用的数据结构非常简单&#xff1a;连续的线性空间&#xff0c;它以两个迭代器 _M_start 和 _M_finish 分别指向配置…
阅读更多...
“约见”面试官系列之常见面试题之第一百零一篇之vue-router传参（建议收藏）

“约见”面试官系列之常见面试题之第一百零一篇之vue-router传参（建议收藏）

vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型&#xff1a;字符串、对象。 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转&#xff0c;这种方式很简单但是不…
阅读更多...
“约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式（建议收藏）

“约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式（建议收藏）

众所周知&#xff0c;vue-router有两种模式&#xff0c;hash模式和history模式&#xff0c;这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: 上面的代码可以通过改变hash来改变页面字体颜色&#xff0c;虽然没什么用…
阅读更多...
olive videoeditor开源跨平台视频编辑器

olive videoeditor开源跨平台视频编辑器

目录 简介 官网 使用 简介 olive是开源的视频编辑软件&#xff0c;目前下载版本为Alpha版&#xff0c;但已基本可用。 本文讲解添加图片、特效及文字&#xff0c;最后导出视频的简单过程。 官网 Olive - Professional Open-Source Video Editor 下载地址 Olive - Profes…
阅读更多...
Centos7.5 Ambari2.7.4部署

Centos7.5 Ambari2.7.4部署

目录 1.简介 2.环境准备 3.SSH 免密码登录 4.服务环境 5.本地源搭建 6.安装 7.启动 8.Web页面部署服务 1.简介 本文介绍了Ambari2.7.4在CentOS7.5中使用本地镜像方式进行加速部署。 Ambari Apache Ambari是一种基于Web的工具&#xff0c;支持Apache Hadoop集群的供应…
阅读更多...
“约见”面试官系列之常见面试题之第一百零五篇之v-if与v-show（建议收藏）

“约见”面试官系列之常见面试题之第一百零五篇之v-if与v-show（建议收藏）

相同点&#xff1a;v-if与v-show都可以动态控制dom元素显示隐藏 不同点&#xff1a;v-if显示隐藏是将dom元素整个添加或删除&#xff0c;而v-show隐藏则是为该元素添加css--display:none&#xff0c;dom元素还在。 都修改为false后&#xff0c;第一个div是直接被移除掉了 需要…
阅读更多...
Apache Nifi 入门与进阶 GitChat连接

Apache Nifi 入门与进阶 GitChat连接

NiFi 是美国国家安全局开发并使用了 8 年的可视化数据集成产品&#xff0c;2014 年 NAS 将其贡献给了 Apache 社区&#xff0c;2015 年成为 Apache 顶级项目。 大数据平台都需要进行数据流转&#xff0c;Apache Nifi 作为一款强大的数据流开源软件&#xff0c;支持大量的输入输…
阅读更多...
“约见”面试官系列之常见面试题之第一百零六篇之css只在当前组件中起作用（建议收藏）

“约见”面试官系列之常见面试题之第一百零六篇之css只在当前组件中起作用（建议收藏）

方法很简单&#xff0c;在组件中的style前面加上scoped就可以了&#xff0c;示例&#xff1a;
阅读更多...
html中a标签如何设置行宽高

html中a标签如何设置行宽高

方法一&#xff1a;float&#xff0c;对a样式盒子float:left让它成浮动 直接演示一下了(实现下面页面) 代码如下 <style>#page{width:120px; /* 在外面画一个区域 */height:700px;}li{list-style:none;}a{text-decoration:none; …
阅读更多...
前端学习（2421）：项目反馈

前端学习（2421）：项目反馈

阅读更多...
jmeter监控服务资源

jmeter监控服务资源

转&#xff1a;http://www.cnblogs.com/chengtch/p/6079262.html 1、下载需要的jmeter插件 如图上面两个是jmeter插件&#xff0c;可以再下面的链接中下载&#xff1a; https://jmeter-plugins.org/downloads/old 第三个是放在服务器中的&#xff0c;可在下面的度盘中下载&…
阅读更多...
前端学习（2422）：回顾

前端学习（2422）：回顾

阅读更多...
RANSAC算法在图像拼接上的应用的实现

RANSAC算法在图像拼接上的应用的实现

关于算法原理请参考《基于SURF特征的图像与视频拼接技术的研究》。一、问题提出RANSAC的算法原理并不复杂&#xff0c;比较复杂的地方在于“建立模型”和“评价模型”。我们经常看到的是采用“直线”或者“圆”作为基本模型进行“建立”&#xff0c;而采用所有点到该“直线”或…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023