Android-ConstraintLayout实战
|字数总计:1.3k|阅读时长:6分钟|阅读量:|
需求分析
使用ConstraintLayout，完成以下布局的设计
实施
整体边距约束
对最外层ConstraintLayout添加属性，实现整体的内边距
android:padding=“20dp”
第一个标题
设置尺寸自适应，字号30sp，加粗显示后
设置该控件位于父容器左上角，即
-
Start与父容器的Start对齐
- app:layout_constraintStart_toStartOf=“parent”
-
Top与父容器的Top对齐
- app:layout_constraintTop_toTopOf=“parent”
1
2
3
4
5
6
7
8
9
| <TextView
android:id="@+id/third_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textStyle="bold"
android:text="说走就走的旅行"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
|
文本编辑框
首先需要让它在父容器的开始处，且在第一个标题的下方，即
app:layout_constraintStart_toStartOf=“parent”
app:layout_constraintTop_toBottomOf="@+id/third_text1"
需要在Top有个外边距，android:layout_marginTop=“20dp”
设置为圆角，使用third_editor_circle_rect.xml中定义的外形
1
2
3
4
5
6
7
8
| <EditText
android:id="@+id/third_editor"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/third_editor_circle_rect"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_text1"/>
|
third_editor_circle_rect.xml内容如下
1
2
3
4
5
6
7
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:color="#777" />
<corners android:radius="25dp" />
</shape>
|
三个地点文本
首先定义其圆角的drawable的third_btn_circle_rect.xml文件如下，
1
2
3
4
5
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp"/>
</shape>
|
分析可得，应当由三个TextView组成，每个TextView有上边距20dp，有内边距30dp，第一个和第三个TextView应当两端对齐，第二个TextView应当水平居中。编写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
| <TextView
android:id="@+id/third_europe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="欧洲"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#03A9F4"
android:padding="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="亚洲"
android:textSize="20sp"
android:padding="30dp"
android:layout_marginTop="20dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#FFEB3B"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="非洲"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:padding="30dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#801C15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor"/>
|
第二个标题
与第一个标题属性类似，只不过其Top与欧洲的TextView的Bottom对齐，存在一个上边距20dp，xml定义如下
1
2
3
4
5
6
7
8
9
10
| <TextView
android:id="@+id/third_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="受欢迎的旅游景点"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/third_europe" />
|
最后的图形
定义图形的drawable文件third_half_circle_rect.xml如下，
1
2
3
4
5
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="70dp" android:bottomRightRadius="70dp"/>
</shape>
|
控件xml定义如下，
top与第二个标题的bottom对齐
1
2
3
4
5
6
7
8
| <View
android:layout_width="wrap_content"
android:layout_height="400dp"
android:layout_marginTop="20dp"
android:background="@drawable/third_half_circle_rect"
android:backgroundTint="#AF1BED"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_text2" />
|
最终效果
真机运行效果如下，
完整布局代码
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
| <?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:id="@+id/third_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="说走就走的旅行"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/third_editor"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="@drawable/third_editor_circle_rect"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_text1" />
<TextView
android:id="@+id/third_europe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#03A9F4"
android:padding="30dp"
android:text="欧洲"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#FFEB3B"
android:padding="30dp"
android:text="亚洲"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/third_btn_circle_rect"
android:backgroundTint="#801C15"
android:padding="30dp"
android:text="非洲"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_editor" />
<TextView
android:id="@+id/third_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="受欢迎的旅游景点"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/third_europe" />
<View
android:layout_width="wrap_content"
android:layout_height="400dp"
android:layout_marginTop="20dp"
android:background="@drawable/third_half_circle_rect"
android:backgroundTint="#AF1BED"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/third_text2" />
</androidx.constraintlayout.widget.ConstraintLayout>
|
