Project requirements discussion - ConstraintLayout detailed use tutorial

digression

ConstraintLayout there are tons of articles online about ConstraintLayout, and ConstraintLayout came out in ’16, but I haven’t tried to use it (don’t ask me why I haven’t, because I’m lazy, of course). After all, the LinearLayout is used with a RelativeLayout, but it can reduce the nesting of the layout. Or to embrace the way to learn more to contact. So write the article as a conclusion.

preface

AS is known to write layouts in two ways:

1. Drag and drop

This is where you drag and drag controls, because in the old days of RelativeLayout and LinearLayout it automatically added properties, and it was very inconvenient, but it’s very convenient to add constraints to interpret tLayout. And the function panel here has also added a lot of new functions, a lot of convenience.

ConstraintLayout is used by drag and drop on the panel here

2. Write code

This is more common, and I’m going to write code more directly here.

The body of the

How does a control determine its position

1. Directly determine the coordinates of the upper left corner of the control

In constrained layout, how can a control determine its position? Some people might say that just write it in the interface (XXX,XXX) position.

For example, in the drag-and-drop interface, we drag a TextView into the middle of the interface.

We notice that the TextView is indeed in the middle, so let’s look at its code:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Where am I?"
        tools:layout_editor_absoluteX="164dp"
        tools:layout_editor_absoluteY="263dp" />


</android.support.constraint.ConstraintLayout>
Copy the code

What we found:

tools:layout_editor_absoluteX="164dp"
tools:layout_editor_absoluteY="263dp"
Copy the code

It is true that we tell the coordinates of the upper left corner of the TextView, and the TextView can determine the position, but these two attributes are purely for demonstration, and are invalid on the real computer. Just like “Tools :text”, it is convenient to see the text displayed by the TextView when writing the layout. But when you actually run the app, you don’t have that.

We can also see an error in the layout file that tells us to jump to the position (0,0) in real time:

This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints less…

2. Tell the position of two adjacent edges to the control

As shown below:

How do we locate them? For example, for the red rectangle A, do we tell it: your left side is next to the left side of the outer interface, and your top side is next to the top side of the outer interface? The green rectangle B can be told: your right side is next to the right side of the outer interface, and your bottom side is next to the bottom side of the outer interface.

So the basic operation is: determine the position of two sides of a control (such as next to which control).

Let’s look at the simplest basic operation: layout_constraint[own location]_[target location]=”[target 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
Copy the code

Here’s an example:

For example, the position of button A has been determined. Now we want to put the B button, just as we said above, the position of the two sides of the B button, we can set the left side of the B button to be next to the right side of the A button (equivalent to the left side of the B button and the right side of the A button are in the same position).

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

We can see app:layout_constraintLeft_toRightOf=”@+id/buttonA”, the left of B is in the same position as the right of the control whose ID is buttonA. So the left side of B is stuck to the right side of A.

We found another one on itlayout_constraintBaseline_toBaselineOfTo understand all the related attributes, look directly at the following image:

If it is relative to the parent layout, we can also write the parent value instead of the other control’s ID value

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

So that’s the basic operation. Let’s look at some other special properties.

Margin value related

For example, our A and B buttons are splice together by app:layout_constraintLeft_toRightOf, but I also want some space between the A and B buttons, as shown below:

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

If A’s visible is gone, B’s position will automatically move to the left. Because the width of A is gone (but the constraints of A on other controls are still there)

gone

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

Copy the code

Position constraints have more than two edges

As mentioned above, once the position of the two edges is determined (or constrained), we can determine the corresponding position of the control, and we can continue to adjust the position of the control by changing the margin. What if I have a three-edge constraint or a four-edge constraint, like:

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

We align the left side of the button with the left side of the parent layout and align the right side of the button with the right side of the parent layout. This is because instead of just one side being aligned, two sides on the same line are constrained. Therefore, the button can not be close to either the left or right boundary, so the button will be in the middle of the two constraint boundaries. As shown below:

layout_constraintHorizontal_bias
layout_constraintVertical_bias
Copy the code

It’s the proportion in the horizontal and vertical direction.

<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/>
</android.support.constraint.ConstraintLayout>
Copy the code

Circular layout

For some requirements, we might want the control to be centered around a control, as shown in the following figure:

Layout_constraintCircle: refers to the ID of another control layout_constraintCircleRadius: distance from the center of another control layout_constraintCircleAngle: At which Angle (from 0 to 360 degrees)Copy 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

(Dimensions constraints)

1. Restrict ConstraintLayout:

You can define a minimum and maximum size for ConstraintLayout itself:

Android: minWidth Sets the minimum width of the layout. Android: maxWidth sets the maximum width of the layoutCopy the code

These minimum and maximum sizes will be used in ConstraintLayout

2. Restrict internal controls:

You can specify the size of a control by setting the Android: layout_width and Android: layout_height properties in three different ways:

Use specific values (such as 123DP, etc.)
With WRAP_CONTENT, it asks the control to calculate its own size
Use 0DP, equivalent to “MATCH_CONSTRAINT”

WRAP_CONTENT (added in 1.1)

If set to WRAP_CONTENT, in versions prior to 1.1, the constraint did not limit the size values generated. But in some cases, you might need to use WRAP_CONTENT, but still enforce constraints to limit the size values that are generated. In this case, you can add a corresponding attribute:

Application: layout_constrainedWidth true | = "false" application: layout_constrainedHeight true | = "false"Copy the code

MATCH_CONSTRAINT size (that is, 0DP) (added in 1.1)

When set to MATCH_CONSTRAINT, the default size is to take up all available space. There are several additional modifiers available:

Layout_constraintWidth_min and layout_constraintHeight_min: Layout_constraintWidth_max and layout_constraintHeight_max will set the minimum size for this dimension: Layout_constraintWidth_percent and layout_constraintHeight_percent: Sets the size of this dimension to the percentage of the parentCopy the code

Dimensions (Percent Dimensions)

ConstraintLayout is match_constraint. The default behavior of a control set to 0DP is to spread and fill up the available space. But this behavior can be set with the layout_constraintWidth_default attribute. In ConstraintLayout 1.0.x, this property can also be set to wrap. At 1.1.x, it has a new value, Percent, which allows us to set the percentage of free space that the control takes up.

(note: This is required for layout_constraintWidth_default in 1.1-beta1 and 1.1-beta2, but not in the following versions if the percent attribute is defined, Then set the layout_constraintWidth_percent or layout_constraintHeight_percent property to a value between 0 and 1.)

The following TextView control will occupy 50% of the remaining width and 50% of the remaining height:

  <TextView
    android:id="@+id/textView6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.5"
    
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.5" />
Copy the code

Ratio of width to height

You can also control the height or width values of a control so that one value is proportional to the other. To do this, you need to set at least one value to 0dp (that is, MATCH_CONSTRAINT) and set the attribute layout_constraintDimensionRatio to the given ratio. Such as:

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

So the width and height of the button are the same size.

Ratio can be set to:

Floating point value representing the ratio between width and height
Ratio of the form “width: height”

Ratios can also be used if both dimensions are set to MATCH_CONSTRAINT (0DP) : in this case, the system sets the maximum size that satisfies all constraints and maintains the specified aspect ratio.

To constrain a particular edge, you can limit the width or height according to the size of the other side: You can indicate which side should be constrained by prefixing the ratio with the letter W (for limiting the width) or H (for limiting the height) separated by commas:

<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 height of the button is set in a 16:9 ratio, and the width of the button matches the constraints of the parent layout.

Chain (Chains)

Chains provide group-like behavior in a single axis (horizontal or vertical).

Create a chain:If a set of widgets are linked together by a two-way connection, they are considered to be a chain, as shown below, the smallest chain with two controls:
Chain:Chains are controlled by attributes set on the first element of the chain (the “head” of the chain) :

(The head is the leftmost part of a horizontal chain and also the top part of a vertical chain.)
Chain style:Sets the property on the first element of the chainlayout_constraintHorizontal_chainStyleorlayout_constraintVertical_chainStyle, the behavior of the chain changes based on the specified style (default: CHAIN_SPREAD).

Such as:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.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">
    

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AAAA"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView3"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BBBB"
        app:layout_constraintEnd_toStartOf="@id/textView4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CCCC"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>
Copy the code

The effect is as follows:

Barrier (Barrier)

A Barrier is a virtual helper control that prevents one or more controls from crossing it, like a Barrier. When a control tries to cross itself, the Barrier moves automatically, preventing it from being overwritten.

ConstraintLayout Barrier is the Barrier to interpret this control.

Group (Group)

Group helps you set up a set of controls. The most common case is to control visibility for a set of controls. You simply add the control ID to the Group and you can operate on all the controls in the Group at the same time.

<android.support.constraint.ConstraintLayout ... > < TextView android: id = "@ + id/text1"... / > < TextView android: id = "@ + id/text2." ". / > < android. Support. The constraint. The Group android: id = "@ + id/Group"... App: constraint_referenced_ids = "text1, text2" />
</android.support.constraint.ConstraintLayout>
Copy the code

SetVisibility (view.gone); Text1 and text2 will not be visible.

Guideline

A utility class for an auxiliary object of ConstraintLayout. Guideline is not displayed on the device (they are labeled view.gone) and is only used for layout. They can only work in ConstraintLayout.

Guidelines can be horizontal or vertical: vertical guidelines have a zero width, and their ConstraintLayout parent has a zero height. Horizontal guidelines have a zero height, and their ConstraintLayout parent has a zero width.

Specify a fixed distance to the left or top of the layout (layout_constraintGuide_begin)
Specify a fixed distance from the right or bottom of the layout (layout_constraintGuide_end)
Specifies a percentage of the layout’s width or height (layout_constraintGuide_percent)

The corresponding code is the setGuidelineBegin (int, int), setGuidelineEnd (int, int), and setGuidelinePercent (int, float) functions.

The control can then be constrained by the Guideline. (In other words, by making a hidden View to constrain our controls, our controls are relatively easy to position).

Examples of buttons restricted to vertical Guideline:

<android.support.constraint.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">

    <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="vertical"/>

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Copy the code

Placeholder

New Features in ConstraintLayout 1.1.x I Placeholder content will also be reproduced in this article inside the example:

Placeholder, as the name suggests, is a Placeholder that can set its content to interpret tLayout as other views within the Placeholder. So it’s used to write templates for layouts, and it can also be used to dynamically modify the content of the UI.

Template: We create a template named template.xml with Placeholder:

We include the template we just defined into the actual layout file, and add the actual controls to the layout file. Note that the controls here don’t need to add any constraints, because their positions are Placeholder.

Another point is that the template should come before any controls referenced:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.app.androidkt.constraintlayoutb.MainActivity"
    tools:showIn="@layout/activity_main">
    <include layout="@layout/template" />
    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/place_holder_demo" />
    
    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_save_black_24dp" />
 
    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_edit_black_24dp" />
 
    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
 
        app:srcCompat="@drawable/ic_cancel_black_24dp" />
 
    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
 
        app:srcCompat="@drawable/ic_delete_black_24dp" />
 
 
</android.support.constraint.ConstraintLayout>
Copy the code

PlaceHolder also allows you to dynamically replace your own content in Java code:

public class MainActivity extends AppCompatActivity {
  private Placeholder placeholder;
  private ConstraintLayout root;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); . } public void onClick(View view) { placeholder.setContentId(view.getId()); }}Copy the code

When combined with transition animations, some interesting effects can be achieved:

public class MainActivity extends AppCompatActivity {
  private Placeholder placeholder;
  private ConstraintLayout root;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); . } public void onClick(View view) { TransitionManager.beginDelayedTransition(root); placeholder.setContentId(view.getId()); }}Copy the code

Here’s what happens with PlaceHolder combined with transition animation:

PlaceHolder dynamic replacement

Conclusion:

Same old story. There’s nothing wrong with it. You can leave it in the message. I will correct it haha.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Project requirements discussion – ConstraintLayout detailed use tutorial

digression

preface

1. Drag and drop

2. Write code

The body of the

How does a control determine its position

1. Directly determine the coordinates of the upper left corner of the control

2. Tell the position of two adjacent edges to the control

Margin value related

Position constraints have more than two edges

Circular layout

(Dimensions constraints)

1. Restrict ConstraintLayout:

2. Restrict internal controls:

Dimensions (Percent Dimensions)

Ratio of width to height

Chain (Chains)

Barrier (Barrier)

Group (Group)

Guideline

Placeholder

Conclusion:

Project requirements discussion – ConstraintLayout detailed use tutorial

digression

preface

1. Drag and drop

2. Write code

The body of the

How does a control determine its position

1. Directly determine the coordinates of the upper left corner of the control

2. Tell the position of two adjacent edges to the control

Margin value related

Position constraints have more than two edges

Circular layout

(Dimensions constraints)

1. Restrict ConstraintLayout:

2. Restrict internal controls:

Dimensions (Percent Dimensions)

Ratio of width to height

Chain (Chains)

Barrier (Barrier)

Group (Group)

Guideline

Placeholder

Conclusion:

Related Posts

Download, compile, and import Android source code on Mac OS

HarmonyOS Practice – Implement a login and password change page

Gradle and AGP Build apis: How to write plug-ins