1200字范文 > 【Android】实现应用简单的用户登录界面

【Android】实现应用简单的用户登录界面

时间：2022-12-15 23:17:55

文章目录

实现应用简单的用户登录界面① activity_main.xml 布局Ⅰ.修改布局样式Ⅱ.添加主背景Ⅲ.添加登陆界面所需组件② 运行app③ 最终调整样式及代码

实现应用简单的用户登录界面

① activity_main.xml 布局

Ⅰ.修改布局样式

1.将原有的布局样式更改为RelativeLayout相对布局样式

返回顶部

Ⅱ.添加主背景

注意我们的所有图片资源都放置在res(resource)目录下的drawable文件夹中。为应用界面添加主背景

<RelativeLayout xmlns:app="/apk/res-auto"xmlns:tools="/tools"xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="myapplication_test.MainActivity"android:background="@drawable/main_page" 添加主背景>

返回顶部

Ⅲ.添加登陆界面所需组件

初步设置组件

这里的组件就是指各种插件，具有不同的功能。例如：文本框可以实现应用程序上的文本输入功能、按钮组件可以实现点击触发事件，进而实现页面跳转等功能。（可以直接从左上方的组件栏中拖至右侧展示窗口中释放来完成组件的添加<Design界面>，之后通过代码来进行细节调整< Text界面 >）

对组件进行细微调整：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:app="/apk/res-auto"xmlns:tools="/tools"xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="myapplication_test.MainActivity"android:background="@drawable/main_page"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginStart="157dp"android:layout_marginLeft="157dp"android:layout_marginTop="122dp"android:text="用户登陆" 文字设置android:textColor="@android:color/white" 颜色设置android:textSize="24dp" 字体大小设置android:textStyle="bold"字体样式设置app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/textview1" 设置组件idandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginStart="50dp"android:layout_marginLeft="50dp"android:layout_marginTop="204dp"android:text="用户名:"android:textColor="@android:color/white"android:textSize="20dp"/><TextViewandroid:id="@+id/textview2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginStart="50dp"android:layout_marginLeft="50dp"android:layout_marginTop="255dp"android:text="密码:"android:textColor="@android:color/white"android:textSize="20dp" /><EditTextandroid:id="@+id/username"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_marginTop="195dp"android:layout_marginEnd="62dp"android:layout_marginRight="62dp"android:ems="10"android:inputType="textPersonName"android:text=""android:hint="请输入用户名" 设置待输入文本框提示android:textColorHint="@android:color/white"/> 设置待输入文本框提示文字颜色<EditTextandroid:id="@+id/pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_marginTop="244dp"android:layout_marginEnd="62dp"android:layout_marginRight="62dp"android:ems="10"android:inputType="textPassword"android:text=""android:hint="请输入密码"android:textColorHint="@android:color/white"/><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_centerVertical="true"android:layout_marginStart="101dp"android:layout_marginLeft="101dp"android:text="注册"android:textSize="18dp"android:textColor="@android:color/white"/><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginEnd="96dp"android:layout_marginRight="96dp"android:text="忘记密码？"android:textSize="18dp"android:textColor="@android:color/white"/><Buttonandroid:id="@+id/login"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentBottom="true"android:layout_marginStart="65dp"android:layout_marginLeft="65dp"android:layout_marginBottom="86dp"android:text="登陆"android:backgroundTint="@android:color/holo_green_light"/><Buttonandroid:id="@+id/back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:layout_marginEnd="65dp"android:layout_marginRight="65dp"android:layout_marginBottom="86dp"android:text="退出"android:backgroundTint="@android:color/holo_red_light"/> 设置按钮组件背景颜色</RelativeLayout>

返回顶部

② 运行app

到这里我们可以看到基本的登录界面已经完成！(由于模拟器版本差异，在程序界面设置的样式，最终应用到手机模拟器上时，会出现一些错位，当然也可以进一步进行调整)可以通过对代码设置边距进行调整，或者看模拟器是否适配模拟机。按照下图可以先进行模拟器与模拟机机型的匹配，若实在不行就进行手动代码改动。

返回顶部

③ 最终调整样式及代码

本人使用的机型：Nexus 5X API 26最终调整代码：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:app="/apk/res-auto"xmlns:tools="/tools"xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="myapplication_test.MainActivity"android:background="@drawable/main_page"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginStart="157dp"android:layout_marginLeft="157dp"android:layout_marginTop="100dp"android:text="用户登陆"android:textColor="@android:color/white"android:textSize="24dp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/textview1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginStart="50dp"android:layout_marginLeft="50dp"android:layout_marginTop="180dp"android:text="用户名:"android:textColor="@android:color/white"android:textSize="20dp"/><TextViewandroid:id="@+id/textview2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginStart="50dp"android:layout_marginLeft="50dp"android:layout_marginTop="220dp"android:text="密码:"android:textColor="@android:color/white"android:textSize="20dp" /><EditTextandroid:id="@+id/username"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_marginTop="172dp"android:layout_marginEnd="62dp"android:layout_marginRight="62dp"android:ems="10"android:inputType="textPersonName"android:text=""android:hint="请输入用户名"android:textColorHint="@android:color/white"/><EditTextandroid:id="@+id/pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_marginTop="212dp"android:layout_marginEnd="62dp"android:layout_marginRight="62dp"android:ems="10"android:inputType="textPassword"android:text=""android:hint="请输入密码"android:textColorHint="@android:color/white"/><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentBottom="true"android:layout_marginStart="101dp"android:layout_marginLeft="101dp"android:layout_marginBottom="290dp"android:text="注册"android:textColor="@android:color/white"android:textSize="18dp" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:layout_marginEnd="96dp"android:layout_marginRight="96dp"android:layout_marginBottom="290dp"android:text="忘记密码？"android:textColor="@android:color/white"android:textSize="18dp" /><Buttonandroid:id="@+id/login"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_alignParentBottom="true"android:layout_marginStart="65dp"android:layout_marginLeft="65dp"android:layout_marginBottom="86dp"android:text="登陆"android:backgroundTint="@android:color/holo_green_light"/><Buttonandroid:id="@+id/back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentEnd="true"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:layout_marginEnd="65dp"android:layout_marginRight="65dp"android:layout_marginBottom="86dp"android:text="退出"android:backgroundTint="@android:color/holo_red_light"/></RelativeLayout>

返回顶部

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。