2022年夏季《移动软件开发》实验报告

姓名和学号? 王梓懿,20040031047
本实验属于哪门课程? 中国海洋大学22夏《移动软件开发》
实验名称? 实验5:第一个Android应用小程序
博客地址? https://adventurer-w.com/2022/08/21/Android1/
Github仓库地址? https://github.com/adventurer-w/OUC-WeChat2022/tree/master/AndroidEx1

一、实验目标

  • 仿微信“发现”页创建列表布局
  • Textview imageview 使用
  • LinearLayout 使用

    页面上主要包含5组列表,每组列表包含1-2个列表项。 具体内容解释如下:

    • 列表组1:“朋友圈”单行列表项;

    • 列表组2:“扫一扫”和“摇一摇”两行列表项;

    • 列表组3:“看一看”和“搜一搜”两行列表项;

    • 列表组4:“购物”和“游戏”两行列表项;

    • 列表组5:“小程序”单行列表项。

此外我还完成了附加项目——仿微信钱包页面

二、实验步骤

match_parent 自适应满屏 layout_width
layout_height text 所展现的字
textSize 字体大小 textColor 字体颜色
textStyle 字体样式 (italic:倾斜,bold:加粗,) gravity 在控件内部的位置(通用)
layout_margin 与其他控件的距离 (通用) padding 内部间隔距离

常用布局

LinearLayout(线性布局) RelativeLayout(相对布局) AbsoluteLayout(绝对布局) TableLayout(表格布局) FrameLayout(框架布局)

因为我之前有学过Android开发,环境之前已经配置完毕,本次实验使用了 Constraintlayout布局方式

main_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E1E1E1">

<LinearLayout
android:id="@+id/Lay7"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="3dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/Lay6">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_yx" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="游戏"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay4"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="18dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/Lay3">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_kyk" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="看一看"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay8"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="18dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/Lay7">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_xcx" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="小程序"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="发现"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
android:id="@+id/Lay6"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="18dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/Lay5">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_gw" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="购物"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay3"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="3dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/Lay2">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_yyy" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="摇一摇"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="16dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/Lay1">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_sys" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="扫一扫"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="8dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_pengyou" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="朋友圈"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

<LinearLayout
android:id="@+id/Lay5"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="3dp"
android:background="#fff"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/Lay4">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:background="@drawable/icon_sss" />

<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="搜一搜"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="10dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:background="@drawable/right" />
</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

second_layout.xml(附加项目)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#c0c0c0">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="230dp"
android:background="#686f79"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.00"
android:textColor="#FFFFFF"
android:textSize="17dp"
app:layout_constraintEnd_toEndOf="@+id/textView5"
app:layout_constraintStart_toStartOf="@+id/textView5"
app:layout_constraintTop_toBottomOf="@+id/textView5" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="银行卡"
android:textColor="#FFFFFF"
android:textSize="17dp"
app:layout_constraintBottom_toBottomOf="@+id/textView5"
app:layout_constraintEnd_toEndOf="@+id/imageView3"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toTopOf="@+id/textView5" />

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="零钱"
android:textColor="#FFFFFF"
android:textSize="17dp"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/textView3" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="钱包"
android:textColor="#FFFFFF"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/imageView"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_pay" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="收付款"
android:textColor="#FFFFFF"
android:textSize="17dp"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageView" />

<ImageView
android:id="@+id/imageView3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_k" />

<ImageView
android:id="@+id/imageView2"
android:layout_width="60dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imageView3"
app:layout_constraintHorizontal_bias="0.514"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.503"
app:srcCompat="@drawable/icon_q" />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="420dp"
android:layout_marginTop="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout333"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="125dp"
android:background="#FFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/constraintLayout33">

<ImageView
android:id="@+id/imageView444"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_gy" />

<TextView
android:id="@+id/textView888"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="腾讯公益"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView444"
app:layout_constraintStart_toStartOf="@+id/imageView444"
app:layout_constraintTop_toBottomOf="@+id/imageView444" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout555"
android:layout_width="0dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
app:layout_constraintTop_toTopOf="@id/constraintLayout55">

<ImageView
android:id="@+id/imageView555"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_bx" />

<TextView
android:id="@+id/textView999"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="保险服务"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView555"
app:layout_constraintHorizontal_bias="0.416"
app:layout_constraintStart_toStartOf="@+id/imageView555"
app:layout_constraintTop_toBottomOf="@+id/imageView555" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout666"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/constraintLayout66"/>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout66"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/constraintLayout6">

<ImageView
android:id="@+id/imageView66"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_cs" />

<TextView
android:id="@+id/textView100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="城市服务"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView66" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout55"
android:layout_width="0dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
app:layout_constraintTop_toTopOf="@id/constraintLayout5">

<ImageView
android:id="@+id/imageView55"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_qb" />

