preface

Hi, everyone, after seeing the title is not confused, what is this? What is this little series doing? What’s with the six layouts we talked about and the layout killer? This is our public number and other public number is different, we are not scripted to explain Android knowledge, but the actual use of the project and is good to share with you, what to wait for? Hurry to start our study!!

The introduction of

ConstraintLayout is a ViewGroup designed to solve the problem of too many nested layouts. It provides a flexible way to position and adjust views.

ConstraintLayout1.1.3 this blog is based on ConstraintLayout1.1.3, different versions of the dependency have different properties and methods, if the compilation of the demo according to the blog found compilation errors, please study the updated version of the constraint layout or consistent with the blogger version.

Use: Check the dependencies to see if this library is added.

// Since Android Studio2.3, the official template defaults to ConstraintLayout. After updating the gradle plugin version, create projects that are automatically dependent, If it is old project want to use constraint layout depend on such dependencies {implementation 'com. Android. Support. The constraint, the constraint - layout: 1.1.3'}

use

After Android Studio2.3, create a layout file. The default layout is as follows:

<? The 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" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

There are four properties found above:

Layout_constraintBottom_toBottomOf ="parent"; //View left align parent left layout_constraintRight_toRightOf="parent" // Align the parent side with the View side

There are several other common properties that indicate relationships between views

Layout_constraintBottom_toTopOf ="parent"; layout_constraintLeft_toRightOf="parent" Layout_constraintRight_toLeftOf ="parent"; layout_constraintRight_toLeftOf="parent"

Note: Parent can be replaced with the control ID of any other View you want to associate with it

A TextView is declared in the template and is in the middle of the screen. How did you do that? Each of the four attributes specifies the relationship between TextView and Parent, as the name implies. If you do not specify the percentage of horizontal and vertical directions, the constraint layout defaults to 50%, so it will be centered. If you want to specify a percentage, use the following attributes :(for horizontal ratios you specify left and right, and for vertical ratios you specify top and bottom)

Layout_constraintHorizontal_bias ="0.4" layout_constraintVertical_bias="0.5" 1. Bias = left correlation length of subview /(left correlation length of subview + right correlation length of subview) 2. Bias is proportional to left correlation length. The control moves left or right depending on which side of the associated control the child View is associated with.

No picture, no truth, so complicated calculations, you want to confuse me? Directly above!

Therefore, we know that to use the constraint layout to fix the position of a View, we need to describe the relationship between the View and the target View by its distance, position, and at least three directions (top, left, bottom, right)

Setting the percentage layout

ConstraintLayout When the width or height of the ConstraintLayout sublayout is set to 0DP, you can set the width or height as a percentage

<Button android:layout_width="0dp" android:layout_height="0dp" android:text="Hello World!" App: layout_constraintBottom_toBottomOf = "parent" app: layout_constraintHeight_percent = "0.5" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" App: layout_constraintTop_toTopOf = "parent" app: layout_constraintWidth_percent = "0.5" / >

Use the layout_constraintHeight_percent and layout_constraintWidth_percent properties to set the horizontal and vertical proportions to determine the width and height, rather than the specific size. You can use this property for screen adaptations of general views. The effect is as shown in the figure:

Set the width to height ratio

When layout_width or layout_height is set to 0dp, you can also set the width and height ratio through layout_constraintDimensionRatio. By default, this ratio represents the value of width:height.

<Button android:layout_width="0dp" android:layout_height="0dp" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" App: layout_constraintDimensionRatio = "1:1" app: layout_constraintWidth_percent = "0.5" / >

Use layout_constraintDimensionRatio to set the width and height ratio to flexibly set the size of the View. If you want to indicate height: width, you can configure the property like h,16:9 means h:w=16:9 or w,9:16 is the same. The effect is as shown in the figure:

constraint

When the width or height of a view is set to wrap_content

<Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" App :layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn2" android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" test test test test test test test test test test" app:layout_constraintLeft_toRightOf="@id/btn1" app:layout_constraintRight_toRightOf="parent" android:layout_marginTop="40dp" app:layout_constraintTop_toTopOf="@id/btn1" />

The realization effect is shown in the figure:

I have set layout_constraintRight_toRightOf=”parent”. This is what happens when the fit content property is set. In this case, you need to force the constraintright_width property.

App :layout_constrainedWidth="true"// Add this property to btn2

Control Chain

You can set the style of a chained control by layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle. This property is a little bit like the weight property in the LinearLayout that splits the layout. This attribute is usually used when the weight assignment does not meet the requirement, but you need to center or allocate space for the View

• Let’s start with an example of the official explanation

Do you still feel confused after looking at this picture, it looks very complicated? In fact, in the development of flexible use of this attribute can be twice the result with half the effort and good adaptation effect. To use this property, you need to associate the views you are linking with each other, horizontally to the left and right, vertically to the top and down, and each adjacent View must be closely associated with an ID. That is, to chain controls in one direction (interdependence). The default attribute is spread

Spread Chain

Spread Inside Chain

// Configure app on btn1 :layout_constraintHorizontal_chainStyle="spread_inside" // Left and right, left in the middle

Packed Chain

// Configure the app on btn1 :layout_constraintHorizontal_chainStyle=" Packed "// The three controls are close to each other and centered overall

Packed Chain with Basis

// Configure app:layout_constraintHorizontal_chainStyle=" Packed "app:layout_constraintHorizontal_bias="0.9" // Where the three controls are close to each other and are proportioned horizontally

conclusion

Due to the limited space of the article, and the actual project has not studied more and better use of the new attributes, the temporary stop, the later will be about the constraint layout of more good gameplay push to everyone, if a partner found more efficient or more practical attributes, welcome your comments, let us grow together ~

PS: If you still don’t understand, welcome to join our QQ technology exchange group: 892271582, there are all kinds of great god to answer the friends encountered questions oh ~