Constraint layout

Constrained layout concept

ConstraintLayout lets you create complex, large layouts using flat view hierarchies (no nested view groups). It is similar to RelativeLayout in that all views are laid out according to the relationship between sibling views and parent layouts, but it is more flexible than RelativeLayout and easier to work with Android Studio’s layout editor.

To define the position of a view in ConstraintLayout, you must add at least one horizontal constraint and one vertical constraint to the view. Each constraint represents how it is connected or aligned with other views, parent layouts, or invisible bootlines. Each constraint defines the position of the view on the vertical or horizontal axis; So each view must have at least one constraint on each axis, but more constraints are often required.

When you drag and drop a view into the layout editor, it stays where you put it, even without any constraints. However, this is just for ease of modification; When you run the layout on the device, if the view has no constraints, it is drawn at position [0,0] (upper left corner).

As of Android Studio 2.3, official templates are used by defaultConstraintLayout

ConstraintLayoutAdd to the project

To use ConstraintLayout in your project, follow these steps:

  1. Make sure your maven.google.com codebar is declared in the module-level build.gradle file

     repositories {
       google()
    }
Copy the code

    2 Add the library as a dependency to the same file, as shown in the following example. Note that the latest version may be different from the one shown in the example:

    dependencies {
    implementation "Androidx. Constraintlayout: constraintlayout: 2.0.4."
}
Copy the code

Transform the layout

To convert an existing layout to a constrained layout, follow these steps:

  1. Open your layout in Android Studio, then click on the Design TAB at the bottom of the editor window.

  2. In the ComponentTree window, right-click the layout and click Convert Layout to ConstraintLayout.

ConstraintlayoutThe basic use

Relative positioning, baseline

  • 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/ / base line
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

In the middle

  • app:layout_constraintBottom_toBottomOf=parent

  • app:layout_constraintLeft_toLeftOf=parent

  • app:layout_constraintRight_toRightOf=parent

  • app:layout_constraintTop_toTopOf=parent

margin

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

Hide the margin

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

The offset (Bias)

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

Angle positioning

  • layout_constraintCircle: Sets a control ID
  • layout_constraintCircleRadius: Set radius
  • layout_constraintCircleAngle: Control Angle (in degrees, from 0 to 360)

Width and height constraint Ratio

Raito can generate the size of one side of the control based on the weight of the other. Ration must set the width and height of a control to ODP (MATCH_CONSTRAINT).

<Button Android :layout_width="wrap_content" Android :layout_height="0dp" app:layout_constraintDimensionRatio="1:1" />Copy the code
// High ratio 16: 9 <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

chain

App: layout_constraintVertical_chainStyle = “, “app: layout_constraintHorizontal_chainStyle =” “

  • CHAIN_SPREAD: kind of like the LinearLayout elements set the proportion of 1:1:1 average distribution.
  • CHAIN_SPREAD_INSIDE:The elements on both sides of the chain are to the side, and the elements within divide the distance equally.
  • CHAIN_PACKEDThe elements of the chain are next to each other.

Auxiliary tool

The Optimizer Optimizer

app:layout_optimizationLevelOptimization configuration items exposed to use constraint layouts

  • None: no optimization is enabled
  • Standard: Optimizes only direct and barrier constraints (default)
  • Direct: Optimizes direct constraints
  • Barrier: Optimizes barrier constraints
  • Chain: Experimental Optimization
  • Dimensions: Optimization of experimental measurement, reducing the measurement of nodes matching constraint layout

Obstacle Barrier

app:barrierDirection=""

A bit like a weakened (lightweight) base line creates a virtual line at the farthest point of the line by setting the direction of the base line to act as a blocking line.

<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">

   <androidx.constraintlayout.widget.Barrier
       android:id="@+id/barrier"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:barrierDirection="start"
       app:constraint_referenced_ids="button9,button10,button11" />

   <Button
       android:id="@+id/button9"
       android:layout_width="65dp"
       android:layout_height="50dp"
       android:text="Button"
       tools:layout_editor_absoluteX="108dp"
       tools:layout_editor_absoluteY="341dp" />

   <Button
       android:id="@+id/button10"
       android:layout_width="203dp"
       android:layout_height="49dp"
       android:text="Button"
       tools:layout_editor_absoluteX="84dp"
       tools:layout_editor_absoluteY="242dp" />

   <Button
       android:id="@+id/button11"
       android:layout_width="146dp"
       android:layout_height="49dp"
       android:text="Button"
       tools:layout_editor_absoluteX="71dp"
       tools:layout_editor_absoluteY="437dp" />


</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Group

Groups can agree to control the visible state of a referenced collection of controls.

<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">


   <androidx.constraintlayout.widget.Group
       android:id="@+id/group"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:constraint_referenced_ids="button9,button10,button11" />

   <Button
       android:id="@+id/button9"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"
       tools:layout_editor_absoluteX="46dp"
       tools:layout_editor_absoluteY="241dp" />

   <Button
       android:id="@+id/button10"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"
       tools:layout_editor_absoluteX="171dp"
       tools:layout_editor_absoluteY="241dp" />

   <Button
       android:id="@+id/button11"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"
       tools:layout_editor_absoluteX="296dp"
       tools:layout_editor_absoluteY="237dp" />


</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Lines on Guideline

// Parent start is used as the edge

app:layout_constraintGuide_begin=""

// start the calculation with parent end as edge

app:layout_constraintGuide_end=""

// The percentage position

app:layout_constraintGuide_percent=""

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="196dp" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="336dp" />
Copy the code

Placeholder Placeholder

<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">

   <androidx.constraintlayout.widget.Placeholder
       android:id="@+id/placeholder"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:content="@+id/textview"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <ImageView
       android:id="@+id/textview"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/ic_launcher_background"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:onClick="toSetGoneWithPlaceHolder"
       />


</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Placehoder provides a virtual (empty) control, but it can be a control whose layout already exists

Use the setContent() method to set the ID of another control on placehoder. Placehoder becomes the content that sets the control ID and is hidden from view if the control displaying the content exists on the screen

Display content via PlaceHolder parameters.

Setting constraint Layout

You can set the properties of the constraint layout in code

ConstraintSet c = new ConstraintSet(); C. lone(mContext, r.layout.mine_info_view); // Add or replace behavior parameter c.setVerticalChainStyle(usernameView.getid (),chain); / / execution c.a. pplyTo (enclosing < ConstraintLayout > the findViewById (R.i, dc onstraintlayout));Copy the code