文章目录
一、提出任务
-
用户登录界面(原型图)
-
登录成功,跳转到主界面,显示欢迎信息
-
登录失败,弹出吐司 - “用户名或密码错误”
二、涉及知识点
三、完成任务
(一)创建安卓项目
- 选择
Empty Activity
类型
- 设置项目信息
- 单击【Finish】按钮
- 运行项目,查看结果
(二)准备图片资源
- 将三张图片拷贝到
mipmap
目录
(三)创建按钮边框配置文件
- 在
drawable
目录里创建button_border.xml
文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#0a0934" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<stroke
android:width="0.5dp"
android:color="#787878" />
</shape>
(四)在字符串资源文件里定义变量
- 打开
strings.xml
文件
- 定义了四个字符串变量
<resources>
<string name="app_name">用户登录</string>
<string name="username_hint">输入用户名</string>
<string name="password_hint">输入密码</string>
<string name="login">登录</string>
<string name="cancel">取消</string>
</resources>
(五)主布局资源文件
- 编写主布局资源文件 -
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center"
android:layout_weight="2">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:src="@mipmap/users"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/user"/>
<EditText
android:id="@+id/edt_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/username_hint"
android:singleLine="true"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/pwd"/>
<EditText
android:id="@+id/edt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password_hint"
android:singleLine="true"
android:inputType="textPassword"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:gravity="center_horizontal"
android:layout_weight="1">
<Button
android:id="@+id/btn_login"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="@string/login"
android:textSize="20sp"
android:background="@drawable/button_border"
android:layout_marginRight="10dp"/>
<Button
android:id="@+id/btn_cancel"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="@string/cancel"
android:textSize="20sp"
android:background="@drawable/button_border"/>
</LinearLayout>
</LinearLayout>
- 启动应用,查看效果
(六)编写主界面代码
- 主界面 -
MainActivity
- 声明变量
- 通过控件资源标识符获取控件实例
- 给【登录】按钮注册监听器,实现监听器接口,编写事件处理方法
- 给【取消】按钮注册监听器,实现监听器接口,编写事件处理方法
(七)运行程序,查看效果
- 操作录屏
(八)换一种事件处理方式
- 下面,我们不采用事件监听方式,而采用事件绑定方式
1、修改主布局资源文件
- 给两个按钮添加
android:onClick
,绑定事件处理方法
- 此时绑定的两个方法名
doLogin
与doCancel
有红色波浪线,因为还没有在代码里定义这两个事件处理方法。
2、修改主界面代码
- 不再定义按钮变量,获取按钮实例与注册监听器,只需要编写两个事件处理方法:
doLogin(View v)
与doCancel(View v)
package net.huawei.login;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private EditText edtUsername;
private EditText edtPassword;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 利用布局资源设置用户界面
setContentView(R.layout.activity_main);
// 通过资源标识符获取控件实例
edtUsername = findViewById(R.id.edt_username);
edtPassword = findViewById(R.id.edt_password);
}
/**
* 登录事件处理方法
*
* @param v
*/
public void doLogin(View v) {
// 获取用户输入的数据
String username = edtUsername.getText().toString().trim();
String password = edtPassword.getText().toString().trim();
// 判断用户是否登录成功(设置合法的用户名和密码)
if (username.equals("howard") && password.equals("903213")) {
Toast.makeText(this, "登录成功,欢迎访问系统~", Toast.LENGTH_LONG).show();
} else {
Toast.makeText(this, "登录失败,用户名或密码错误~", Toast.LENGTH_LONG).show();
// 清空用户名和密码文本框
edtUsername.setText("");
edtPassword.setText("");
// 让用户名文本框获取焦点
edtUsername.requestFocus();
}
}
/**
* 取消事件处理方法
*
* @param v
*/
public void doCancel(View v) {
// 关闭当前窗口
finish();
}
}
- 此时,再去看布局文件,两个事件处理方法下的红色波浪线已经消失
3、运行程序,查看效果
- 测试两个按钮的功能
(九)修改主界面名称与主布局文件名
- 将
MainActivity
改名为LoginActivity
- 将
activity_main.xml
改名为activity_login.xml
(十)基于模板创建主界面
- New ⟹ \Longrightarrow ⟹ Activity ⟹ \Longrightarrow ⟹ Empty Activity
- 单击【Finish】按钮
- 基于模板创建界面,不仅有界面,有布局,而且还帮我们在项目清单文件里注册
(十一)修改登录界面代码
- 单击登录按钮之后,如果用户名和密码正确,就要跳转到主界面,并且将用户名传递到主界面
- 此时,运行程序,看能否跳转到主界面
- 登录成功后,跳转到主界面,目前主界面一片空白。
(十二)修改主布局资源文件
- 将默认的约束布局改为线性布局
- 添加一个背景图片
- 设置布局的背景属性
- 设置对齐居中方式
- 添加一个标签,用于显示欢迎信息
(十三)编写主界面代码
- 主界面要接受登录界面传递过来的数据,并显示在标签里
(十四)修改主界面活动栏标题
- 在字符串资源文件里定义主界面标题变量
- 在安卓项目清单文件里设置主界面的标题
(十五)启动应用,查看效果
- 启动应用,输入正确的用户名和密码,就可以跳转到主界面,看到欢迎信息