需求分析

实现如下图所示的效果

需要设置字体大小，对齐方式，组件间隔，按钮样式

最外层布局具有一个整体的内边距

当点击按钮时，背景色改为红色，字体颜色改为黄色

当输入框捕获焦点时（点击时），要求其边框为加粗的蓝色圆角框，否则要求其边框为细的灰色圆角框

仅使用相对布局实现

布局实施

整体内边距

设置最外层RelativeLayout的paddingHorizontal边距

android:paddingHorizontal=“10dp”

确定退出文字设计

最顶端有一个居中的“你确定要退出吗？”文本显示，使用TextView来实现

设置TextView的尺寸适应内容，文本内容，文字大小，加粗显示，水平居中，

由于相对布局需要知道其兄弟组件名，赋予其id为text1

1
2
3
4
5
6
7
8
<TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="你确定要退出吗?"
       android:textSize="30sp"
       android:textStyle="bold"
       android:layout_centerHorizontal="true"
       android:id="@+id/text1" />

呈现效果如下图，

现在需要设置垂直方向的布局，有两种方案，一种是对TextView组件添加上下内边距，一种是对TextView组件添加上下外边距。

通过添加内边距实现

新增两行属性

android:paddingTop=“100dp”
android:paddingBottom=“100dp”

或者直接一行

android:paddingVertical=“100dp”

即可实现如下图效果

通过添加外边距实现

新增两行属性

android:layout_marginTop=“100dp”
android:layout_marginBottom=“100dp”

或者直接一行

android:layout_marginVertical=“100dp”

即可实现如下图效果

按钮区域实现

按钮区域使用相对布局，宽度充满父容器，高度自适应内容，相对于text1的下方，背景色为#077A6F，按钮与按钮区域容器存在边距5dp

有两个按钮，按钮间距为30dp，两按钮共同水平居中显示

组件id为layout1

初步布局如下，

android:layout_toEndOf属性表示该组件相对于指定组件的右端放置，

android:layout_marginStart属性表示该组件的左外边距为30dp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<RelativeLayout
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/text1"
    android:background="#077A6F"
    android:paddingVertical="5dp">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确定" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_toEndOf="@+id/btn1"
        android:="@+id/btn1"
        android:text="取消" />

</RelativeLayout>

初步实现了如下图所示的布局，

现在需要将两按钮共同垂直居中，这里也有两种方法。

使用布局的gravity属性

在按钮的父容器RelativeLayout中，使用属性

android:gravity=“center”

即可实现容器内所有孩子共同居中，效果如下图所示

对子组件再次嵌套一层布局

将两按钮使用另一个RelativeLayout包裹成一个整体组件，再对其应用android:layout_centerInParent="true"属性相对父布局居中，也可实现目标效果。

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
<RelativeLayout
        android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/text1"
    android:background="#077A6F"
    android:paddingVertical="5dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确定" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_toEndOf="@+id/btn1"
            android:="@+id/btn1"
            android:text="取消" />
    </RelativeLayout>

</RelativeLayout>

最下侧输入框布局

分析可得，旧密码区域与新密码区域布局完全相同，可套在同一个RelativeLayout中，该外层RelativeLayout相对于上一个按钮区域的布局存在一定的上边距，可简单使用android:layout_marginTop属性。

新密码区相对于旧密码区在下方，对于每个密码区域，都有一个TextView与EditText组成，EditText在TextView的右侧，TextView尺寸应当是wrap_content的，EditText的宽度应当占满剩余宽度，即match_parent，其高度手动设置70dp，存在一定的垂直外边距

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
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout1"
    android:layout_marginTop="50dp">

    <RelativeLayout
        android:id="@+id/oldPwdLyt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/oldPwdText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="旧密码："
            android:textSize="30sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginVertical="8dp"
            android:layout_toEndOf="@+id/oldPwdText" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/newPwdLyt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/oldPwdLyt">

        <TextView
            android:id="@+id/newPwdText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="新密码："
            android:textSize="30sp" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginVertical="8dp"
            android:layout_toEndOf="@+id/newPwdText" />
    </RelativeLayout>
</RelativeLayout>

最终效果如下图所示，

样式调整

按钮样式

为了使按钮颜色设置起作用，需要修改全局主题设置，

将MaterialComponents修改为AppCompat

新建一个drawable

编写 xml内容如下，

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#eee"/>
    <corners android:radius="30dp"/>
</shape>

得到该drawable的效果

设置两按钮的background属性

android:background="@drawable/circleradius"

得到效果图如下，

为实现按压时的效果，需继续使用selector的drawable

创建文件text_selector_drawable.xml

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#ff0"/>
    <item android:color="#000"/>
</selector>

创建文件btn_selector_drawable.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#f00"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#eee"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

对按钮添加两个属性，即可实现按钮的两种样式在不同状态时的动态切换

android:background="@drawable/btn_selector_drawable"
android:textColor="@drawable/text_selector_drawable"

文本框样式

新建editor_selector_drawable.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <stroke android:width="5dp" android:color="#00f" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#999" />
            <corners android:radius="5dp" />
        </shape>
    </item>
</selector>

设置两个EditText的background属性为

android:background="@drawable/editor_selector_drawable"

得到最终效果如下，

布局文件最终代码

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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:paddingHorizontal="10dp">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:paddingVertical="100dp"
        android:text="你确定要退出吗?"
        android:textSize="30sp"
        android:textStyle="bold" />

    <RelativeLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text1"
        android:background="#13A99B"
        android:paddingVertical="8dp"
        android:gravity="center">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_selector_drawable"
            android:text="确定"
            android:textColor="@drawable/text_selector_drawable"
            android:textSize="30sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_toEndOf="@+id/btn1"
            android:background="@drawable/btn_selector_drawable"
            android:textColor="@drawable/text_selector_drawable"
            android:text="取消"
            android:textSize="30sp"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/layout1"
        android:layout_marginTop="50dp">

        <RelativeLayout
            android:id="@+id/oldPwdLyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/oldPwdText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="旧密码："
                android:textSize="30sp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:layout_marginVertical="8dp"
                android:layout_toEndOf="@+id/oldPwdText"
                android:background="@drawable/editor_selector_drawable"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/newPwdLyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/oldPwdLyt">

            <TextView
                android:id="@+id/newPwdText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="新密码："
                android:textSize="30sp" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:layout_marginVertical="8dp"
                android:layout_toEndOf="@+id/newPwdText"
                android:background="@drawable/editor_selector_drawable" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

真机效果展示