<TextView
android:id="@+id/textView99"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Q币充值"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView55"
app:layout_constraintHorizontal_bias="0.416"
app:layout_constraintStart_toStartOf="@+id/imageView55"
app:layout_constraintTop_toBottomOf="@+id/imageView55" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout33"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="125dp"
android:background="#FFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/constraintLayout3">

<ImageView
android:id="@+id/imageView44"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_sh" />

<TextView
android:id="@+id/textView88"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="生活缴费"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView44"
app:layout_constraintStart_toStartOf="@+id/imageView44"
app:layout_constraintTop_toBottomOf="@+id/imageView44" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout3"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="42dp"
android:background="#FFFFFF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/linearLayout">

<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_xyk" />

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="信用卡还款"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView4"
app:layout_constraintStart_toStartOf="@+id/imageView4"
app:layout_constraintTop_toBottomOf="@+id/imageView4" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout5"
android:layout_width="0dp"
android:layout_height="124dp"
android:layout_marginStart="2dp"
android:layout_marginTop="42dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toStartOf="@+id/constraintLayout6"
app:layout_constraintStart_toEndOf="@+id/constraintLayout3"
app:layout_constraintTop_toTopOf="@+id/linearLayout">

<ImageView
android:id="@+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_sj" />

<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="手机充值"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="@+id/imageView5"
app:layout_constraintHorizontal_bias="0.416"
app:layout_constraintStart_toStartOf="@+id/imageView5"
app:layout_constraintTop_toBottomOf="@+id/imageView5" />
</androidx.constraintlayout.widget.ConstraintLayout>

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#FFFFFF"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="腾讯服务" />
</LinearLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout6"
android:layout_width="132dp"
android:layout_height="124dp"
android:layout_marginTop="42dp"
android:layout_marginEnd="2dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/linearLayout">

<ImageView
android:id="@+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_lct" />

<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="理财通"
android:textSize="17dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

三、程序运行结果

四、问题总结与体会

问题一:顶部导航栏(ActionBar)默认为紫色,不美观

在MainActivity.java中,setContentView(R.layout.main)前添加一行Objects.requireNonNull(getSupportActionBar()).hide();

问题二:状态栏默认为紫色

对themes.xml文件进行如下修改,将状态栏设置为灰色 #FF8E8E。

总结

