Reprint please indicate the address QuincySx: www.jianshu.com/p/036c6ec28…

Now that Android Studio has upgraded to 2.3, ConstraintLayout is the default layout, and today we’ll take a quick look at the layout in use.

Introduction to the

ContraintLayout is a new layout released by Google (translated as “constraint layout” in Chinese) that can be used in two ways

  1. You can drag with the mouse in AS 2.3 and above
  2. Use code to write constraints between controls

This article is intended to explain ConstraintLayout, but it does not explain the functions or details that are not commonly used

I have written this article once before, but I feel that it is not very good in many places, so this article is basically rewritten, please put forward any deficiencies

use

First of all, this layout is to add a dependency, generally new projects will add this dependency by default if not, you can also manually add the dependency, by the end of the latest version is 1.0.2, after adding the dependency can be used

compile 'com. Android. Support. The constraint, the constraint - layout: 1.0.2'
Copy the code
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

Copy the code

ConstraintLayout is used directly with AS

First take a look at the visual edit of ConstraintLayout on AS

A quick overview of the layout:

  1. The little bar at the top is an action bar for quick actions
  2. The top left corner shows the official controls that can be dragged directly onto the view to add controls
  3. In the lower left corner is a hierarchy that shows the current layout, each control can also be selected by clicking on it, and then a series of actions
  4. On the right side, you can adjust some properties. The top part can adjust offset, layout_margin, layout_width, layout_height, and the bottom part is specific properties

Let’s briefly show the main operations:

To create a constraint, click on the control and a white dot will appear around it. Use the mouse to drag it to the place where you want to restrict it, such as an edge of the parent container, or an edge of another control.

This demo is unsealed operation: click the control and then the mouse will turn red on the dot dot, click once lifted the restriction, of course, you click on the Red Cross will be able to remove all constraints, there is a kind of operation is to click on the fork and quick action bar, it means the deletion of all controls

Some children’s shoes to say why this control will appear in the center of the layout, you can see the following operation, is to control the offset control, and then he can according to their own ideas to offset, this way is the control percentage, adapted to the acid cool explosion

If you want to control more properties, you can see the following action: Click the two-way arrow to adjust all the properties of the control

How do you create and cancel text baselines

Add helper lines: This operation can manipulate control constraints to helper lines to make complex interfaces

  1. The mouse also directly drag the line, directly change the position
  2. Click the upper arrow of the mouse to switch the judgment of the relative position 1). Determine the position of the auxiliary line relative to the left (icon is the left arrow) 2). Determine the position of the auxiliary line relative to the right (icon is the right arrow) 3). Determine the position of the auxiliary line by percentage (icon is the percent sign)

If you write this type of layout, add an auxiliary line in the middle, and two buttons respectively to establish constraints with it, wouldn’t it be easy to do it? Because you can use percentages to do it, and you don’t have to worry about matching, wouldn’t it be the best of both sides

So there’s a couple of other things that I can do, and I write in XML a lot, and I haven’t used some of the visualizations, but if you want to use them, you can just point them out and see what they look like and learn about them, okay

We use the mouse drag operation on the introduction of the first here, more in-depth operation research, understanding it

ConstraintLayout, the way XML code is used

The first is the code form of the constraint established by the edge

Let’s look at the generic code form app:layout_constraintAAAA_toBBBBOf =” ID /parent “where AAAA BBBB represents the top, bottom, left, and right sides of the control for example layout_constraintBottom_toBottomOf

Explanation:

It is the AAAA edge of the control that wrote this line of code and the BBBB edge of the control that the value of this expression represents that set the constraint

Let’s say a TextView control writes an app:layout_constraintBottom_toBottomOf=”parent” constraint, representing the bottom edge of the control and the bottom edge of the “parent” constraint

Or there is a control in View1 that writes an app:layout_constraintTop_toBottomOf=” @+id/view2″ constraint that represents the top edge of the control and the bottom edge of the control whose ID is view2

There is a parent, which represents the parent container

The second type is content alignment

This represents content horizontal alignment app:layout_constraintBaseline_toBaselineOf=” ID”

This line is aligned with the content of that control

The third category is absolute location

Layout_editor_absoluteX app:layout_editor_absoluteY

The fourth type is offset

It has a default value of 0.5 if it is not written.

If both top and bottom constraints are applied to a control, you can offset the control using app:layout_constraintVertical_bias=”0.5″. 0.0 means at the top and 1 means at the bottom

If a control has constraints on both the right and left, you can offset it using app:layout_constraintHorizontal_bias= “0.5”

However, there is a slight problem with this. If your controls are filled and there is no space on either side, setting them will not work

The fifth category is specific gravity

App :layout_constraintHorizontal_weight = “” app:layout_constraintVertical_weight =”

The sixth type is the auxiliary line

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp"/>
Copy the code
  1. Layout_width and layout_height can be written arbitrarily
  2. Android: Orientation Controls horizontal or horizontal through vertical and horizontal
  3. Constraintguide_begin app:layout_constraintGuide_end App :layout_constraintGuide_begin, constraintguide_end In Android :orientation value horizontal indicates the distance from the top or the distance from the bottom.
  4. App :layout_constraintGuide_percent Enter a value from 0 to 1, which is itself a decimal number representing the percentage of the entire screen
  5. Only one attribute can be created for app:layout_constraintGuide_begin, app:layout_constraintGuide_end, and app:layout_constraintGuide_percent

The end of the

If some effect do not know how to write, you can use the compiler to drag out, look at the source code to find rules, to tell the truth, this layout is still quite good to use, may be writing some trouble, I have now given up the relative layout to understand the place is not in place, please also ask you to correct, welcome clap brick exchange