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&…
阅读更多...
大数据产品的备份及恢复

大数据产品的备份及恢复

Hbase Distcp方式整体下载上传方式CopyTable备份Export工具elasticsearch 建立备份快照数据挂载点建立快照仓储repository建立snapshot快照备份恢复snapshot快照数据 原集群恢复新集群恢复HDFSHbase的备份恢复 hbase数据备份策略有两类&#xff1a; 离线备份&#xff08;关闭Hb…
阅读更多...
centos7 greenplum6.1开源版本编译

centos7 greenplum6.1开源版本编译

greenplum开源版本 https://greenplum.org/ 其官方手册 https://greenplum.org/documentation/ 其下载介质地址 https://github.com/greenplum-db/gpdb/releases 本次下载src-full https://github.com/greenplum-db/gpdb/releases/download/6.1.0/6.1.0-src-full.zip 编译参…
阅读更多...
Centos7 Greenplum6.1开源版本集群部署

Centos7 Greenplum6.1开源版本集群部署

目录 1.前言 1.1参照文档 1.2部署包 1.3服务器环境 2 准备工作 2.1 Linux用户 2.2 主机名和hosts配置 2.3 防火墙 2.4 系统资源配置 2.5 暂时启用gpadmin sudo 2.6 复制配置文件到所有节点上 3 安装Greenplum DB 3.1 在Master节点上安装Greenplum DB 3.2 在Master…
阅读更多...
转 C#对多个集合和数组的操作(合并,去重,判断)

转 C#对多个集合和数组的操作(合并,去重,判断)

在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数. 首先举例2个集合A,B. List<int> listA new List<int> {1,2,3,5,7,9}; List<int> listB new List<int> {13,4,17,29…
阅读更多...
centos7 postgresql9和postgis2.1插件编译部署

centos7 postgresql9和postgis2.1插件编译部署

目录 依赖安装 下载编译libgeos 下载编译proj4 编译Postgresql9 编译PostGIS2 启动postgresql服务 开通外部网络访问 数据库开启PostGIS扩展 查看PostGIS版本 升级PostGIS版本 依赖安装 这个命令里面安装的包可能会多&#xff0c;由于是编译GreenPlum用的&#xff0…
阅读更多...
三国人物共现网络

三国人物共现网络

三国部分人物共现图 转载于: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.…
阅读更多...
flutter网络权限申请

flutter网络权限申请

在此文件&#xff08;android/src/main/AndroidManifest.xml&#xff09;中的manifest节点下添加如下代码&#xff1a; 注意&#xff0c;不是profile文件夹下的。 <uses-permission android:name"android.permission.READ_PHONE_STATE" /> <uses-permissio…
阅读更多...
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_…
阅读更多...
[原创] 毕设---在myeclipes中安装Hadoop开发插件

[原创] 毕设---在myeclipes中安装Hadoop开发插件

1、安装Hadoop开发插件hadoop安装包contrib/目录下有个插件hadoop-0.20.2-eclipse-plugin.jar&#xff0c;拷贝到myeclipse根目录下/dropins目录下。2、 启动myeclipse&#xff0c;打开Perspective&#xff1a;【Window】->【Open Perspective】->【Other...】->【Map…
阅读更多...
ubuntu安装显卡驱动

ubuntu安装显卡驱动

1.卸载系统里低版本的英伟达驱动 sudo apt-get purge nvidia* 2.把显卡驱动加入PPA sudo add-apt-repository ppa:graphics-drivers sudo apt-get update 3.查找英伟达显卡驱动最新版本号 sudo apt-cache search nvidia 使用终端命令查看Ubuntu推荐的驱动版本 ubuntu-driver…
阅读更多...
[转]cubemap soft shadow

[转]cubemap soft shadow

https://community.arm.com/graphics/b/blog/posts/dynamic-soft-shadows-based-on-local-cubemap转载于:https://www.cnblogs.com/wantnon/p/6819103.html
阅读更多...
flutter打开第三方应用

flutter打开第三方应用

添加依赖 url_launcher: ^5.4.1 ————————main.dart import package:url_launcher/url_launcher.dart;void main() > runApp(MyApp());const String TITLEwhqtest;class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return Materi…
阅读更多...
vue2 watch引用类型 失败原因

vue2 watch引用类型 失败原因

vue中watch基本用法&#xff1a;　 new Vue({el: #t1,data: {a: {b: 1,c: 2},},methods: {ch() {this.a.d5　　 //不打印ok 原理是watch只watch挂在data中的数据&#xff0c;初始化时给他们分别赋予setter与getter&#xff0c;如果是中途加上的属性&#xff0c;由于没有sette…
阅读更多...
flutter webview浏览器及与js交互、打开第三方app

flutter webview浏览器及与js交互、打开第三方app

添加pubspec.yaml依赖 url_launcher: ^5.4.1 webview_flutter: ^0.3.181 --------------main.dart import package:flutter/material.dart; import package:url_launcher/url_launcher.dart; import package:webview_flutter/webview_flutter.dart;void main() > runApp(M…
阅读更多...
Flutter1.12与原生Android交互（kotlin）

Flutter1.12与原生Android交互（kotlin）

开发原生部分&#xff0c;还是点击Open for Editing in Android Studio好用&#xff0c;提示、自动引用功能都能正常使用。 -----------android/app/src/main/kotlin/com/glodon/gzzjy_app/MainActivity.kt import android.os.Bundle import android.os.PersistableBundle impo…
阅读更多...
最新文章

Copyright @ 2022~2023