1. LinearLayout
1. Common attributes
| 1. orientation | Arrangement of components in a layout |
| 2. gravity | Control the alignment of the child elements contained in the component, which can be combined in multiples |
| 3. layout _ gravity | Controls how the component is aligned within the parent container |
| 4. background | Set a background image for this component, or directly cover it with color |
| 5. divider | Dividing line |
| 6. showDividers | Set the position of the dividing line, none (none), beginning (beginning), end (end), middle (between every two components) |
| 7.dividerPadding | Set the padding of the dividing line |
| 8. layout _ weight | (weight) This attribute is used to divide the area in equal proportions |
android:orientation="vertical">Vertical means vertical arrangement, horizontal means horizontal arrangement
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:divider="@drawable/divider"
android:showDividers="middle"
android:dividerPadding="100dp"
android:orientation="vertical"
android:gravity="center_vertical">Among them, divider, showDivider, dividerPadding, the three parameters are the parameters for setting the dividing line
1.1 The operation of dividing line can also be realized by setting View
<View
android:background="#00ff00"
android:layout_width="match_parent"
android:layout_height="1dp"/>
2. layout_weight weight ratio division
2.1 Syntax display
<LinearLayout
android:background="#ff0000"
android:layout_width="100dp"
android:layout_height="100dp"/>
<LinearLayout
android:background="#ffff00"
android:layout_width="100dp"
android:layout_weight="1"
android:layout_height="100dp"/>
<LinearLayout
android:background="#00ffff"
android:layout_width="100dp"
android:layout_height="100dp"/>2. RelativeLayout
2.1 Common attributes
2.1.1 Positioning according to the parent container
| 1. layout _ alignParentLeft | align left |
| 2. layout _ alignParentRight | right align |
| 3. layout _ alignParentTop | align top |
| 4. layout _ alignParentBottom | Bottom alignment |
| 5. layout _ centerHorizontal | center horizontally |
| 6. layout _ centerVertical | vertical center |
| 7. layout _ centerinParent | centre position |
2.1.2 Positioning according to sibling components
| 1. layout _ toleftof | placed to the left of the reference component |
| 2. layout _ toRightof | placed to the right of the reference component |
| 3. layout _ above | placed above the reference component |
| 4. layout _ below | placed below the reference component |
| 5. layout _ alignTop | Align to the top boundary of the reference component |
| 6. layout _ alignBottom | Align to the bottom boundary of the reference component |
| 7. layout _ alignLeft | Aligns to the left border of the reference component |
| 8. layout _ alignRight | Aligns to the right border of the reference component |
2.2 Implementation process
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:background="#ff0000"
android:layout_width="100dp"
android:layout_height="100dp"/>
<RelativeLayout
android:background="#00ff00"
android:layout_width="100dp"
android:layout_height="100dp"/>
</RelativeLayout>These two will overlap to form a relative layout: the latter will cover the former.
After setting up the first RelativeLayout
android:layout_alignParentRight="true"
Layout relative to parent container
However, it needs to be set relative to the sibling component. There are many sibling components, which one should be clearly explained. For example:
<RelativeLayout
android:id="@+id/rl1"
android:background="#ff0000"
android:layout_alignParentRight="true"
android:layout_width="100dp"
android:layout_height="100dp"/>
<RelativeLayout
android:background="#00ff00"
android:layout_toLeftOf="@+id/rl1"
android:layout_width="100dp"
android:layout_height="100dp"/>Realize the effect diagram:
2.2 General attributes
2.2.1margin sets the margin between the component and the parent container
| 1. layout _ margin | Offset up and down |
| 2. layout _ marginLeft | |
| 3. layout _ marginRight | |
| 4. layout _ marginTop | |
| 5. layout _ margiBottom |
<RelativeLayout
android:background="#00ff00"
android:layout_marginLeft="100dp"
android:layout_width="100dp"
android:layout_height="100dp"/>
2.2.2padding sets the margin of the internal elements of the component
3. FrameLayout
The drawing principle of the frame layout is: after drawing a red from the upper left corner, when drawing yellow, it starts from the upper left corner again, forming an overlay effect. (Pile up one by one)
3.1 Common attributes
| android : foreground | set foreground |
| android : foregroundGravity | set foreground position |
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="400dp"
android:layout_height="400dp"
android:background="#ff0000" />
<FrameLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#ffff00" />
</FrameLayout>
<FrameLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:foreground="@mipmap/ic_launcher"
android:foregroundGravity="right|bottom"
android:background="#ffff00" />At this time, the background image can be placed anywhere
Four.TableLayout
Writing controls in TableLayout will occupy the size of a row
To make two buttons occupy a row, use TableRow
<TableRow>
<Button
android:text="第一个"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="第二个"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
When there is more than one line, it will not automatically wrap, but will directly cover a part.
4.1 Common attributes
| android : collapseColumns | Set the serial number of the column to be hidden, starting from o |
| android : stretchColumns | Set the column number of the column that is allowed to be stretched, starting from 0 |
| android : shrinkColumns | Set the column number of the column that is allowed to be shrunk, starting from o |
4.1.1 Sub-control setting properties
| android : layout _ column | Show in the first few columns |
| android : layout _ span | Horizontally span several columns |
Realize the effect example:
android:collapseColumns="0"
The first button is in the zeroth column
If multiple columns are hidden, android:collapseColumns="0, 1" is enough
android:stretchColumns="1"
At this time, it can be displayed by stretching, and stretching occupies its remaining space.
android:shrinkColumns="2"
The principle of contraction is also the same, and the contraction is effective only when it exceeds
Five. GridLayout
Rows can be merged, columns can also be merged, and the layout will be more flexible
5.1 Common properties
| android : orientation | Set whether to display horizontally or vertically |
| android : columnCount | Set the number of rows to display |
| android : rowCount | Set the number of columns to display |
5.1.1 Code example display:
android:orientation="vertical"
Convert landscape arrangement to portrait arrangement
android:columnCount="3"
One row displays three columns, redundant automatic line wrapping
android:rowCount="3" android:orientation="vertical"
Arrange three rows in one column
5.2 Child control properties
| android : layout _ column | Show in the first few columns |
| android : layout _ columnSpan | 横向跨几列 |
| android : layout _ columnWeight | 横向剩余空间分配方式 |
| android : layout _ gravity | 在网格中的显示位置 |
| android : layout _ row | 显示在第几行 |
| android : layout _ rowSpan | 横向跨几行 |
| android : layout _ rowWeight | 纵向剩余空间分配方式 |
5.2.1属性实现实例
<Button
android:text="第一个"
android:layout_row="1"
android:layout_column="0"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>实现效果如图：
设置非常灵活
Button
android:text="第四个"
android:layout_columnWeight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
剩余空间全部由第四个按钮占领