Precautions for using constraintlayout to constrain layout

Precautions for using constraintlayout to constrain layout

Constrained layout, as a new type of layout officially promoted by Google, can achieve relatively complex page layouts through simple drag and drop. But in China, it seems that most people are reluctant to use this seemingly simple new layout method. The author will introduce some precautions when using constraint layout below (all graphical interface layout methods used in this article)

1. How to use constraint layout

• ​ The default layout file generated when the Activity is created is the constraint layout.

  Click Design, you will enter the graphical interface

  

• On the left side of the graphical interface are various mainstream layout controls (note: some third-party controls do not contain them, you need to write by yourself)
  

• When using, you only need to drag the layout controls you need to use from the left to the center layout interface, and hover the mouse over the border to freely zoom in and out.

Using constraint layout can greatly reduce the multi-layer nesting that we used to use traditional linear layout and relative layout in the past, and improve development efficiency.

2. Matters needing attention

• When using constraint layout, remember to add constraints to all layout controls, otherwise the set layout will be invalid due to lack of constraints

• When adding constraints, do not add all four constraints at a time, just add two, and the rest depends on the situation.

3. Adaptation issues

​ I believe that many friends who have tried to constrain the layout are embarrassed by its adaptation problem. When I first used the appointment layout, I was also troubled by this problem. I found out after consulting various information. Although the constraint layout will calculate the coordinate size by itself when dragging, it can establish a constraint relationship with each control when establishing constraints. For specific use, post here some places that I usually use. For your reference.

• Case 1

Let the layout block below always be below the TextView

You only need to do the following, pull the lower origin of the TextView out of the arrow to point to the lower layout block, or vice versa

• Case 2

  Obviously the created layout is fine in the view, but when running on the simulator or real machine, a part of the layout jumps out of the screen.

  • This is because the layout block or control created in the constraint layout has a fixed size set by itself when dragging, which is different from the wrap_content we usually set. This is particularly obvious in the layout block. How to Solve it.
    

  Since we have established constraints above, we can set it to 0dp in the width and height settings below, so that its size will be fixed in the parent container without jumping out.

  For common centering, just set the left and right constraints to 0dp or the same

  to sum up

  Using constraint layout, you only need to use constraint relations flexibly, you can put aside the cumbersome code-based layout, through simple drag and drop, a variety of rich layout forms can be realized, which simplifies the use of multiple layout nesting which made it difficult to modify some controls. The problem. Allow programmers to spend more time to complete their own logic code. And this simple and efficient method will be widely implemented in the near future.