Android常见的界面结构

目录

​前言
1.线性结构LinearLayout
2.相对结构RelativeLayout
3.表格结构TableLayout
 4.网格结构GridLayout
实现一个盘算器界面
改Button按钮颜色
5.帧结构FrameLayout

---

前言

在Android应用步伐中，界面是由结构和控件构成的。控件是功能单元，负责接受用户的输入或者展示信息。而结构就是框架，来组织和定位这些控件的位置。
我们先来简朴了解一下Android中一些常见的结构
1.线性结构LinearLayout

线性结构内的子控件通常被指定为程度或者竖直排列。

常用属性

属性名称	说明
androidrintation	设置结构内控件的排列顺序 （vertical为竖直，horiztal为程度）
android:layout_weight	在结构内设置控件的权重，属性值可以直接写int值
android:layout_width	设置结构或控件的宽度
android:layout_height	设置结构或控件的高度
android:background	设置结构或者控件的配景
android:gravity	线性结构中，子容器相对于父容器地点的位置

• 当layout_width为0时，layout_weight表现程度方向的宽度比例。
  
• 当layout_height为0时，layout_weight表现竖直方向的高度比例。
  

竖直摆放：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:orientation="vertical">
7.     <Button
8.         android:id="@+id/btn1"
9.         android:text="按钮1"
10.         android:layout_width="wrap_content"
11.         android:layout_height="wrap_content"/>
13.     <Button
14.         android:id="@+id/btn2"
15.         android:text="按钮1"
16.         android:layout_width="wrap_content"
17.         android:layout_height="wrap_content"/>
19.     <Button
20.         android:id="@+id/btn3"
21.         android:text="按钮1"
22.         android:layout_width="wrap_content"
23.         android:layout_height="wrap_content"/>
24. </LinearLayout>

复制代码

 
我们将父容器的orintation改为horiatal就是程度结构

2.相对结构RelativeLayout

相对结构通过相对定位的方式来指定子控件的位置。

RelativeLayout以父容器或者其他子控件为参照物，来指定结构内子控件的位置。
在相对结构中，其子控件具备一些属性，用于指定子控件的位置，一般是多个一起使用，
相对结构中子控件的属性：

 根据父容器定位

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:layout_margin="40sp">
7.     <Button
8.         android:id="@+id/btn1"
9.         android:text="左上角"
10.         android:layout_width="wrap_content"
11.         android:layout_height="wrap_content"
12.         android:layout_alignParentLeft="true"/>
15.     <Button
16.         android:id="@+id/btn2"
17.         android:text="上居中"
18.         android:layout_width="wrap_content"
19.         android:layout_height="wrap_content"
20.         android:layout_centerHorizontal="true"/>
23.     <Button
24.         android:id="@+id/btn3"
25.         android:text="右上角"
26.         android:layout_width="wrap_content"
27.         android:layout_height="wrap_content"
28.         android:layout_alignParentRight="true"/>
31.     <Button
32.         android:id="@+id/btn4"
33.         android:text="左居中"
34.         android:layout_width="wrap_content"
35.         android:layout_height="wrap_content"
36.         android:layout_centerVertical="true"/>
39.     <Button
40.         android:id="@+id/btn5"
41.         android:text="居中"
42.         android:layout_width="wrap_content"
43.         android:layout_height="wrap_content"
44.         android:layout_centerInParent="true"/>
48.     <Button
49.         android:id="@+id/btn6"
50.         android:text="右居中"
51.         android:layout_width="wrap_content"
52.         android:layout_height="wrap_content"
53.         android:layout_alignParentRight="true"
54.         android:layout_centerVertical="true"/>
58.     <Button
59.         android:id="@+id/btn7"
60.         android:text="左下角"
61.         android:layout_width="wrap_content"
62.         android:layout_height="wrap_content"
63.         android:layout_alignParentBottom="true"/>
67.     <Button
68.         android:id="@+id/btn8"
69.         android:text="下居中"
70.         android:layout_width="wrap_content"
71.         android:layout_height="wrap_content"
72.         android:layout_centerHorizontal="true"
73.         android:layout_alignParentBottom="true"/>
76.     <Button
77.         android:id="@+id/btn9"
78.         android:text="按钮9"
79.         android:layout_width="wrap_content"
80.         android:layout_height="wrap_content"
81.       android:layout_alignParentBottom="true"
82.         android:layout_alignParentRight="true"/>
83. </RelativeLayout>

