Android UI组件----用相对布局RelativeLayout做一个登陆界面

简介:

【正文】

两个小时的学习成果,对于我这种还没入门但渴望不断进步的初学者来说,是一种激励。通过自己一行一行的敲代码,实现了用相对布局做一个登陆界面的效果。

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行:将“确定”按钮放到“取消”按钮的左边,并贴齐到“取消”按钮的下边,以保证二者的相对位置不变

最终在手机上运行后,显示效果如下:

相关文章
|
10月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
298 3
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
391 4
|
10月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
290 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
10月前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
239 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
620 55
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
存储 Android开发 开发者
深入理解安卓应用开发的核心组件
【10月更文挑战第8天】探索Android应用开发的精髓,本文带你了解安卓核心组件的奥秘,包括Activity、Service、BroadcastReceiver和ContentProvider。我们将通过代码示例,揭示这些组件如何协同工作,构建出功能强大且响应迅速的应用程序。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和深度知识。
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
509 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
定位技术 容器
48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局:辅助线定位技术打造专业级UI
在HarmonyOS NEXT的UI开发中,表单是常见且重要的界面元素。创建对齐精确、布局合理的表单需要精细的定位控制。RelativeContainer提供的辅助线(Guideline)功能,为表单布局提供了强大的支持。本教程将详细讲解如何使用RelativeContainer的辅助线功能实现精确的表单布局,帮助你掌握这一专业级UI技术。
314 7

热门文章

最新文章