什么是CoordinatorLayout?


93

刚刚查看了新的Android支持设计库的演示应用程序。由Chris Banes在github上提供。在整个应用程序中,CoordinatorLayout已大量使用。此外,许多支持设计库类如FloatingActionButtonSnackBarAppBarLayout等不同的行为时使用的内部CoordinatorLayout

有人可以说明什么是什么CoordinatorLayout以及它与ViewGroupandroid中其他系统有何不同,或者至少提供正确的学习途径CoordinatorLayout


5
android-developers.blogspot.com/2015/05/…它在JavaDocs中也有一个广泛的描述,尽管令人困惑,但目前不能以直接链接的形式提供,但是您可以从developer.android.com/preview下载ZIP /download.html)。
CommonsWare,2015年

1
使用CordinatorLayout?的真正好处是什么?它比别人有什么优势?
eRaisedToX

Answers:



39

什么是CoordinatorLayout?不要让这个花哨的名字愚弄你,它不过是类固醇上的FrameLayout

为了最好地了解a CoordinatorLayout/是什么,您必须首先了解/记住这对协调员意味着什么。

如果您用谷歌这个词

坐标

这是您得到的:

在此处输入图片说明

我认为这些定义有助于描述CoordinatorLayout自己执行的操作以及其中的视图的行为。

CoordinatorLayout(视图组)将(aa̶c̶o̶m̶p̶l̶e̶x̶a̶c̶t̶i̶v̶i̶t̶y̶̶o̶r̶̶a̶n̶̶o̶r̶g̶a̶n̶i̶z̶a̶t̶i̶o̶)的不同元素(子视图)带入高效的布局:

在CoordinatorLayout的帮助下,子视图可以和谐地协同工作,以实现诸如

拖动,滑动,甩动或其他任何手势。

CoordinatorLayout内部的视图与其他视图协商,以便通过指定这些行为来有效地协同工作

CoordinatorLayout是Material Design的超酷功能,可帮助创建有吸引力且协调的布局。

您要做的就是将子视图包装在CoordinatorLayout中。

<?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"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity">

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </android.support.design.widget.CoordinatorLayout>

和content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

这提供给我们的是可以滚动以折叠工具栏并隐藏FloatingActionButton的布局

打开:

在此处输入图片说明

关闭:

在此处输入图片说明


2
相对或约束布局在视图之间也没有关系吗?如果一个视图向上移动,则相关视图向上移动。为什么协调员更好?

1
@Snake 1. CoordinatorLayout有助于将一个视图布置在另一个视图上,而ConstraintLayout或RelativeLayout都无法做到。2.它还有助于动画化视图的过渡。一个很好的例子是Whatsapp应用程序中“查看联系人”活动/片段的过渡。
Felix Favor Chinemerem

13

还有一点需要注意。由于OP特别要求

同样,在CoordinatorLayout中使用时,许多支持设计库类(例如FloatingActionButton,SnackBar,AppBarLayout等)的行为也有所不同。

我猜是因为这个。

CoordinatorLayout是功能强大的FrameLayout。

FAB Button,SnackBar遵循FrameLayout的概念,并且由于CoordinatorLayout本身具有FrameLayout的功能,因此它可能会使其他视图的行为有所不同!


8

CoordinatorLayout本质上是具有很多功能的框架布局,从名称上可以明显看出,它使子元素之间的协调自动化并有助于构建漂亮的视图。可以在Google Play商店应用中看到其实现。工具栏如何折叠和更改颜色。

关于CoordinatorLayout的最好的事情是我们赋予其直接或间接后代的行为。滚动所有UI时必须已看到。它的行为很有可能正在发挥作用。


7

快速概述一下Android文档中的有用功能

使用CoordinatorLayout可以简单地控制视图的关系行为,

例如,如果您希望工具栏折叠或隐藏。Google通过引入AppBarLayout和CollapsingToolbarLayout使其变得非常容易,这两种方法在CoordinatorLayout下都可以很好地工作。

另一种最常用的情况是,当您希望FloatingActionButton粘在CollapsingToolbar的底部并随其移动时,将它们放在coordinatorLayout下并app:layout_anchor="@id/YourAppBarId"用于胶水(!)和app:layout_anchorGravity="bottom|end"因为位置足以让您看到魔术作品!

通过使用此布局作为上下文,子视图将具有更好的协作并以一种智能的方式运行,因为它们将通过CoordinatorLayout上下文相互了解,这意味着您的FloatingAction Button将不再与SnackBar等重叠。

这些只是最有用部分的快速摘要,因此,如果您想节省更多时间来制作动画应用程序,那么对这个主题进行更深入的研究是值得的。

查看Google滚动视图活动模板


1

需要注意的一件事是CoordinatorLayout对FloatingActionButton或AppBarLayout工作没有任何天生的了解-它仅以Coordinator.Behavior的形式提供了一个附加API,该子API允许子视图更好地控制触摸事件和手势。以及声明彼此之间的依赖关系,并通过onDependentViewChanged()接收回调。

视图可以使用CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)批注声明默认行为,也可以使用app:layout_behavior =“ com.example.app.YourView $ Behavior”属性在布局文件中设置默认行为。该框架使任何视图都可以与CoordinatorLayout集成。

现在有空!现在可以使用设计库,因此请确保在SDK Manager中更新Android支持存储库。然后,您可以开始使用具有单个新依赖项的Design库:

编译'com.android.support:design:22.2.0'请注意,由于设计库取决于Support v4和AppCompat支持库,因此在添加设计库依赖项时将自动包含这些库。我们还注意这些新的小部件可在Android Studio布局编辑器的“设计”视图中使用(在CustomView中查找它们),从而为您提供了一种预览其中一些新组件的简便方法。

设计库,AppCompat和所有Android支持库都是重要的工具,可提供构建现代,外观精美的Android应用所需的构建基块,而无需从头开始构建所有内容。


0

CoordinatorLayout是一个超级动力FrameLayout

默认情况下,如果您将多个子项添加到FrameLayout,则它们会相互重叠。FrameLayout最常使用A 来保存单个子视图。的主要吸引力CoordinatorLayout在于它能够协调其中的动画和视图过渡。仅使用XML,您可以描述一种布局,例如,FAB移出传入的Snackbar,或者将FAB(或其他任何View)连接到另一个小部件,并在屏幕上随同移动。小部件。

这是主要的源教程

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.