目录
编辑3.准备图片,放在mipmap下面的ic_launcher_round文件下面
4.创建好边框文件(因为这里的按钮不是正的图形,边角是有一点圆的,所以需要进行修改)
5.在string里面定义变量,因为有四个变量,所以定义四个
6.在activity里面调用string,然后对其进行设置
3).给【登录】按钮注册监听器,实现监听器接口,编写事件处理方法
5).给【取消】按钮注册监听器,实现监听器接口,编写事件处理方法
编辑 2)用模板创建有三个好处:自动创建好MainActivity和activity_main.xml,并且在AndroidMainfest.xml中创建好activity(在项目清单文件里注册)
最终要实现的效果
仔细观察是垂直排列的,且分为三个板块,分别有四个变量
1.首先先建立一个安卓项目
2.修改为线性布局
3.准备图片,放在mipmap下面的ic_launcher_round文件下面
(这个图片,大家可以在网上下载)
4.创建好边框文件(因为这里的按钮不是正的图形,边角是有一点圆的,所以需要进行修改)
代码的复制:
<?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>
5.在string里面定义变量,因为有四个变量,所以定义四个
代码展示:
<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>
6.在activity里面调用string,然后对其进行设置
<?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>
总结:上面不是说了要分为三个板块嘛,且为纵向分布,所以第一个板块的android:layout_weight就设为2,下面两个板块分别为1,总体意思就是说最上面的那一部分占屏幕的1/2,剩下的两个分别为1/4。
最终实现效果为:
7.编写主页面代码
1).声明变量
2).通过控件资源标识符获取控件实例
3).给【登录】按钮注册监听器,实现监听器接口,编写事件处理方法
4).输入用户数据看是否成功(会出现的情况)
5).给【取消】按钮注册监听器,实现监听器接口,编写事件处理方法
8.换一种事件的处理方式
不采用事件监听方式,而采用时间绑定方式
1)给两个按钮添加Android:onClick,绑定事件处理的方法
注:绑定的这两个方法名,还没有在定义事件的处理方法,所以有红色波浪线
9.修改主页面代码
编写两个事件处理方法: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_login);
// 通过资源标识符获取控件实例
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();
}
}
此时,布局文件中的两个事件处理方法的红色波浪线消失
运行看一下效果:
10.基于模板创建主界面
(为后面的跳转做准备)
1)在包路径下面创建模板
2)用模板创建有三个好处:自动创建好MainActivity和activity_main.xml,并且在AndroidMainfest.xml中创建好activity(在项目清单文件里注册)
11.修改登录界面
单击登录按钮之后,如果用户名和密码正确,就要跳转到主界面,并且将用户名传递到主界面
运行代码的效果:
注:登录成功后,跳转到主界面,目前主界面一片空白。
12.修改主布局资源文件
1)将默认的约束布局改为线性布局
2)设置布局的背景属性
3)设置对齐居中方式
4)添加一个标签,用于显示欢迎信息
13.编写主界面代码
主界面要接受登录界面传递过来的数据,并显示在标签里
注:如果不定义的话后面会报错
14.修改主界面活动栏标题
1)在字符串资源文件里定义主界面标题变量
2)在安卓项目清单文件里设置主界面的标题
启动应用,查看效果:
总结一下:(思维导图是我们的华老师写的,先放在这儿,防止我后面找不到)