需求分析

使用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>