复制代码

 
根据子控件来定位

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent">
6.     <Button
7.         android:id="@+id/target_btn"
8.         android:text="都以我为中心"
9.         android:textSize="10sp"
10.         android:textColor="@color/black"
11.         android:layout_centerInParent="true"
12.         android:layout_width="wrap_content"
13.         android:layout_height="wrap_content"/>
15.     <Button
16.         android:id="@+id/btn_1"
17.         android:text="我在中心下面"
18.         android:layout_width="wrap_content"
19.         android:layout_height="wrap_content"
20.         android:textSize="10sp"
21.         android:textColor="@color/black"
22.        android:layout_below="@+id/target_btn"
23.         android:layout_marginTop="40dp"
24.         android:layout_alignLeft="@+id/target_btn"/>
26.     <Button
27.         android:id="@+id/btn_2"
28.         android:text="我在中心上面"
29.         android:layout_width="wrap_content"
30.         android:layout_height="wrap_content"
31.         android:textSize="10sp"
32.         android:textColor="@color/black"
33.         android:layout_above="@+id/target_btn"
34.         android:layout_marginBottom="40dp"
35.         android:layout_alignLeft="@+id/target_btn"/>
37.     <Button
38.         android:id="@+id/btn_3"
39.         android:text="我在中心左面"
40.         android:layout_width="wrap_content"
41.         android:layout_height="wrap_content"
42.         android:textSize="10sp"
43.         android:textColor="@color/black"
44.         android:layout_alignBottom="@+id/target_btn"
45.        />
46.    
47.     <Button
48.         android:id="@+id/btn_4"
49.         android:text="我在中心右面"
50.         android:layout_width="wrap_content"
51.         android:layout_height="wrap_content"
52.         android:textSize="10sp"
53.         android:textColor="@color/black"
54.         android:layout_alignTop="@+id/target_btn"
55.         android:layout_toRightOf="@+id/target_btn"
56.         android:layout_marginLeft="40dp"/>
57. </Relative

复制代码

 
3.表格结构TableLayout

表格结构采用列、行的情势来管理控件，不需要明确声明此中有多少行和多少列，而是在通过在表格中添加TableRow结构或者控件来控制表格的行数，在TableRow结构中添加控件来控制表格的列数。
这种结构和后序讲的GridLayout的区别就是能够订定各列宽度不一样的表格，而网格结构只能订定列宽度一样的结构。
由于TableLayout继承于线性结构LinearLayout结构，以是表格结构支持线性结构的属性，此外，还有其他常用的属性：

属性名称	说明
android:stretchColumns	设置可拉伸的列。如：android:stretchColumns=“0”，表现第1列可以拉伸
android:shrinkColumns	设置可收缩的列。如：android:shrinkColumns=“1,2”，表现第2、3列可以收缩
android:collapseColumns	设置可以隐藏的列。如：android:collapseColumns=“0”，表现第1列可以隐藏

此外，表格结构中控件的常用属性：

属性名称	说明
android:layout_column	设置该控件表现的位置，如：android:layout_column="1"，表如今第2个位置表现
android:layout_span	设置该控件占据第几列，默以为第1列

示例：

