“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Introduction to the

ConstraintLayout Google officially implements ConstraintLayout as the default layout file Root. ConstraintLayout is an effective way to solve the problem of visually writing interfaces and nesting layouts. When we write interfaces, complex layouts are often accompanied by multiple layers of nesting, and the more nesting, the worse the performance of the application. ConstraintLayout uses constraints to specify the position and relationship of each control, similar to but far more powerful than a RelativeLayout.

Introduction to the

View has four directional constraints, and only four basic attributes are required to use ContraintLayout

app:layout_constraintBottom_toBottomOf
app:layout_constraintEnd_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintTop_toTopOf
Copy the code

The above constraint is to constrain the View within the target View, then in fact can deduce the situation outside

app:layout_constraintBottom_toTopOf
app:layout_constraintEnd_toStartOf
app:layout_constraintStart_toEndOf
app:layout_constraintTop_toBottomOf
Copy the code

The Value can be parent or the ID of a View.

usage

Here is a detailed look at the use of ContraintLayout.

The relative position

The use of relative position has been introduced above

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
     app:layout_constraintLeft_toRightOf="@+id/buttonA" />
Copy the code

Baseline constraints:

App: layout_constraintBaseline_toBaselineOf / / the default parentCopy the code

Can be used to keep text aligned between two views of different sizes.

The relative position constraint attributes include

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
Copy the code

Both constraints are accomplished by specifying Value as parent or the ID of a View.

<Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toLeftOf="parent" />
Copy the code

From the outside Margin

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
Copy the code

GONE constraints

When a control is hidden, you can set a different constraint

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
Copy the code

Center and offset

Center the View

<android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button" ... app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent/> </>Copy the code

Drift Bias,

You can use the following two properties

layout_constraintHorizontal_bias
layout_constraintVertical_bias
Copy the code

After centering the View horizontally, you can set the bias Value of the View to offset it in one direction. The Value ranges from 0 to 1.0. The default Value is 0.5.

<android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button" ... App: layout_constraintHorizontal_bias = "0.3" app: layout_constraintLeft_toLeftOf = "parent" app:layout_constraintRight_toRightOf="parent/> </>Copy the code

Circular positioning (Internet 1.1)

The constraint can be set to the center point of another View

Layout_constraintCircle: indicates the ID of another View. Layout_constraintCircleRadius: indicates the radius. Layout_constraintCircleAngle: indicates the Angle from 0 to 360Copy the code

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />
Copy the code

Visible behavior

ConstraintLayout has special handling for a View labeled view.gone.

Normally, GONE Spaces are not displayed and removed from layout. But it is still handled in the calculation layout.

  • Its size is treated as 0 and is resolved as a point
  • If other views use it as a constraint, it will still be processed, and the View’s Margin will be treated as 0

ConstraintLayout:

  • A becomes A point after GONE, and the relative constraint of B’s use of A still applies;
  • If you do not want A to retain the constraint after GONE, you can use the properties associated with GONE

The size constraint

You can set the minimum size of the View

android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout
android:maxWidth set the maximum width for the layout
android:maxHeight set the maximum height for the layout
Copy the code

WRAP_CONTENT 

MATCH_CONSTRAINT 

When size is set to MATCH_CONSTRAINT, the default behavior is to make the generated size occupy all available space, and multiple additional modifiers can be set:

  • layout_constraintWidth_min and layout_constraintHeight_min: Sets the minimum size
  • layout_constraintWidth_max and layout_constraintHeight_max: Sets the maximum size
  • layout_constraintWidth_percent and layout_constraintHeight_percent: Sets the size proportional to parent

Percentage size

  • Set MATCH_CONSTRAINT to 0dp
  • Set app:layout_constraintWidth_default=”percent” or app:layout_constraintHeight_default=”percent”
  • Set layout_constraintWidth_percent or layout_constraintHeight_percent to 0 to 1.0

Proportional constraints

Set either layout_width or layout_height to 0dp, and set the Ratio value by layout_constraintDimensionRatio

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

The example sets the height of the space to be the same as the width.

\

If both dimensions are set to 0dp, you can set the Value based on the ratio of one attribute to the other by adding w or h to the Value of app:layout_constraintDimensionRatio, respectively. For example,

<Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>
Copy the code

The example sets the aspect ratio to 16:9 with varying height and adaptive width

Constraint chain

A set of mutually constrained views can be formed into a constraint chain.

The View at the front of the constraint chain is called the header

type

  • CHAIN_SPREAD— The default, the element will be expanded
  • Weighted chain – inCHAIN_SPREADIf the View has MATCH_CONSTRAINT set, they will partition the available space
  • CHAIN_SPREAD_INSIDEElements do not expand
  • CHAIN_PACKEDElements are packed together, and the offset property of the resource degree affects the position of the View throughout the package

\