ConstraintLayout vs Coordinator 布局？

Question

要实现什么：ConstraintLayout 或 CoordinatorLayout 在 android 中进行适当的材料设计？

Answer 1

CoordinatorLayout 是一个超级强大的 FrameLayout。

CoordinatorLayout

CoordinatorLayout 适用于两个主要用例：

• 作为顶级应用程序装饰或 chrome 布局
• 作为与一个或多个子视图进行特定交互的容器

默认情况下，如果您将多个子代添加到FrameLayout，它们会相互重叠。 FrameLayout 应该最常用于保存单个子视图。 CoordinatorLayout 的主要吸引力在于它能够协调其中视图的动画和转换。通过为CoordinatorLayout 的子视图指定Behaviors，您可以在单个父视图中提供许多不同的交互，并且这些视图也可以相互交互。视图类可以在用作 CoordinatorLayout 的子项时使用 CoordinatorLayout.DefaultBehavior 注释指定默认行为。

行为可用于实现各种交互和其他布局修改，从滑动抽屉和面板到滑动可关闭元素和按钮，这些元素在移动和动画时会粘在其他元素上。

ConstraintLayout 是一个超级强大的 ViewGroup，类似于 RelativeLayout，但比 RelativeLayout 更灵活。

ConstraintLayout

ConstraintLayout 允许您创建具有平面视图层次结构的大型复杂布局（无嵌套视图组）。 与RelativeLayout类似，所有视图都是根据兄弟视图和父布局之间的关系进行布局，但比RelativeLayout更灵活，更易于与Android Studio的布局编辑器一起使用。

• ConstraintLayout 可以在任何地方使用，一旦您开始使用ConstraintLayout，就不需要任何其他 ViewGroup，例如 RelativeLayout、LinearLayout 或 FrameLayout。

目前您可以使用多种类型的约束：

• 相对定位
• 边距
• 居中定位
• 圆形定位
• 可见性行为
• 尺寸限制
• 链条
• 虚拟助手对象
• 优化器

要实现什么：ConstraintLayout 或 CoordinatorLayout 在 android 中进行适当的材料设计？

您可能需要同时使用 ConstraintLayout 和 CoordinatorLayout 来构建高效的 UI 和材质动画。

下面给出了一个同时使用CoordinatorLayout 和ConstraintLayout 的常见示例供您参考。

• 使用Coordinatorlayout 作为顶级应用装饰。它通常用于布局AppBarLayout、FloatingActionButton，以及屏幕主体，比如NestedScrollView。在NestedScrollView 内部使用ConstraintLayout 将布局的其余部分描述为平面层次结构。

  <androidx.coordinatorlayout.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">
  
        <androidx.core.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
  
            <!-- Your scrolling content -->
            <androidx.constraintlayout.widget.ConstraintLayout
                ...>
  
                <!-- body of constraint layout -->
  
                <Button android:id="@+id/button" ...
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent/>
  
  
            </androidx.constraintlayout.widget.ConstraintLayout>
       </androidx.core.widget.NestedScrollView>
  
       <com.google.android.material.appbar.AppBarLayout
           android:layout_height="wrap_content"
           android:layout_width="match_parent">
        <androidx.appcompat.widget.Toolbar
               ...
               app:layout_scrollFlags="scroll|enterAlways"/>
        <com.google.android.material.tabs.TabLayout
               ...
               app:layout_scrollFlags="scroll|enterAlways"/>
        </com.google.android.material.appbar.AppBarLayout>
   </androidx.coordinatorlayout.widget.CoordinatorLayout>
  

上面的sn-p是做什么的？给你。

• 我们已将androidx.coordinatorlayout.widget.CoordinatorLayout 作为根布局。我们将androidx.core.widget.NestedScrollView 和com.google.android.material.appbar.AppBarLayout 作为直接子代。

