在Android中探索constraintlayout 2 0

介绍 (Introduction)

ConstraintLayout is one of the powerful Jetpack libraries that allows developers to create complex and responsive UI quickly with interactive tooling built into Android Studio, in order to preview your XML.

ConstraintLayout是功能强大的Jetpack库之一，开发人员可以使用内置于Android Studio中的交互式工具快速创建复杂且响应Swift的UI，以预览XML。

One of the significant advantages of ConstraintLayout is that we can build complex UI with a flat view hierarchy (no nested view groups). This result is drawing a lesser number of layers, which increases the performance.

ConstraintLayout的显着优点之一是我们可以使用平面视图层次结构(无嵌套视图组)构建复杂的UI。 结果是绘制的层数更少，从而提高了性能。

ConstraintLayout的一些关键功能 (A few key features of ConstraintLayout)

1. We can position the views relatively one another.
   我们可以将视图相对定位。
2. We can center the views using bias or other views.
   我们可以使用偏差或其他视图来居中视图。
3. We can specify the aspect ratio of the view.
   我们可以指定视图的纵横比。
4. We can group and chain the views.
   我们可以对视图进行分组和链接。

一些帮助对象 (A few helper objects)

Helper objects are the objects that are not visible to the user but come in handy to align developers’ views.

助手对象是用户不可见的对象，但可以方便地对齐开发人员的视图。

• Guideline

  Guideline

• Barrier

  Barrier

• Placeholder

  Placeholder

To learn more about ConstraintLayout v1.0, read this article.

要了解有关ConstraintLayout v1.0的更多信息，请阅读本文 。

ConstraintLayout 2.0 (ConstraintLayout 2.0)

Enough with the history lessons. It’s time to integrate v2.0 of ConstraintLayout into your project. To do so, add the following line under the dependencies tag in build.gradle file.

有足够的历史教训。 现在是时候将ConstraintLayout v2.0集成到您的项目中了。 为此，请在build.gradle文件中的dependencies标记下添加以下行。

implementation “androidx.constraintlayout:constraintlayout:2.0.1”

This version brings several new features to ConstraintLayout; let’s start digging into them without any delay.

这个版本给ConstraintLayout带来了几个新功能; 让我们立即开始研究它们。

流 (Flow)

Flow is a new virtual layout added in v2, similar to the group in v1. It’s a combination of Chain and Group, with special powers. In simple words, Flow chains the views with dynamic size at runtime.

Flow是v2中添加的新虚拟布局，类似于v1中的组。 它是Chain和Group的组合，具有特殊功能。 简而言之， Flow在运行时以动态大小链接视图。

Similar to Group, Flow also takes the reference view IDs and creates a Chain behavior. One of the vital advantages that Flow offers is wrapMode (a way to configure the views when they overflow). Out of the box, we’ve three modes to choose from: none, aligned, and chain.

与Group相似， Flow还采用参考视图ID并创建Chain行为。 Flow提供的重要优势之一是wrapMode (一种在视图溢出时对其进行配置的方法)。 开箱即用，我们有三种模式可供选择： none ， aligned和chain 。

Flow mode : none, chain and aligned

流动方式：无，连锁和对齐

• wrap none : Creates a chain out of the referenced views

  wrap none ：从引用的视图中创建一个链

• wrap chain : Creates multiple chains (one after the other) only if the referenced views do not fit

  wrap chain ：仅当引用的视图不适合时才创建多个链(一个接一个)

• wrap aligned : Similar to wrap chain, but will align the views by creating rows and columns

  wrap aligned ：类似于wrap chain ，但将通过创建行和列来对齐视图

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">


    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:flow_wrapMode="chain"
        app:constraint_referenced_ids="btn1, btn2, btn3, btn4, btn5"
        />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button 1"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button 2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button 3"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        app:layout_constraintLeft_toRightOf="@+id/btn3"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button 4"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn5"
        app:layout_constraintLeft_toRightOf="@+id/btn4"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Button 5"/>






</androidx.constraintlayout.widget.ConstraintLayout>

This feature seems simple, but we can create flow layouts using ConstraintLayout 2.0. We no longer need to use flow layout libraries anymore.

这个功能似乎很简单，但是我们可以使用ConstraintLayout 2.0创建流布局。 我们不再需要使用流布局库。

Before ConstraintLayout 2.0, we had to calculate the remaining space after rendering each view to make sure the next view fits in there, else we’ve to align it in the next line. But now we need to use Flow.

在ConstraintLayout 2.0之前的版本中，我们必须在渲染每个视图之后计算剩余空间，以确保下一个视图适合该位置，否则我们必须将其对齐到下一行。 但是现在我们需要使用Flow 。

To learn more about Flow, read the official docs.

要了解有关Flow更多信息，请阅读官方文档 。

层 (Layer)

Layer is the new helper in ConstraintLayout 2.0, similar to Guidelines and Barriers. We can create a virtual layer like a group with multiple referenced views. Once the views are referenced, we can apply transformations on those views using Layer.

Layer是ConstraintLayout 2.0中的新帮助器，类似于Guideline和Barrier 。 我们可以创建一个虚拟图层，例如具有多个引用视图的组。 引用视图后，我们可以使用Layer在这些视图上应用转换。

It’s similar to a Group helper, where we can bind multiple views and perform basic actions like visibility (visible and gone). With Layer, we can take it to the next level. We can apply animations to rotate, translate, or scale multiple views together.

它类似于Group助手，在其中我们可以绑定多个视图并执行基本操作，例如可见性(可见和消失)。 使用Layer ，我们可以将它带入一个新的水平。 我们可以应用动画来一起rotate ， translate或scale多个视图。

<androidx.constraintlayout.helper.widget.Layer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="20"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:constraint_referenced_ids="btn6, btn7"
        />

MotionLayout (MotionLayout)

MotionLayout is a subclass of ConstraintLayout that includes all of its outstanding features, and it’s fully declarative, with the capability to implement complicated transitions in the XML. It is backward-compatible with API level 14, which means it covers 99% of use cases.

MotionLayout是ConstraintLayout的子类，它包含所有出色的功能，并且是完全声明性的，并具有在XML中实现复杂转换的功能。 它与API级别14向后兼容，这意味着它涵盖了99％的用例。

The new MotionLayout editor in Android Studio 4.0 makes it easy to work with MotionLayout. It provides a fancy environment to implement transitions, MotionScenes, and more.

Android Studio 4.0中新的MotionLayout编辑器使使用MotionLayout变得容易。 它提供了一个精美的环境来实现转场， MotionScenes等。

To learn more about MotionLayout, read this article.

要了解有关MotionLayout更多信息，请阅读本文 。

That is all for now, hope you learned something useful, thanks for reading.

到此为止，希望您能学到一些有用的东西，谢谢阅读。

翻译自: https://medium.com/better-programming/exploring-constraintlayout-2-0-in-android-317584003ee9