• Introducing Constraint Layout 1.1
  • Written by Sean McQuillan
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Moosphon
  • Proofreader: AndroidXiao LeeSniper

ConstraintLayout simplifies creating complex layouts on Android by using the visual editor in Android Studio to generate most of your UI for you. It is often described as the more powerful RelativeLayout. By using constrained layouts, you can define complex layouts without creating complex view hierarchies.

Constraint Layout was recently released in stable version 1.1 and quickly received a lot of positive reviews. Improvements across the board allow most layouts to run faster than before, and new features like barriers and groups make real-world design simple!

Android Gradle

dependencies {
    compile 'com. Android. Support. The constraint, the constraint - layout: 1.1.0'
}
Copy the code

If you want to use new features in your project, you need to add ConstraintLayout version 1.1 as a dependency.

New in version 1.1

The percentage

In constrained layout 1.0, you needed to use two bootlines to make the view occupy the screen in percentage terms. With Constrained Layout 1.1, things get easier by allowing you to easily limit any view to a percentage width or height.

Use a percentage to specify the width of the button in order to fit the available space while maintaining the design.

All views support the layout_constraintWidth_percent and layout_constraintHeight_percent attributes. These will cause constraints to be fixed at the specified percentage of available space. So, with a few lines of XML code, you can expand a Button or TextView and fill the screen with percentages.

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_percent="0.7" />
Copy the code

The chain

Placing multiple elements with chains lets you configure how they fill the available space. In version 1.1, we have fixed some issues with the chains and made them able to handle more views. You can generate a chain by adding constraints on both sides. In the animation below, for example, there is a constraint between each view.

With spread, Spread_inside and Packed, chains enable you to configure how to lay out multiple related views.

App :layout_constraintVertical_chainStyle property can be applied to any view in the chain. You can set its value to spread, spread_inside, or Packed.

  • Spread: Evenly distributes all views in the chain
  • Spread_inside: Place the first and last element on the edge and evenly distribute the rest of the elements
  • Packed: Wraps the element around the center of the chain

barrier

If you have several views that change size at run time, you can use the barrier capability to constrain elements. You can place barriers at the beginning, top, end, or bottom of several elements. You can think of it as a way to make a virtual group, because it doesn’t add the group to the view hierarchy.

Barriers are useful when laying out internationalized strings or displaying user-generated content of unpredictable size.

Barriers allow you to create a constraint across several views.

The barrier will always keep itself out of the virtual group, and you can use it to restrict other views. In the example above, the right view is restricted to always being at the end of the largest text view.

group

Sometimes you need to show or hide multiple elements at once. To support this, constraint layout adds group functionality.

A group doesn’t add to the hierarchy of views — it’s really just a way of marking up views. In the following example, we mark profile_name and profile_image for reference in the ID profile.

This is useful when you have multiple elements that need to be displayed or displayed together.

<android.support.constraint.Group
    android:id="@+id/profile"
    app:constraint_referenced_ids="profile_name,profile_image" />
Copy the code

After defining a group named profile, you can set visibility for the group and apply it to profile_name and profile_image.

profile.visibility = GONE

profile.visibility = VISIBLE
Copy the code

Circular constraints

In constraint layout, most constraints are specified by screen size — horizontal and vertical. In constraint Layout version 1.1, there is a new type constraint constraintCircle that allows you to specify constraints along a circle. Instead of providing horizontal and vertical margins, you specify the Angle and radius of the circle. This will be useful for angle-offset views like the Radial menu!

You can create a radial menu by specifying the radius and Angle to offset.

When creating the circular constraint, note that the Angle starts at the top and proceeds clockwise. In this example, you specify the fab in the middle as follows:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/middle_expanded_fab"
    app:layout_constraintCircle="@+id/fab"
    app:layout_constraintCircleRadius="50dp"
    app:layout_constraintCircleAngle="315" />
Copy the code

Constraint sets and animations

You can use ConstraintLayout with ConstraintSet to animate multiple elements at once.

A ConstraintSet holds only one ConstraintLayout constraint. You can create a ConstraintSet in your code or load it from a layout file. You can then apply ConstraintSet to ConstraintLayout, updating all constraints to match the constraints in ConstraintSet.

To make its animation effects, please use the support library in TransitionManager. BeginDelayedTransition () method. This feature will animate all layout updates in your ConstraintSet.

Here’s a video that covers the topic in more depth:

  • YouTube video link: https://youtu.be/OHcfs6rStRo

New optimization

Constrained Layout version 1.1 has added several new optimization points to speed up your layout. These optimization points run as a single channel and try to reduce the number of constraints required for the layout view.

In general, they work by looking for constants in the layout and simplifying them.

There is a new TAB called layout_optimizationLevel to configure the optimization level. It can be set to the following:

  • Barriers: Identify where the barriers are and replace them with simple constraints
  • Direct: Optimize elements that are directly connected to fixed elements, such as screen edges or bootlines, and continue to optimize any elements that are directly connected to them.
  • Standard: This is the default optimization level that includes barriers and Direct.
  • Dimensions: Is currently experimental and may have problems with certain layouts — it optimizes layout delivery by calculating dimensions.
  • Chains: Currently in experimental stage and figuring out how to arrange chains of fixed size.

If you want to experimentally optimize dimensions and Chains as described above, you can enable them in ConstraintLayout using the following code:

<android.support.constraint.ConstraintLayout 
    app:layout_optimizationLevel="standard|dimensions|chains"
Copy the code

Like this article? How about a little encouragement for Sean McQuillan.

To learn more

  • Using constrained layout to construct responsive UI | Android Developers
  • Constraint layout | Android Developers
  • Use constraint layouts to design your Android view

For more information on constraint layout version 1.1, check out the documentation and Code Lab!

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.