• 我们为androidx.core.widget.NestedScrollView 定义了app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" 属性。这是关键点。我们为NestedScrollView 定义了一个行为。也就是说，我们告诉 Coordinator 布局 NestedScrollView 依赖于 AppBarLayout。

  • 当然，行为本身不会做任何事情，但 CoordinatorLayout 会做。它相应地采取行动并帮助拦截触摸事件、窗口插入、测量、布局和嵌套滚动。所以在这里，它按照我们的指示将 NestedScrollView 放置在 AppBarLayout 下方。酷吧？

• 我们将ConstraintLayout 放置在NestedScrollView 中以使其可滚动。正如我们已经讨论过的，ConstraintLayout 用于将子视图与 ConstraintLayout 的边界对齐。

我可以在另一个 ConstraintLayout 中添加 ConstraintLayout 吗？

当然可以，您可以根据您的设计要求使用任意组合来对齐视图。

我可以在另一个 CoordinatorLayout 中添加 CoordinatorLayout 吗？

这不是通常的做法。 CoordinatorLayout 最常见的用例是作为顶级应用程序装饰来协调其他直接子级。但是是的，如果你真的想嵌套 CoordinatorLayout，你可以通过创建自定义 CoordinatorLayout 来实现，它扩展 CoordinatorLayout 并实现 NestedScrollingChild 以将滚动事件传递给父 CoordinatorLayout。

---

奖励积分

您可以使用强大的MotionLayout，它是ConstraintLayout 的子类来构建动画。 You may check this for a detailed example 用于自定义动画，使用 MotionLayout。

Answer 2

CoordinatorLayout 旨在成为 Activity 的顶级布局，以管理 Behaviors，例如交互和动画。

ConstraintLayout 的主要目标是提供一种方便的方法来创建具有多个子级的平面布局（功能更强大的 RelativeLayout）。

所以 CoordinatorLayout 是管理 Activity 组件的复杂行为（尤其是动画），而 ConstraintLayout 是用于正确放置组件（尤其是列表项）。

Answer 3

您似乎（几乎）总是使用CoordinatorLayout，有时在内部使用ConstraintLayout。请参阅以下资源

• https://codelabs.developers.google.com/codelabs/material-design-style/index.html#3 的代码实验室仅使用 CoordinatorLayout

• 示例 android-sunflower 应用程序（“说明 Android 开发最佳实践”）既不使用顶级活动，但在其 fragment_plant_detail.xml 内使用两者，ConstraintLayout 在 CoordinatorLayout 内：

  <layout ...>
  <data .../>
  <android.support.design.widget.CoordinatorLayout ...>
      <android.support.design.widget.AppBarLayout ...>
          <android.support.design.widget.CollapsingToolbarLayout ...>
              <ImageView... />
              <android.support.v7.widget.Toolbar... />
          </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView ...>
          <android.support.constraint.ConstraintLayout ...>
              <TextView.../>
              <TextView... />
          </android.support.constraint.ConstraintLayout>
      </android.support.v4.widget.NestedScrollView>
      <android.support.design.widget.FloatingActionButton ... />
  </android.support.design.widget.CoordinatorLayout>
  </layout>
  

Answer 4

@Darish 对此有一个很好、全面的答案。 我支持他所说的一切，并想补充一点信息。根据我的经验，大多数情况下，将约束布局作为父视图就足够了。当您需要引入协调器布局时，您需要管理特定的行为（例如底部工作表）。如果您不使用 Coordinator Layout 的行为功能，或者您试图弄乱多个视图，因为 CoordinatorLayout 充当“超级强大的 FrameLayout”，那么 Coordinator Layout 会带来更多麻烦。

我不久前写了一篇博文，其中介绍了 Coordinator 与 Constraint 布局的区别和用法。 Check it out here if you are interested.

我还支持 MotionLayout 插件，它是一种无需太多额外代码即可将动画添加到布局的综合方式！ This Google Developers series with examples 是开始使用 MotionLayout 的好方法。