ConstrainLayout’s advantages over other layouts

  1. Reduce layout nesting and speed up rendering.

  2. Visual editing.

  3. Provides the percentage attribute, can easily achieve the UI percentage adaptation.

  4. It’s more flexible than RelativeLayout, has more powerful constraint properties, and can achieve a variety of effects.

ConstrainLayout The utility property for the layout

More powerful.”LinearLayout“

chain

As shown, the first constraint precedes the parent layout and the second constraint follows. The second constrains the first and the third. The third precedes the second, and the second constrains the parent layout. Can generate a horizontal chain (vertical chain constraints),

The first app in the chain can be set :layout_constraintHorizontal_chainStyle=” XXX “default spread

  1. spread: Divide the remaining space equally as the interval (including the first and last space)

  1. Spread_inside: Average out the remaining space as spacing

  2. Packed: Combines elements together

weight

If you use these two attributes also support app:layout_constraintVertical_weight=” XXX “the effect is similar to the LinearLayout weight assigning setting weight space to the element. You also need to set the width or height to 0DP (MATCH_CONSTRAINT) for this to work

Here is the effect of setting weight to 1, 2 and 3 respectively

Multiple elements are collectively centered on an element

We simply chain several elements together using the chain described above, then bind the first start to the start of the target element, and the last end to the end of the target element.

bias

Can be used when constraints are placed on the left, right, or bottom of an element

App :layout_constraintHorizontal_bias=”XXX” app:layout_constraintVertical_bias=”XXX”

If we want to align the whole thing to the left we can set app:layout_constraintHorizontal_bias=”0″ as shown below

Percentage fit scheme

guideline

This is available in constraintLayout

<androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"// It can be usedvertical|horizontalVertical or horizontalguideline
    app:layout_constraintGuide_percent="0.1"// The ratio of the position in the parent layout />
Copy the code

This is a guideline 10 percent horizontal perpendicular to the parent layout

Ok, so with this we can scale the guideline in the parent layout and just let our space be constrained to the guideline

For example, if we want to get an image with 50% of the screen width, we can set the guideline at 25% and 75%, respectively, and then set the guideline to left and right and set the width to 0dp (MATCH_CONSTRAINT)

dimensionRatio

We all know that there are many types of Screen size ratios for Android phones. Just using Guideline alone, we can’t achieve a 1:1 width and height image

But we can solve this problem by using app:layout_constraintDimensionRatio=”W:H”

This property sets the aspect ratio of our control, provided that at least one of our width and height is 0dp.

For example, if we want to get a 1:1 image using the image above as an example, we just need to add app:layout_constraintDimensionRatio=”1:1″.

This property can also be used in the layout of our cards

Let’s say we’re going to get a card like this

We can draw the left and right guideline and set app:layout_constraintDimensionRatio=”W:H” according to the width and height of the design

width_percent|height_percent

It turns out that we need to specify two guidelines each time to determine the size of the controls. If we have a complex layout, our layout will have a lot of guidelines

So we can use app:layout_constraintHeight_percent=”XXX” and app:layout_constraintWidth_percent=”XXX”

Take the card above, which is 0.936 of the screen width according to the design so we can set app:layout_constraintWidth_percent=”0.936″

So we can get rid of the guidline

For example,

So first we set the guideline

We set a total of 5 guidelines so that we can determine the general position of our layout

    • So we set app:layout_constraintWidth_percent=”0.142″

    • App :layout_constraintDimensionRatio=”1:1″

    • Top and start constrain to two boot lines

    • Two TextViews are connected into a vertical chain with a Style of Packed.
    • Top constraint 1 top, butTom constraint 1 butTom, start constraint to boot line.
    • Then set the margin between textViews.
    • Here’s the code.
<TextView
    android:id="@+id/tv_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Longines"
    app:layout_constraintBottom_toTopOf="@id/tv_2"
    app:layout_constraintStart_toStartOf="@id/v_guideline2"
    android:layout_marginBottom="2dp"
    app:layout_constraintTop_toTopOf="@id/image1"
    app:layout_constraintVertical_chainStyle="packed" />

<TextView
    android:id="@+id/tv_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="187 items updated in the last 7 days"
    app:layout_constraintBottom_toBottomOf="@id/image1"
    app:layout_constraintStart_toStartOf="@id/tv_1"
    app:layout_constraintTop_toBottomOf="@id/tv_1" />
Copy the code
    • Let’s start with a chain of four images with the style “spread_inside”.
    • The start constraint on the first image is to the boot line, the end constraint on the last image is to the boot line, and the others are to each other.
    • According to the design draft picture width accounts for 0.165 so we setApp: layout_constraintWidth_percent = "0.165"
    • Width to height ratio 1:1 settingapp:layout_constraintDimensionRatio="1:1"
    • The code for the first ImageView is as follows and the others are similar
    <ImageView
    android:id="@+id/img1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1"
    app:layout_constraintEnd_toStartOf="@id/img2"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toEndOf="@id/v_guideline2"
    app:layout_constraintTop_toTopOf="@id/h_guideline2"
    app:layout_constraintWidth_percent="0.165" />
Copy the code

The final effect is as follows

Other layouts can use similar methods to achieve equal scale layout, but this scheme is still insufficient

  1. Font size cannot be displayed to scale
  2. Margin cannot be set to scale