- This article is the fifth part, which mainly introduces some commonly used layout methods and the creation of the most commonly used view——scroll view. Common layouts include linear layout, relative layout, grid layout, table layout and so on.
- This article is a note made during the learning process of the Bilibili tutorial Brain Academy Android tutorial!
- Most of this article is the knowledge points selected from the video, and some of the text and a small part of the pictures are written by myself.
- This article follows the previous article "Android Mobile Application Development Tutorial ④"
- Next article "Android Mobile Application Development Tutorial ⑥"
One: common layout
1.1: Linear Layout LinearLayout
1.1.1: Arrangement of linear layout
The views inside the linear layout can be arranged in two ways:
- When the orientation attribute value is horizontal, the internal views are arranged horizontally from left to right.
- When the orientation attribute value is vertical, the internal views are arranged vertically from top to bottom.
If the orientation property is not specified, LinearLayout is arranged horizontally by default.
1.1.2: Weight of linear layout
The weight concept of linear layout refers to the proportion of width and height of the sub-views of linear layout.
The weight attribute is called layout_weight, but this attribute is not set in the LinearLayout node, but is set in the direct subordinate view of the linear layout, indicating the ratio of width to height occupied by the subordinate view.
When layout_width is filled with 0dp, layout_weight represents the width ratio in the horizontal direction. When layout_height is filled with 0dp, layout_weight indicates the height ratio in the vertical direction.
If 0dp is not filled, the weight will distribute the remaining empty parts of the same column to each control according to the weight.
1.2: Relative Layout RelativeLayout
The position of subordinate views in relative layout is determined by other views. There are two kinds of reference objects used to determine the position of the lower-level view
- A view that is the peer of this view itself.
- The view's superior view (that is, the RelativeLayout it belongs to).
If the reference object of the subordinate view is not set, the subordinate view is displayed in the upper left corner of the RelativeLayout by default.
The value of the relative position
1.3: Grid layout GridLayout
Grid layout supports multi-row multi-column table arrangement.
The grid layout is arranged from left to right and top to bottom by default. It adds two new properties:
- The columnCount attribute, which specifies the number of columns in the grid, that is, how many views can be placed in each row;
- The rowCount attribute, which specifies the number of rows of the grid, that is, how many views can be placed in each column;
In the process of using grid layout, it is often used in conjunction with the layout_weight attribute and the gravity attribute to make the internal text center or fill the interface.
1.4: Table Layout
Table layouts are similar to grid layouts.
Table layout TableLayout is a subclass of LinearLayout, so it can also be regarded as a linear layout. The rows in this layout are represented by TableRow. There are as many rows as there are TableRows. The number of table columns is determined by the TableRow that contains the most child elements. . For example, if there are two rows, the first row has two elements, and the second row has three elements, then the number of columns in the table is 3.
TableRow does not need to set width and height, its width must be match_parent, its height must be wrap_content, and the width and height of its controls are both wrap_content.
The column of the control in TableRow is specified by android:layout_column, the value starts from 0, and an element can span multiple columns, and the number of spanning columns is specified by android:layout_span.
TableLayout has the following attributes to control the width of the table
Two: Scroll View ScrollView
2.1: Types of scrolling views
There are two types of scroll views:
- ScrollView, which is a vertically oriented scroll view. When scrolling in the vertical direction, the layout_width attribute value is set to match_parent, and the layout_height attribute value is set to wrap_content.
- HorizontalScrollView, which is a horizontal scroll view. When scrolling in the horizontal direction, the layout_width attribute value is set to wrap_content, and the layout_height attribute value is set to match_parent.
2.2: Creation of scroll view
Note: There can only be one sub-control inside the scroll view, so generally add another layout inside the scroll view to add multiple controls.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="200dp">
<!-- 水平方向的线性布局，两个子视图的颜色分别为青色和黄色 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#aaffff"/>
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#ffff00"/>
</LinearLayout>
</HorizontalScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 垂直方向的线性布局，两个子视图的颜色分别为绿色和橙色 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#00ff00"/>
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ffffaa"/>
</LinearLayout>
</ScrollView>
</LinearLayout>This creates a scroll view that can be flipped.