因为我大一的时候有过一些Android学习经历(项目地址:https://github.com/adventurer-w/TaoBaoBao1.0),对xml的编写算是轻车熟路了,也完成了附加项目。除了LinearLayout,实验还使用了Google推荐的Constraintlayout布局方式。

实验二

一、实验目标

分为四个模块:

顶部图片 顶部菜单 栏中部消息模 块底部Tab按钮

要点:

ScrollView 使用

RelativeLayout 使用

插件之间的穿插使用

常用布局

LinearLayout(线性布局) RelativeLayout(相对布局) AbsoluteLayout(绝对布局) TableLayout(表格布局) FrameLayout(框架布局)

因为我之前有学过Android开发,本次实验还使用了 Constraintlayout布局方式

二、实验步骤

RelativeLayout,顾名思义,相对布局,也是非常常用的布局,他比LinearLayout更加灵活,可以实现非常复杂的UI。

layout_width:宽 layout_height:高 gravity:控制子控件的位置

" alt="image-20220822203231206" style="zoom:40%;" />

顶部显示栏目

  • 设置宽高
  • 设置文字
  • 设置字体样式
  • 设置字体颜色
  • 字体居中

顶部图片

  • 设置宽高
  • src加载图片
  • 设置边距

菜单栏

  • 首先我们创建一个横向的LinearLayout来作为菜单栏的父布局
  • 再次创建一个LinearLayout作为单个按钮的父布局
  • 创建上边的图片按钮,并设置其属性
  • 设置按钮底部文字并赋予其属性

块底部Tab按钮

  • 首先我们创建一个横向的LinearLayout来作为菜单栏的父布局(我使用了Constraintlayout实现)
  • 再次创建一个LinearLayout作为单个按钮的父布局
  • 按钮这个地方使用了RelativeLayout编写

栏中部消息模

  • 首先我们创建一个横向的LinearLayout来作为菜单栏的父布局
  • 创建待办Textview创建更多Textview

把layout的xml写好后,由于需要实现圆角,需要在drawable文件夹中新建一个shape.xml文件,之后布局文件中设置背景颜色为shape.xml即可。利用shape元素实现圆角。

third_layout.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/aaa"
android:layout_width="match_parent"
android:layout_height="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent">

<ImageView
android:id="@+id/imageView7"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="28dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_sy" />

<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textColor="#4A99FB"
app:layout_constraintEnd_toEndOf="@+id/imageView7"
app:layout_constraintStart_toStartOf="@+id/imageView7"
app:layout_constraintTop_toBottomOf="@+id/imageView7" />

<ImageView
android:id="@+id/imageView9"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="28dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_sz" />

<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#D0D4D8"
app:layout_constraintEnd_toEndOf="@+id/imageView9"
app:layout_constraintStart_toStartOf="@+id/imageView9"
app:layout_constraintTop_toBottomOf="@+id/imageView9" />

<ImageView
android:id="@+id/imageView10"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toEndOf="@+id/imageView7"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_yf" />

<ImageView
android:id="@+id/imageView11"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="@+id/imageView9"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/icon_tj" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50121653" />

<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="验房"
android:textColor="#D0D4D8"
app:layout_constraintEnd_toEndOf="@+id/imageView10"
app:layout_constraintStart_toStartOf="@+id/imageView10"
app:layout_constraintTop_toBottomOf="@+id/imageView10" />

<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="统计"
android:textColor="#D0D4D8"
app:layout_constraintEnd_toEndOf="@+id/imageView11"
app:layout_constraintStart_toStartOf="@+id/imageView11"
app:layout_constraintTop_toBottomOf="@+id/imageView11" />
</androidx.constraintlayout.widget.ConstraintLayout>

<ScrollView
android:id="@+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:padding="3dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="首页"
android:textColor="#333"
android:textSize="18dp"
android:textStyle="bold" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#808080">

</View>

<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:src="@drawable/test_img" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:orientation="horizontal"
android:weightSum="4">

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageButton1"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/test_icon1" />

<TextView
android:id="@+id/textView112"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="验房"
android:textColor="#454545"
android:textStyle="bold" />
</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageButton2"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/test_icon2" />

<TextView
android:id="@+id/textView113"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="日常巡逻"
android:textColor="#454545"
android:textStyle="bold" />
</LinearLayout>


<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageButton4"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/icon_ysgl" />

<TextView
android:id="@+id/textView115"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="钥匙管理"
android:textColor="#454545"
android:textStyle="bold" />
</LinearLayout>


<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<ImageView
android:id="@+id/imageButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/icon_tjfx" />

<TextView
android:id="@+id/textView11"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="统计分析"
android:textColor="#454545"
android:textStyle="bold" />
</LinearLayout>

</LinearLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="345dp"
android:background="#F0F0F0"
android:padding="20dp"
>

<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
android:textColor="#808080"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="待办(10)"
android:textColor="#373737"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_marginTop="16dp"
android:background="@drawable/shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout7">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout44"
android:layout_width="70dp"
android:layout_height="20dp"
android:background="@drawable/shape3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/textView188"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="验房"
android:textColor="#FFFFFF"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
android:id="@+id/textView199"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="32dp"
android:text="白宫一期1号楼101房间问题待指派"
android:textColor="#6B6B6B"
android:textSize="13sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView200"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="6dp"
android:text="88"
android:textColor="#F45151"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView199" />

<TextView
android:id="@+id/textView211"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="条"
app:layout_constraintBottom_toBottomOf="@+id/textView200"
app:layout_constraintStart_toEndOf="@+id/textView200"
app:layout_constraintTop_toTopOf="@+id/textView200" />

<ImageView
android:id="@+id/imageView122"
android:layout_width="7dp"
android:layout_height="14dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/right" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout7"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_marginTop="35dp"
android:background="@drawable/shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout4"
android:layout_width="70dp"
android:layout_height="20dp"
android:background="@drawable/shape2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="钥匙管理"
android:textColor="#FFFFFF"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
android:id="@+id/textView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="32dp"
android:text="汤臣一品8号楼8单元888业主提报钥匙租用申请"
android:textColor="#6B6B6B"
android:textSize="13sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="6dp"
android:text="666"
android:textColor="#F45151"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView19" />

<TextView
android:id="@+id/textView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="条"
app:layout_constraintBottom_toBottomOf="@+id/textView20"
app:layout_constraintStart_toEndOf="@+id/textView20"
app:layout_constraintTop_toTopOf="@+id/textView20" />

<ImageView
android:id="@+id/imageView12"
android:layout_width="7dp"
android:layout_height="14dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/right" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>


</ScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

三、程序运行结果

附加实验(代码在上一个报告里面)

四、问题总结与体会

问题一:顶部导航栏(ActionBar)默认为紫色,不美观

在MainActivity.java中,setContentView(R.layout.main)前添加一行Objects.requireNonNull(getSupportActionBar()).hide();

问题二:状态栏默认为紫色

对themes.xml文件进行如下修改,将状态栏设置为灰色 #FF8E8E。

问题三:实现控件圆角

把layout的xml写好后,由于需要实现圆角,需要在drawable文件夹中新建一个shape.xml文件,之后布局文件中设置背景颜色为shape.xml即可。利用shape元素实现圆角。

1
2
3
4
5
6
7
8
9
10
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="0dp" />
<solid android:color="#53cdbe"/>
</shape>

总结

因为我大一的时候有过一些Android学习经历,对xml的编写算是轻车熟路了,也完成了附加项目。实验使用了Google推荐的Constraintlayout布局方式。