Android UI组件----用相对布局RelativeLayout做一个登陆界面
【声明】
欢迎转载，但请保留文章原始出处→_→
生命壹号：http://www.cnblogs.com/smyhvae/
文章来源：http://www.cnblogs.com/smyhvae/p/3839986.html
【正文】
两个小时的学习成果，对于我这种还没入门但渴望不断进步的初学者来说，是一种激励。通过自己一行一行的敲代码，实现了用相对布局做一个登陆界面的效果。
XML文件完整版代码如下：
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:padding="20dp" >
6
7 <!--定义"登陆界面"四个字的文本框，放在最上方的中央 -->
8 <TextView
9 android:id="@+id/lableView"
10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:layout_centerHorizontal="true"
13 android:text="登陆界面" />
14
15 <!--定义输入用户名的文本编辑框 -->
16 <EditText
17 android:id="@+id/usernameView"
18 android:layout_width="wrap_content"
19 android:layout_height="wrap_content"
20 android:layout_below="@id/lableView"
21 android:layout_alignParentLeft="true"
22 android:layout_alignParentRight="true"
23 android:hint="username" />
24
25 <!--定义输入密码的文本编辑框 -->
26 <EditText
27 android:id="@+id/passwordView"
28 android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:layout_below="@id/usernameView"
31 android:layout_alignParentLeft="true"
32 android:layout_alignParentRight="true"
33 android:hint="password"
34 android:inputType="textPassword" />
35
36 <!--定义“取消”的按钮 -->
37 <Button
38 android:id="@+id/cancleButton"
39 android:layout_width="wrap_content"
40 android:layout_height="wrap_content"
41 android:layout_below="@id/passwordView"
42 android:layout_alignParentRight="true"
43 android:text="取消" />
44
45 <!--定义“确定”的按钮，放在“取消”按钮的左边 -->
46 <Button
47 android:id="@+id/okButton"
48 android:layout_width="wrap_content"
49 android:layout_height="wrap_content"
50 android:layout_alignBottom="@id/cancleButton"
51 android:layout_toLeftOf="@id/cancleButton"
52 android:text="确定" />
53
54 </RelativeLayout>
代码解释如下：
05行：设置整个RelativeLayout的内边距为20dp，给界面留白。
21、22行：让编辑框的左边对齐到父控件的左边，右边对齐到父控件的右边，这样一来，就刚好横向覆盖整个界面。
30行：将passwordView放到usernameView的下面，以保证二者的相对位置不变。
34行：输入密码时显示为星号，以保证密码的安全
41、42行：将“取消”按钮放到passwordView的下面，并贴齐到父控件的右边
50、51行：将“确定”按钮放到“取消”按钮的左边，并贴齐到“取消”按钮的下边，以保证二者的相对位置不变
最终在手机上运行后，显示效果如下：
我的公众号
想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
