• Exploring ConstraintLayout 2.0 in Android
  • Originally written by Siva Ganesh Kantamani
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: keepmovingljzy
  • Proofreader: Regon-Cao, happySteveQi

Explore ConstraintLayout 2.0 in Android

introduce

ConstraintLayout is one of the powerful Jetpack libraries that developers can use with Android Studio’s built-in interactive tools to quickly create complex and responsive layouts while previewing the XML layout.

One of the great advantages of ConstraintLayout is that we can use a single-layer view hierarchy (no nested views) to build complex layouts. With fewer layers of views drawn, performance naturally improves.

Some key features of ConstraintLayout

  1. We can specify the relative position of the view.
  2. We can use offsets or other views to center the view.
  3. We can specify the width to height ratio of the view.
  4. We can group and link views.

Some auxiliary layouts

Secondary layouts are layouts that are invisible to the user, but make it easy for developers to align views.

  • Guideline
  • Barrier
  • Placeholder

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

ConstraintLayout 2.0

Now that you have a good understanding of its history, it’s time to integrate ConstraintLayout V2.0 into your project. To introduce it, add the following dependencies to the build.gradle file.

The implementation of "androidx. Constraintlayout: constraintlayout: 2.0.1"Copy the code

This release brings several new features to ConstraintLayout. Let’s look into it right away.

Flow

Flow is a new virtual layout mode in VERSION V2, similar to group in version V1. It is a combination of Chain and Group layouts with special features. In short, Flow dynamically links views at run time based on the size of the layout.

Like a Group, a Flow is the behavior of a Chain by taking the ID of the view. One of the important advantages of using Flow layout is wrapMode, a way to configure a view when it overflows. Add this layout property to use, and you can choose from three modes: None, aligned, and Chain.

  • [wrap none](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow#wrap_none) : All referenced views form a chain
  • [wrap chain](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow#wrap_chain): Create multiple chains (one after the other) only if the referenced view does not fit
  • [wrap aligned](https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow#wrap_aligned)And:wrap chainSimilar, but the view will be aligned by creating rows and columns

      
<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>
Copy the code

This seems simple enough, but we can use ConstraintLayout 2.0 to create a streaming layout. Other streaming layout libraries are no longer required.

Before ConstraintLayout 2.0, we had to calculate the free space after rendering each view to determine whether the next view had enough space to fit in, or we had to align it to the next line. But for now we just need to use Flow.

To learn more about Flow, read the official documentation.

Layer

Layer is the new helper layout in ConstraintLayout 2.0, similar to the helper layout of Guideline and Barrier. We can do this by creating a virtual Layer, similar to a Layer with multiple subviews. Once the child views refer to the parent view, we can use Layer to convert these views.

It is similar to a Group layout in that you can bind multiple views and set their visibility (visible and disappear) and other basic operations. Once the view is referenced by Layer, our view can use the transformations Layer gives us. We can rotate, pan, scale, or animate multiple views.

<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"
        />
Copy the code

MotionLayout

MotionLayout is a subclass of ConstraintLayout that inherits all the best features of its parent class, is fully declarative, and is capable of implementing complex transformations in XML. It is backward compatible from API 14, which means it is compatible with 99% of applications.

The new MotionLayout editor for Android Studio 4.0 makes it easy to use MotionLayout. It provides a great scene for transition, MotionScenes, etc.

To learn more about MotionLayout, read this article.

That’s it. Hopefully you learned something useful. Thanks for reading.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.