抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

Android 开发(三) 页面设计(基础)

字数：1.9k 字

时长：9 分钟
Android

发布于：2024年5月19日

教程：

https://ithelp.ithome.com.tw/m/articles/10192957

https://blog.csdn.net/huangyimo/article/details/86221745

1 界面介绍

在设计面板时，我们可以不使用XML试图，我们点击右上角的Design小图标即可切换到如下界面

Untitled

2 设计一个小页面

a 文本框

我们先设计一个text显示部分

1
2
3
4
5
6
7
8
9
10
11
<TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学生管理系统"
        android:textSize="20sp"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

我们一点一点解释上面的信息

android:id 是界面下唯一定位的id号

android:textSize=”20sp” 字体大小是20sp

距离顶部20dp

1
2
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"

左右都居中

1
2
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

b 图片

ImageView加载图片的方式有如下几种：

在布局文件中设置属性app:srcCompat加载本地图片。
setImageResource(int resId)：加载drawable文件夹中的资源文件。
setImageURI(Uri)：加载手机中的图片文件。
setImageBitmap(Bitmap)：加载Bitmap。
setImageDrawable(Drawable)：加载 Drawable。

我们把想要加载的图片导入到res/drawable中

1
cp ./test.jpg /home/xiaowu/AndroidStudioProjects/test2/app/src/main/res/drawable/

app:srcCompat="@drawable/test" 指的就是在drawable 文件夹下名为test的图片

1
2
3
4
5
6
7
8
9
<ImageView
    android:id="@+id/icon"
    android:layout_width="104dp"
    android:layout_height="104dp"
    app:srcCompat="@drawable/sysu"
    app:layout_constraintTop_toBottomOf="@id/title"
    android:layout_marginTop="20dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

c 输入框

先建立两个TextView控件，用来写“学号”和“密码”。“学号”（user_id）控件放在距离图片20dp，与屏幕左边也距离20dp。

1
2
3
4
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="20dp"
app:layout_constraintTop_toBottomOf="@id/icon"
android:layout_marginTop="20dp"

“密码”（user_pwd）控件放在user_id下方20dp处，用以实现上下两栏间距 20dp。

1
2
3
4
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="20dp"
app:layout_constraintTop_toBottomOf="@id/user_id"
android:layout_marginTop="20dp"

接着设置建立两个EditView控件，用来输入学号和密码。

输入学号的控件布局设置如下：

1
2
3
4
5
6
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@id/user_id"
app:layout_constraintLeft_toRightOf="@+id/user_id"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="20dp"

由上面代码可知道，我们将其放在user_id控件右边，同时距离屏幕右边20dp。但是下划线长度一直保持跟hint字数长短一致，查阅资料后，将layout_width的属性由wrap_content改为fill_parent才使得下划线由下图左的状态变为下图下。

Untitled

Untitled

输入密码的控件布局设置如法炮制即可。

同时注意以下两点：

1 学号对应的 EditText 只能输入数字：android:digits=”0123456789”

2 密码对应的 EditText 输入方式为密码：android:password=”true”

3 下划线上面固定的字体应这样设置：android:hint=”请输入学号（密码）”

实现效果如下：

Untitled

d 单选按钮

由于是单选按钮，所以我们先建立一个RadioGroup，之后再在里面建立两个单选按钮RadioButton。先让RadioGroup与容器左右都对齐，这样能实现两个单选按钮整体居中。对第2个按钮设置android:layout_marginLeft=”10dp”，使得两个按钮间距10dp。因为要求默认选中的按钮为第一个，所以对第一个按钮设置android:checked=”true”

Untitled

e 按钮

因为设置两个按钮居中比较困难，因此我先设置了一个id为“button_box”的View控件并使其居中，然后再将两个按钮放入其中。View的布局就是将其放RadioGroup下方20dp处并居中。

接下来就是建立两个Button控件，将第一个button与View左上对齐，第二个button设置其左边与第一个button右边距离10dp，从而实现按钮间的间距为10dp。

1
2
3
app:layout_constraintTop_toBottomOf="@id/radioButton"
android:layout_marginTop="20dp"
app:layout_constraintLeft_toLeftOf="parent"

要求“按钮背景框左右边框与文字间距 10dp，上下边框与文字间距 5dp，圆角半径 10dp，背景色为#3F51B5”，本来是想在button控件下直接设置的，但是无法实现。后来查阅资料后才找到以下的解决方法：

先是在res/drawable下新建一个shape.xml文件，在里面写上background属性设置：

Untitled

然后返回activity_main.xml文件，在button控件下进行引用：

1
android:background="@drawable/shape"

f 最后结果如下

Untitled

Untitled

总代码如下activaty_main.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
<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学生管理系统"
        android:textSize="20sp"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <ImageView
        android:id="@+id/icon"
        android:layout_width="104dp"
        android:layout_height="104dp"
        app:srcCompat="@drawable/test"
        app:layout_constraintTop_toBottomOf="@id/title"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/user_id"
        android:text="学号："
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/icon"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/user_pwd"
        android:text="密码："
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/user_id"
        android:layout_marginTop="20dp"/>

    <EditText
        android:id="@+id/text_userid"
        android:hint="请输入学号"
        android:textColor="#000000"
        android:textSize="18sp"
        android:paddingTop="0dp"
        android:digits="0123456789"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_id"
        app:layout_constraintLeft_toRightOf="@+id/user_id"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp"/>

    <EditText
        android:id="@+id/text_userpwd"
        android:hint="请输入密码"
        android:textColor="#000000"
        android:textSize="18sp"
        android:password="true"
        android:paddingTop="0dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_pwd"
        app:layout_constraintLeft_toRightOf="@+id/user_pwd"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp" />

    <RadioGroup
        android:id="@+id/radioButton"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/user_pwd"
        android:layout_marginTop="30dp">

        <RadioButton
            android:id="@+id/radioButton1"
            android:text="学生"
            android:textColor="#000000"
            android:textSize="18sp"
            android:checked="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <RadioButton
            android:id="@+id/radioButton2"
            android:text="教职工"
            android:textColor="#000000"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"/>
    </RadioGroup>

    <View
        android:id="@+id/button_box"
        android:layout_height="50dp"
        android:layout_width="185dp"
        app:layout_constraintTop_toBottomOf="@id/radioButton"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/button1"
        android:text="登录"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@id/button_box"
        app:layout_constraintTop_toTopOf="@id/button_box" />

    <Button
        android:id="@+id/button2"
        android:text="注册"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/button1"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toTopOf="@id/button_box"/>

</androidx.constraintlayout.widget.ConstraintLayout>

shape.xml

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:shape="rectangle">
    <solid android:color="#3f51b5"/>
    <corners android:radius="10dip"/>
    <padding
        android:bottom="5dp"
        android:top="5dp"
        android:left="10dp"
        android:right="10dp"/>
</shape>

更新于：2024年5月21日

字数：1.9k 字

时长：9 分钟

Android

Android开发

评论