1. <?xml version="1.0" encoding="utf-8"?>
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent">
5.    
6.     <TableRow>
7.         <Button
8.             android:text="按钮1"
9.             android:layout_width="wrap_content"
10.             android:layout_height="wrap_content"
11.             android:layout_column="0"/>
12.         
13.         <Button
14.             android:text="按钮2"
15.             android:layout_width="wrap_content"
16.             android:layout_height="wrap_content"
17.             android:layout_column="1"/>
18.     </TableRow>
19.    
20.     <TableRow>
21.         <Button
22.             android:text="按钮3"
23.             android:layout_width="wrap_content"
24.             android:layout_height="wrap_content"
25.             android:layout_column="1"/>
27.         <Button
28.             android:text="按钮4"
29.             android:layout_weight="1"
30.             android:layout_width="0dp"
31.             android:layout_height="wrap_content"
32.             android:layout_column="1"/>
33.     </TableRow>
34.    
35.     <TableRow>
36.         <Button
37.             android:text="按钮5"
38.             android:layout_weight="1"
39.             android:layout_width="0dp"
40.             android:layout_height="wrap_content"
41.             android:layout_column="2"/>
42.     </TableRow>
43. </TableLayout>

复制代码

 
 4.网格结构GridLayout

网格结构是android14.0引入的，使用它可以减少结构嵌套。

常见属性：

属性	说明
android:columnCount	设置最大列数
android:rowCount	设置最大行数
androidrientation	GridLayout中子元素的结构方向
android:alignmentMode	alignBounds：对齐子视图边界 alignMargins ：对齐子视距内容，默认值
android:columnOrderPreserved	使列边界表现的顺序和列索引的顺序雷同，默认是true
android:rowOrderPreserved	使行边界表现的顺序和行索引的顺序雷同，默认是true
android:useDefaultMargins	没有指定视图的结构参数时使用默认的边距，默认值是false

 使用layout_columnSpan 、layout_rowSpan时要加上layout_gravity属性，否则没有用果；另外item在边沿时宽高盘算会出现错误，需要我们手动设置宽高，否则达不到想要的效果。
GridLayout在API21时引入了android:layout_columnWeight和android:layout_rowWeight来办理中分问题。
实现一个盘算器界面

