文章目录
实现应用简单的用户登录界面
① activity_main.xml 布局
Ⅰ.修改布局样式
- 1.将原有的布局样式更改为RelativeLayout相对布局样式
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="myapplication_test.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>
返回顶部
Ⅱ.添加主背景
-
注意我们的所有图片资源都放置在res(resource)目录下的drawable文件夹中。 - 为应用界面添加主背景
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/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="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="myapplication_test.MainActivity"
android:background="@drawable/main_page">
<TextView
android: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" />
<TextView
android:id="@+id/textview1" 设置组件id
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="204dp"
android:text="用户名:"
android:textColor="@android:color/white"
android:textSize="20dp"/>
<TextView
android: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" />
<EditText
android: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"/> 设置待输入文本框提示文字颜色
<EditText
android: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"/>
<TextView
android: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"/>
<TextView
android: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"/>
<Button
android: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"/>
<Button
android: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="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="myapplication_test.MainActivity"
android:background="@drawable/main_page">
<TextView
android: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" />
<TextView
android: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"/>
<TextView
android: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" />
<EditText
android: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"/>
<EditText
android: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"/>
<TextView
android: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" />
<TextView
android: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" />
<Button
android: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"/>
<Button
android: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>
返回顶部
