文章目录
1、提出任务
- 用户登录界面:原型图
- 登录成功,跳转到主界面
- 登录失败,弹出吐–“用户名或密码错误”
2、任务编写
1)创建安卓项目
-
选择Empty Acitivity类型
-
设置项目信息
2)准备图片资源
3)创建按钮边框配置文件
- 在drawable目录里创建button.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>
4)在字符资源文件里定义变量
- 打开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>
5)主布局资源文件
- 编写主布局资源文件 - 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/user"/>
</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/users"/>
<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/password"/>
<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"
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"/>
</LinearLayout>
</LinearLayout>
- 查看效果
6)编写主界面代码
- 主界面 - MainActivity
package com.liufanrong.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;
private Button btnLogin;
private Button btnCancel;
@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);
btnLogin = findViewById(R.id.btn_login);
btnCancel = findViewById(R.id.btn_cancel);
// 给【登录】按钮注册监听器,实现监听器接口,编写事件处理方法
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 获取用户输入的数据
String username = edtUsername.getText().toString().trim();
String password = edtPassword.getText().toString().trim();
// 判断用户是否登录成功(设置合法的用户和密码)
if (username.equals("xiaoxiaorong") && password.equals("212603")) {
Toast.makeText(MainActivity.this,"登录成功!", Toast.LENGTH_LONG).show();
}else {
Toast.makeText(MainActivity.this,"登录失败!", Toast.LENGTH_LONG).show();
// 清空用户名和密码文本框
edtUsername.setText("");
edtPassword.setText("");
// 让用户名文本框获取焦点
edtUsername.requestFocus();
}
给【取消】按钮注册监听器,实现监听器接口,编写事件处理方法
btnCancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 关闭当前窗口
finish();
}
});
}
});
}
}
- 运行程序查看效果
7)换一种事件处理方式
- 采用事件绑定方式
①修改主布局资源文件
- 给两个按钮添加android:onClick,绑定事件处理方法
<?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:layout_weight="2"
android:gravity="center">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:src="@mipmap/user" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
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/users" />
<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/password" />
<EditText
android:id="@+id/edt_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/password_hint"
android:inputType="textPassword"
android:singleLine="true" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_horizontal">
<Button
android:id="@+id/btn_login"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="@drawable/button"
android:text="@string/login"
android:textSize="20sp"
android:onClick="doLogin"/>
<Button
android:id="@+id/btn_cancel"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="@drawable/button"
android:onClick="doCancel"
android:text="@string/cancel"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
②修改主界面代码
- 不再定义按钮变量,获取按钮实例与注册监听器,只需要编写两个事件处理方法:doLogin(View v)与doCancel(View v)
package com.liufanrong.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);
}
/**
* 登录事件处理方法
*/
public void doLogin(View view) {
// 获取用户输入的数据
String username = edtUsername.getText().toString().trim();
String password = edtPassword.getText().toString().trim();
// 判断用户是否登录成功(设置合法的用户和密码)
if (username.equals("xiaoxiaorong") && password.equals("212603")) {
Toast.makeText(MainActivity.this,"登录成功!", Toast.LENGTH_LONG).show();
}else {
Toast.makeText(MainActivity.this,"登录失败!", Toast.LENGTH_LONG).show();
// 清空用户名和密码文本框
edtUsername.setText("");
edtPassword.setText("");
// 让用户名文本框获取焦点
edtUsername.requestFocus();
}
}
/**
* 取消事件处理方法
*/
public void doCancel(View view) {
finish();
}
}
- 查看结果