103

刚刚查看了新的 Android 支持设计库的演示应用程序。它由 Chris Banes 在github上提供。通过应用程序，大量CoordinatorLayout使用。此外，许多支持设计库类（如FloatingActionButton、SnackBar等）AppBarLayout在内部使用时表现不同CoordinatorLayout。

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

4

7 回答 7

52

什么是 CoordinatorLayout？不要让花哨的名字欺骗了你，它只不过是类固醇上的 FrameLayout

为了最好地理解 aCoordinatorLayout是/做什么，您必须首先理解/记住它对 Coordinate 的意义。

如果你谷歌这个词

协调

这就是你得到的：

在此处输入图像描述

我认为这些定义有助于描述 CoordinatorLayout 自身的作用以及其中的视图的行为方式。

CoordinatorLayout（视图组）将 (̶a̶ ̶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̶n̶)̶ 布局的不同元素（子视图）引入和谐或高效的关系：

在 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

打开：

在此处输入图像描述

关闭：

在此处输入图像描述

于 2017-01-26T19:33:12.733 回答
45

这里就是你要找的。

来自文档

设计库引入CoordinatorLayout了一种布局，它为子视图之间的触摸事件提供了额外的控制级别，设计库中的许多组件都利用了这一点。

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

在此链接中，您将看到上述所有视图的演示视频。

希望这可以帮助 ：）

于 2015-05-29T19:37:40.690 回答
13

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

此外，许多支持设计库类（如 FloatingActionButton、SnackBar、AppBarLayout 等）在 CoordinatorLayout 中使用时表现不同。

我想这是因为这个。

CoordinatorLayout 是一个超级强大的 FrameLayout。

FAB Button, SnackBar 工作在 FrameLayout 的概念上，并且由于 CoordinatorLayout 本身具有 FrameLayout 的功能，它可能会使其他视图表现不同！

于 2015-07-02T11:35:13.193 回答
9

CoordinatorLayout本质上是具有许多功能的框架布局，从名称中可以明显看出，它可以自动协调其子项之间的协调并帮助构建漂亮的视图。它的实现可以在 Google Play Store App 中看到。工具栏是如何折叠和改变颜色的。

CoordinatorLayout最好的地方是我们赋予它的直接或间接后代的行为。您必须在滚动时看到所有 UI 都开始运行。这种行为很可能正在发挥它的魔力。

于 2015-06-23T06:10:56.967 回答
7

要快速了解Android 文档中有用的内容：

使用 CoordinatorLayout 来简单地控制视图的关系行为，

例如，如果您希望 ToolBar 折叠或隐藏。Google 通过引入 AppBarLayout 和 CollapsingToolbarLayout 让这一切变得非常简单，它们都在 CoordinatorLayout 下工作得最好。

另一种最常用的情况是，当您希望 FloatingActionButton 粘在 CollapsingToolbar 的底部并随其移动时，将它们放在 coordinatorLayout 下并app:layout_anchor="@id/YourAppBarId"用于胶水（！），app:layout_anchorGravity="bottom|end"因为位置足以让您看到神奇的工作！

通过将此布局用作上下文，子视图将具有更好的协作性并以智能的方式表现，因为它们将通过 CoordinatorLayout 上下文相互了解，这意味着您的 FloatingAction 按钮将不再被小吃条等重叠。

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

请参阅Google 滚动视图活动模板

于 2016-08-23T06:29:45.487 回答
1

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

视图可以通过使用 CoordinatorLayout.DefaultBehavior(YourView.Behavior.class) 注释来声明默认行为，或者通过 app:layout_behavior="com.example.app.YourView$Behavior" 属性在布局文件中设置它。该框架使任何视图都可以与 CoordinatorLayout 集成。

现在有空！设计库现已可用，因此请确保在 SDK 管理器中更新 Android 支持存储库。然后，您可以开始使用具有单个新依赖项的设计库：

compile 'com.android.support:design:22.2.0' 请注意，由于设计库依赖于 Support v4 和 AppCompat 支持库，当您添加设计库依赖项时，它们将自动包含在内。我们还注意这些新小部件可在 Android Studio 布局编辑器的设计视图中使用（在 CustomView 下找到它们），让您可以更轻松地预览其中一些新组件。

设计库、AppCompat 和所有 Android 支持库都是重要的工具，它们提供了构建现代、美观的 Android 应用程序所需的构建块，而无需从头开始构建所有内容。

于 2019-02-19T17:25:16.257 回答
0

是CoordinatorLayout一个超级动力FrameLayout。

默认情况下，如果您将多个孩子添加到 a FrameLayout，它们将相互重叠。AFrameLayout应该最常用于保存单个子视图。的主要吸引力CoordinatorLayout在于它能够协调其中视图的动画和转换。仅使用 XML，您可以描述一个布局，其中一个 FAB 移出传入的 Snackbar，例如，或者有一个显然附加到另一个小部件并在屏幕上移动的 FAB（或任何其他视图）小部件。

这是主要的源教程。

于 2020-07-11T11:19:31.980 回答