android CoordinatorLayout使用

最新推荐文章于 2024-09-24 14:08:04 发布
最新推荐文章于 2024-09-24 14:08:04 发布
阅读量10w+ 收藏 586
点赞数 190
分类专栏： android UI（常用）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyz_lmn/article/details/48055919
版权

一、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.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">


    <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>

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();
            }
        });
    }
}

效果： 

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"

为了使得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)

如下面的例子，实现了点击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的使用方式。

xyz_lmn
关注
专栏目录
Android CoordinatorLayout使用 标题由图片变纯色，附源码及apk
07-06
Android CoordinatorLayout使用 标题由图片变纯色，附源码及apk，博客地址：http://blog.csdn.net/fan7983377/article/details/51839583
Android CoordinatorLayout高级用法之自定义Behavior
01-04
上次简单的说了一下CoordinatorLayout的基本用法(android特性之CoordinatorLayout用法探析实例)。其中CoordinatorLayout给我们提供了一种新的事件的处理方式，Behavior。还记得那一串字符串吗？ app:layout_...
彻底搞懂CoordinatorLayout
仰视未来的专栏
03-23 685
转载于： http://mp.weixin.qq.com/s?__biz=MzIzMjE1Njg4Mw==&mid=2650117781&idx=1&sn=187bcdbbbfa0610e131c03a0e8a0fbf5&chksm=f0980d29c7ef843f8e5614cb2907277913022f0376363310fe206b1bf413ffec025f593866af&scene=
CoordinatorLayout使用全解析
老皮的博客
11-25 2015
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承自FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。记住，要把带有scroll flag的view放在前面，这样收回的view才能让正常退出，而固定的view继续留在顶部。
Android基础知识
最新发布
jjx_fight的博客
09-24 1513
具体参考Android官方简介使用ADIL创建绑定服务，需要执行以下步骤：1.创建.aidl文件此文件定义带有方法签名的编程接口。2.实现接口Android SDK 工具基于您的 .aidl 文件，使用 Java 编程语言生成一个接口。此接口具有一个名为 Stub 的内部抽象类，用于扩展 Binder 类并实现 AIDL 接口中的方法。您必须扩展 Stub 类并实现方法。3.向客户端公开该接口实现 Service 并重写 onBind() 以返回 Stub 类的实现。
Android CoordinatorLayout使用
周平的博客
05-12 4808
一、简介 CoordinatorLayout翻译为协调者布局，是在 Google IO/15 大会发布的，遵循Material Design风格，包含在 com.android.support:design中，结合AppBarLayout, CollapsingToolbarLayout等可产生各种炫酷的效果。 二、使用 CoordinatorLayout结合AppBarLayout使用 ...
Android中协调布局CoordinatorLayout的使用
水月洞天
03-18 4704
Android自5.0之后对UI做了较大的提升，一个重大的改进是推出了MaterialDesign库，而该库的基础即为协调布局CoordinatorLayout，几乎所有的design控件都依赖于该布局。今天我们就学习一下CoordinatorLayout的相关知识。 1.依赖 support库依赖 implementation 'com.android.support:design:28.0.0' AndroidX库依赖 implementation 'com.google.android.
Android CoordinatorLayout打造酷炫的顶部栏
07-08
总的来说，`CoordinatorLayout`、`AppBarLayout`和沉浸式模式的组合使用，为Android开发者提供了一套强大的工具，可以创造出富有吸引力和互动性的顶部栏设计。通过深入了解这些组件的工作原理，并结合实际项目的`...
Android CoordinatorLayout详解及实例代码
08-31
Android CoordinatorLayout 是一个强大的布局组件，它在Android开发中被广泛使用，特别是在构建现代、交互式用户界面时。它的核心功能在于提供了一种方法来协调和管理其子视图的行为，使得开发者能够轻松创建出复杂...
Android 使用CoordinatorLayout实现滚动标题栏效果的实例
08-31
Android 使用CoordinatorLayout实现滚动标题栏效果的实例 CoordinatorLayout是一种强大的布局控件，能够协调处理各个子View之间的动作，从而实现各种动画效果。在 Material Design 中，CoordinatorLayout 通常用来...
使用CoordinatorLayout协调者布局实现仿京东发现页面效果
03-28
使用CoordinatorLayout协调者布局实现仿京东发现页面效果，有兴趣的可以深入研究下，相关博客https://blog.csdn.net/hq942845204/article/details/88844272
CoordinatorLayoutSample:CordinatorLayout使用的几个示例
04-28
CoordinatorLayoutSample CoordinatorLayout使用的几个示例： 大型固定工具栏 可滚动的工具栏 可折叠的工具栏 可滚动和可折叠的工具栏 可折叠的工具栏，其图像具有视差动画 使用CoordinatorLayout行为 带有小吃栏的浮动动作按钮 带有分页器选项卡的工具栏 带有分页器选项卡和视差图像的工具栏 应用商店 CoordinatorLayout示例-https: 一些链接： Android设计支持库 使用CoordinatorLayout处理滚动-https: 带有Android设计支持库的材料设计-http: Google文档： AppBarLayout- CoordinatorLayout- CollapsingToolbarLayout-
android笔记-Android Design支持包控件三（CoordinatorLayout）
walk的博客
05-21 873
5、CoordinatorLayout 1、CoordinatorLayout的作用 在学习CoordinatorLayout之前，很有必要了解CoordinatorLayout能帮我们做什么。CoordinatorLayout就是帮我们协调子View的。怎么协调呢? 就是它根据我们的定制，帮助我们协调各个子View的布局。效果如下： 左...
Android中的layout概念,Android开发之CoordinatorLayout详解
weixin_29972373的博客
05-27 816
2.2.6用CoordinatorLayout实现Toolbar隐藏和折叠CoordinatorLayout是Android Design Support Library中比较难的控件。顾名思义，它是用来组织其子View之间协作的一个父 View。CoordinatorLayout默认情况下可被理解为一个FrameLayout，它的布局方式默认是一层一层叠上去的，在此会介绍一下...
CoordinatorLayout实现酷炫折叠效果
weixin_33796177的博客
09-30 467
动效是我们做移动端都要掌握的，交互设计师给出自己的想法，我们就要用代码实现。今天我给大家带来一个折叠菜单效果，希望的可以收藏，以后用到可以直接使用。 欢迎Star or Follow我的GitHub欢迎搜索微信公众号SamuelAndroid关注我，文章末尾有公众号二维码。 运行效果 实现步骤 了解CoordinatorLayout的同学应该都知道，默认是无法实现这种叠加的效果，它默认的效...
CoordinatorLayout实现二次悬浮和多悬浮
你全家都是博客
12-11 385
CoordinatorLayout实现二次悬浮和多悬浮。
Android Design Library(二)使用CoordinatorLayout布局实现联动效果
时代新人的博客
05-04 2796
使用CoordinatorLayout布局实现联动效果，下面先看下效果图，开始、滑动中和滑动完成效果图如下： 接下来我们具体来看下怎样实现这种效果 首先在项目的build.gradle文件中, 引入头像控件库和CardView库, 在本例中会使用compile 'com.android.support:cardview-v7:23.3.0'//卡片布局 compil
评论 86
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值