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)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM