Want to see more articles from me: [Xutong Zhang’s blog] blog.csdn.net/zxt0601 Want to come to gayHub and ME gaygayup: [McXtzhang’s Github home page] github.com/mcxtzhang
An overview of the
ConstraintLayout: explain all the attributes of ConstraintLayout, and explain Chain how to add it visually.
However, explaining Chain only seems too thin, so I added an example of ConstraintLayout to implement a detailed and Item layout. Cut the crap and start the whole thing:
Construction of the chainChainBy step
Let’s say we want to build vertical chains.
The first step is to drag three buttons vertically. You can see that in the “Design” area, in addition to position, we can also resize the control.
Second, select three buttons.
Ctrl + A
Step 3, right-click ->Center Forfeit. The chain is now formed.
Step 4, in the ALign option on the toolbar above the Design area, you can switch the alignment rule of the water skin direction control
The left
In the middle
Align right
Step 5: Click the chain icon to switch the ChainStyle.
spread
spread_inside
packed
Explain the ConstraintLayout property and use of Chain
In actual combat
Talking is being. Let’s practice together, first look at a design draft:
ConstraintLayout
LinearLayout
RelativeLayout
LinearLayout
RelativeLayout
below rightOf
RelativeLayout
TextSize
TextView
Chain
Align
ConstraintLayout DuangDuangDuangDuang, ConstraintLayout is now out there, and it’s easy to drag and drop it.
First, go to the XML and change the width and height of the parent layout to WRAP_CONTENT. Second, drag and drop an ImageView and set the size of the layout to the top of the parent control
Step 3: Drag and drop four TextViews into vertical rows. Fill in the color, size and other elements according to the design draft
Step 4, set the constraints, spacing, and so on between the four TextViews
Fifth step, drag two TextViews to the bottom, according to the design draft fill color, size, etc
The sixth step, according to the design draft constraint bottom three TextViews, set margins and so on
TextView
5dp
Inspector
Step 7: Layout the cart add/subtract buttons The cart button uses a custom View. This section also explains how to drag and drop a custom View in ConstraintLayout. I’ve previously blogged about this shopping cart control on Github: github.com/mcxtzhang/A…
Pallete
Advanced
view
Step 8, add constraints to the shopping cart control
Step 9, center the bottom three TextViews vertically. This step is a play I imposed to show what the Chain does. I chained the bottom controls and changed them to be relatively centered vertically. The interface suddenly shrinks, obviously because something is wrong with the constraint. So let’s go to the Text page and see exactly what went wrong with the code,
After positioning the price TextView, check the constraint. App :layout_constraintVertical_bias=”1.0″ should not be written if we write the constraint ourselves. This constraint should be added to the parent control’s WRAP_CONTENT. The layout shrinks.
Delete this constraint, the interface preview is normal. Step 10: Create a layer of CardView outside the root layout and run it:
conclusion
As you can see, the Chain concept in ConstraintLayout is the same as the Flex layout in front-end JS. Children with ReactNative or front-end experience should be able to see this at a glance. Or more comfortable with this layout.
Explain layouts with ConstraintLayout. After a brief period of indiscipline, it’s relatively fast, and has the advantages of dragging, visualizing, and performing layout tasks with ease that are difficult with RelativeLayout. I recommend that you use it.
The code address is in my Demo collection: github.com/mcxtzhang/D…
Want to see more articles from me: [Xutong Zhang’s blog] blog.csdn.net/zxt0601 Want to come to gayHub and ME gaygayup: [McXtzhang’s Github home page] github.com/mcxtzhang