ConstraintLayout is a new feature in AndroidStudio2.2, so what is it? ConstraintLayout is a good way to optimize layout, and we envy IOS’s drag-and-drop XML page implementation. Of course, I’m talking about optimizing the previous layout, which is what Google is trying to do

start

ConstraintLayout to use ConstraintLayout, the AS version must be updated to 2.2 or higher (I do this almost everywhere) and you need to add a ConstraintLayout dependency to your app/build.gradle file

implementation 'com. Android. Support. The constraint, the constraint - layout: 1.1.2'
Copy the code

Add Google () to the project’s build.gradle file, buildScript, and AllProjects repositories

allprojects {
    repositories {
        google()
        jcenter()
    }
}
Copy the code

The synchronization can then happily use ConstraintLayout

First we study the sequence according to the Google docs https://developer.android.com/reference/android/support/constraint/ConstraintLayout first come a wave of the API

1. Layout_constraint [target control location]_to[target control location]Of=="[target control ID]"

  • 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

For example, layout_constraintLeft_toLeftOf means that the Left of the current control is on the Left of the target control. If the target control is the parent control, the ID can be written as parent. For example, to implement control B to the right of control A, set layout_constraintLeft_toRightOf in control B. The left side of control B is on the right side of control A

2. Margins

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

This is the same as the other viewGroup attributes, except for the following:

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

The goneMargin property allows the control to set a margin value after the target control has GONE

3. Bias

  • `layout_constraintHorizontal_bias“
  • layout_constraintVertical_bias

This property means that you can use the bias property to adjust positioning to bias one side to the other, namely the control distance left/right percentage (layout_constraintHorizontal_bias) and distance up/down percentage (layout_constraintVertical_bias)

4. WRAP_CONTENT : enforcing constraints (* Added in 1.1*)

constraint

  • App: layout_constrainedWidth = "true | false"
  • App: layout_constrainedHeight = "true | false"

True prevents constraint invalidation. The default is false, for example: App :layout_constraintLeft_toRightOf=”@+id/ A “, but as the content of A grows and exceeds the distance to the right of the parent control, constraint failure occurs so that part of B is not to the right of A. If B sets this property to true, B always appears to the right of A and no constraint invalidation occurs

5. Ratio

app:layout_constraintDimensionRatio="H,16:9"
Copy the code

It goes without saying that the percentage layout is a common adaptive layout on Android where H or W stands for height or width

6. Guideline

Layout_constraintGuide_begin Distance from the starting position of the parent container (left or top)

Layout_constraintGuide_end Distance from the end of the parent container (right or bottom)

Layout_constraintGuide_percent Percentage of the width or height from the parent container

It’s easy to understand, for example

  <android.support.constraint.Guideline
        android:id="@+id/guide1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/guide1" />
Copy the code

Draws a base directrix in the vertical direction (just a reference line, not a view drawing) and other controls can be placed against this line

7. Barrier

<android.support.v7.widget.AppCompatButton
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="a" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bbbbbbbbbbbbbbb"
        app:layout_constraintTop_toBottomOf="@+id/a" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="c"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="a,b" />
Copy the code

Obviously, you can treat it as a container, constraint_referenced_ids= control ID, and then treat the controls as a whole

8. Group

You can view a Barrier as a container, but it controls the visibility and invisibility of all controls in the container. For example, Android :visibility=”gone”, and all controls surrounding it will be gone.

ConstraintLayout’s Api is not the only one that needs to be used, and you’ll find it really handy

reference

Android development document [Developer] [developer.android.com/reference/a…].