66

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

4

4 回答 4

84

CoordinatorLayout 是一个超级强大的 FrameLayout。

协调器布局

CoordinatorLayout适用于两个主要用例：

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

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

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

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

约束布局

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

  • ConstraintLayout可以在任何地方使用，您不需要任何其他 ViewGroup RelativeLayout，LinearLayout或者FrameLayout一旦您开始使用ConstraintLayout.

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

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

要实现什么：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>

上面的片段是做什么的？干得好。

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

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

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

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

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

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

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

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

奖励积分

您可以使用强大的MotionLayout，它是ConstraintLayout构建动画的子类。 您可以使用MotionLayout.

于 2017-03-26T09:54:03.497 回答
76

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

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

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

于 2016-12-20T20:13:21.153 回答
16

似乎您（几乎）总是使用 a CoordinatorLayout，有时使用 a ConstraintLayoutinside。请参阅以下资源

  • 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>
于 2018-07-04T12:17:25.447 回答
0

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

前段时间我写了一篇博文，其中有关于 Coordinator 与 Constraint 布局的区别和用法的插图。如果您有兴趣，请在此处查看。

我还会将 MotionLayout 插件作为一种很好的综合方式来为您的布局添加动画，而无需太多额外的代码！这个带有示例的 Google Developers 系列是开始使用 MotionLayout 的好方法。

于 2020-01-17T22:51:51.613 回答