Using kotlin to develop Android Applications (5) – common layout controls

Time:2021-1-23

Some Layout Widget in Android App

Some common layout controls in Android Applications

Linerlayout linear layout

It contains child controls that will be arranged horizontally or vertically

Main attributes:

  • Orientation display mode: horizontal (0), vertical (1)
  • layout_ Weight weight: the default value is 0, which means it is displayed according to the actual size of the widgets or containers. If the value is higher than 0, the remaining available space of the container will be divided. The division size depends on the layout of each widget or container_ Weight and its proportion in all widgets or containers
  • Whether baselinealigned allows users to adjust the baseline of its content: true / false
  • Baselinealignedchildindex alignment of current LinearLayout with other views:
  • Gravity alignment (the gravity direction of all elements in this element). The values are: top, bottom, left, right, center_ vertical、fill_ vertical、center_ horizontal、fill_ horizontal、center、fill、clip_ vertical、clip_ horizontal
  • layout_ Gravity direction relative to parent element
  • When measurewithlargestchild is set to true, all child controls are considered to have the smallest weight and the largest area

Relative layout

_ Main properties of child controls_ :

  • layout_ Centerinparent is completely centered relative to the parent element
  • layout_ Centerhorizontal Center
  • layout_ Centervertical Center
  • layout_ Alignparentbottom to attach the lower edge of the parent element
  • layout_ Alignparentleft sticks to the left edge of the parent element
  • layout_ Alignparentright sticks to the right edge of the parent element
  • layout_ Alignparenttop sticks to the top edge of the parent element
  • layout_ Below an element
  • layout_ Above is above an element
  • layout_ Tostartof is on the left side of an element
  • layout_ Toendof is to the right of an element
  • layout_ Aligntop aligns the top edge of this element with the top edge of an element

* layout_ Alignstart the left edge of this element is aligned with the left edge of an element

  • layout_ Align bottom the bottom edge of this element is aligned with the bottom edge of an element

* layout_ Align the right edge of this element with the right edge of an element

FrameLayout

No matter how many controls are placed in the frame layout container, the upper left corner of the control is aligned to the upper left corner of the container by default. If the control is the same size, only the top can be seen at the same time

Similar to relativelayout

Tablelayout table layout

The difference between GridLayout and GridLayout is that GridLayout can only make table layout with the same width for each column, while tablelayout can make table layout with different width for each column.

Main attributes:

  • Colapsecolumns: “0,1” hides columns 0 and 1
  • Stretchcolumns: “0,1” columns 0 and 1 can be expanded to rows
  • Stretchcolumns: “*” all columns can be expanded to rows
  • Shrinkcolumns: “0,1” columns 0 and 1 can be expanded to columns

_ Main properties of child controls_ :

  • layout_ Column: “1” the control is displayed in column 1
  • layout_ Span: “2” the control occupies 2 columns

Constrained layout

Class androidx.constraintlayout.widget .ConstraintLayout
Constraintlayout is an upgraded version of relativelayout, which allows us to design the location relationship between child controls on layout, and it is far more flexible and easier to use than relativelayout in Android studio.

Reference dependencies are required in the project

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Main properties of child control

  • layout_ constraintLeft_ Toleftof place the left side of a on the left side of B
  • layout_ constraintLeft_ Torightof place the left side of a on the right side of B
  • layout_ constraintRight_ Toleftof place the right side of a on the left side of B
  • layout_ constraintRight_ Torightof put the right side of a on the right side of B
  • layout_ constraintTop_ Totopof place the top side of a on the top side of B
  • layout_ constraintTop_ Tobottomof place the top side of a on the bottom side of B
  • layout_ constraintBottom_ Totopof place the bottom side of a on the top side of B
  • layout_ constraintBottom_ Tobottomof place the bottom side of a on the bottom side of B
  • layout_ constraintStart_ Toendof put the start position of a in the end position of B
  • layout_ constraintStart_ Tostartof put a’s start position on B’s start position
  • layout_ constraintEnd_ Tostartof put the end position of a in the start position of B
  • layout_ constraintEnd_ Toendof put a’s end position on B’s end position
  • layout_ constraintBaseline_ Tobaselineof placing the bottom side of a on the top side of B

Bias (bias)

When using LinearLayout, gravity is used to arrange the horizontal or vertical controls according to the weight distribution. In constraintlayout, it provides the bias property to allocate the weight of the control.

  • layout_ constraintHorizontal_ Bias horizontal migration coefficient
  • layout_ constraintVertical_ Bias vertical migration coefficient

hide

In constraintlayout, if a control is hidden (Gone), it will become a point, so it still has a constraint effect on other controls that take the control as a reference control.

  • layout_ Gonemarginleft hides the left margin of the control
  • layout_ Gonemarginright hides the right margin of the control
  • layout_ Gonemargintop hides the top margin of the control
  • layout_ Gnemarginbottom hides the bottom margin of the control
  • layout_ Gonemarginstart hides the start margin of the control
  • layout_ Gonemarginend hides the end margin of the control

Aspect ratio

  • layout_ The constraintdimensionratio = 16:6 property can be set to a ratio (set the width or height to 0dp / match first)_ CONSTRAINT)
  • layout_ constraintWidth_ Default = “percent” / / set width to percentage (relative to parent control)
  • layout_ constraintWidth_ Percentage = 0.3 / / values between 0 and 1
  • layout_ constraintHeight_ Default = “percent” / / set high to percentage
  • layout_ constraintHeight_ Percentage = 0.3 / / values between 0 and 1

Chain property

Chains provide a uniform representation of similar groups on the same axis (horizontal or vertical)

If a set of widgets is connected in two directions (see figure, showing the smallest chain with two widgets), it is considered a chain

When setting the property layout on the first element of the chain_ constraintHorizontal_ Chainstyle or layout_ constraintVertical_ Chainstyle, the chain will behave according to the specified style (chain by default)_ In this paper, we propose a new method to solve this problem

  • layout_ constraintHorizontal_ Chain in the horizontal direction of chainstyle: spread, spread_ Inside, packed
  • layout_ constraintVertical_ Chain in the vertical direction of chainstyle:
  • Spread chain mode: the space is evenly distributed, and each view occupies its own bisection space. It is the default mode of chain attribute.

    You can set the weight of the spread with the weight attribute. When setting the weight, we need to set the width or height of the control to 0dp and set the layout_ constraintHorizontal_ Weight or layout_ constraintVertical_ Value of weight:
  • Spread inside chain mode: remove the distance between the two most marginal views on both sides and the edge of the outer parent component, and then let the remaining views divide the space equally in the remaining space.
  • Packed chain mode: gather all views together, leave no gap between controls, and center the gathered views.

Guideline

Class androidx.constraintlayout.widget .Guideline

Guideline is just a tool class used in constraintlayout layout to assist layout. It is similar to auxiliary line and can be set android:orientation Property to determine whether it is horizontal or vertical.

The important thing is that the guide line will not be displayed on the interface. By default, it is gone.

Main attributes:

  • Orientation
  • layout_ constraintGuide_ Begin takes the starting position of the view as the reference, and the horizontal or vertical upper boundary (DP)
  • layout_ constraintGuide_ End takes the end position of the view as the reference, and the horizontal or vertical upper boundary (DP)
  • layout_ constraintGuide_ Percentage the percentage in the horizontal or vertical direction (float ratio 0.0F – 1.0F)

Reference

  • Detailed explanation of constraintlayout property and use of chain
  • Android x constraintlayout document