1. <?xml version="1.0" encoding="utf-8"?>
2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="wrap_content"
5.     android:columnCount="4"
6.     android:rowCount="9"
7.     android:orientation="horizontal">
9.     <TextView
10.         android:text="计算器"
11.         android:textSize="15sp"
12.         android:layout_columnSpan="4"
13.         android:layout_gravity="center"/>
14.     <TextView
15.         android:id="@+id/result"
16.         android:layout_gravity="fill"
17.         android:gravity="end"
18.         android:layout_columnSpan="4"
19.         android:text="0"
20.         android:background="#D5D4CF"
21.         android:textSize="50dp"/>
23.     <Button
24.         android:layout_gravity="fill"
25.         android:layout_columnWeight="1"
26.         android:text="%" />
27.     <Button
28.         android:layout_gravity="fill"
29.         android:layout_columnWeight="1"
31.         android:text="CE" />
33.     <Button
34.         android:layout_gravity="fill"
35.         android:layout_columnWeight="1"
36.         android:text="C"/>
38.     <Button
39.         android:layout_gravity="fill"
40.         android:layout_columnWeight="1"
41.         android:text="delete"/>
43.     <Button
44.         android:layout_gravity="fill"
45.         android:layout_columnWeight="1"
46.         android:text="1/x" />
47.     <Button
48.         android:layout_gravity="fill"
49.         android:layout_columnWeight="1"
50.         android:text="x^2" />
52.     <Button
53.         android:layout_gravity="fill"
54.         android:layout_columnWeight="1"
55.         android:text="x^(1/2)"/>
57.     <Button
58.         android:layout_gravity="fill"
59.         android:layout_columnWeight="1"
60.         android:text="÷"/>
61.     <Button
62.         android:layout_gravity="fill"
63.         android:layout_columnWeight="1"
64.         android:text="7" />
65.     <Button
66.         android:layout_gravity="fill"
67.         android:layout_columnWeight="1"
69.         android:text="8" />
71.     <Button
72.         android:layout_gravity="fill"
73.         android:layout_columnWeight="1"
74.         android:text="9"/>
76.     <Button
77.         android:layout_gravity="fill"
78.         android:layout_columnWeight="1"
79.         android:text="X"/>
80.     <Button
81.         android:layout_gravity="fill"
82.         android:layout_columnWeight="1"
83.         android:text="4" />
84.     <Button
85.         android:layout_gravity="fill"
86.         android:layout_columnWeight="1"
88.         android:text="5" />
90.     <Button
91.         android:layout_gravity="fill"
92.         android:layout_columnWeight="1"
93.         android:text="6"/>
95.     <Button
96.         android:layout_gravity="fill"
97.         android:layout_columnWeight="1"
98.         android:text="-"/>
99.     <Button
100.         android:layout_gravity="fill"
101.         android:layout_columnWeight="1"
102.         android:text="1" />
103.     <Button
104.         android:layout_gravity="fill"
105.         android:layout_columnWeight="1"
107.         android:text="2" />
109.     <Button
110.         android:layout_gravity="fill"
111.         android:layout_columnWeight="1"
112.         android:text="3"/>
114.     <Button
115.         android:layout_gravity="fill"
116.         android:layout_columnWeight="1"
117.         android:text="+"/>
118.     <Button
119.         android:layout_gravity="fill"
120.         android:layout_columnWeight="1"
121.         android:text="+/-" />
122.     <Button
123.         android:layout_gravity="fill"
124.         android:layout_columnWeight="1"
126.         android:text="0" />
128.     <Button
129.         android:layout_gravity="fill"
130.         android:layout_columnWeight="1"
131.         android:text="."/>
133.     <Button
134.         android:layout_gravity="fill"
135.         android:layout_columnWeight="1"
136.         android:text="="/>
138. </GridLayout>

复制代码

 
改Button按钮颜色

不过我们实际的盘算器是没有那么显着的绿色的，那怎么改呢？
我们可以找到AndroidManifest.xml，在里找到以下主题。

Ctrl+鼠标左键进入themes.xml文件，将改写为：

1. Theme.MaterialComponents.DayNight.NoActionBar.Bridge

复制代码

 
当我们返回我们的XML文件就会看到

5.帧结构FrameLayout

帧结构用于在屏幕上创建一块空缺的区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认环境下，帧结构中的所有控件会与结构的左上角对齐。
2个特殊属性：

属性	相关方法	说明
android:foreground	setForeground(Drawable)	设置该帧结构容器的前景图像
android:foregroundGravity	setForeground(int)	界说绘制前景图像的gravity属性

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent">
5. <TextView
6.     android:layout_width="300dp"
7.     android:layout_height="300dp"
8.     android:layout_gravity="center"
9.     android:background="#FF33ffff" />
10. <TextView
11.     android:layout_width="240dp"
12.     android:layout_height="240dp"
13.     android:layout_gravity="center"
14.     android:background="#FF33ccff" />
15. <TextView
16.     android:layout_width="180dp"
17.     android:layout_height="180dp"
18.     android:layout_gravity="center"
19.     android:background="#FF3399ff" />
20. <TextView
21.     android:layout_width="120dp"
22.     android:layout_height="120dp"
23.     android:layout_gravity="center"
24.     android:background="#FF3366ff" />
25. <TextView
26.     android:layout_width="60dp"
27.     android:layout_height="60dp"
28.     android:layout_gravity="center"
29.     android:background="#FF3300ff" />
30. </FrameLayout>

复制代码

总体来讲，FrameLayout由于定位的欠缺，导致它的应用场景也比力少，不过之后使用碎片的时间是可以使用到的。

---

以上就是在android中几个常见的界面结构。
就先到这里了~
下期预报：android的一些常见的控件。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。