前言：

期末了，期末大作业也来了，本篇将记录我的登录页面制作。如有不完善或错误的地方，欢迎大佬指出Orz

具体判断用户名与名匹配，因为各自情况不同，本篇不不涉及

UI布局

主体布局

布局采用了线性布局，xml的代码如下（记录时）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录"
        android:layout_marginBottom="50dp"
        android:textColor="#1097DF"
        android:textSize="35dp"
        android:textStyle="bold"
        ></TextView>
    <EditText
        android:drawableLeft="@drawable/yonghu"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:id="@+id/etuser"
        android:hint="请输入用户名"
        android:background="@drawable/edittext_style"
    ></EditText>
    <EditText
        android:drawableLeft="@drawable/mima"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:id="@+id/etpwd"
        android:hint="请输入密码"
        android:inputType="textPassword"
android:background="@drawable/edittext_style"
        ></EditText>
    <CheckBox
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:id="@+id/checkbox"
        android:textColor="#2196F3"
        android:text="记住密码"
        ></CheckBox>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="登录"
        android:id="@+id/Login_btn"
        ></Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:onClick="Back"
        android:text="退出"
        android:id="@+id/Back_btn"
        ></Button></LinearLayout>
</LinearLayout>

上面有用到两个图标资源（即android:drawableLeft="@drawable/mima"和android:drawableLeft="@drawable/yonghu"），本篇不提供，可以去iconfont-阿里巴巴矢量图标库挑选自己喜欢的图标

EditText样式修改

输入框我做了样式修改，请在drawable文件夹下新建xml文件edittext_style，其代码为

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#D5EDE9E9"></solid>
    <corners android:radius="10dp"></corners>
</shape>

这部分样式修改主要是将EditText即可输入文本框的背景设为淡灰色，并设置圆角。

效果图

基本效果图如下

T7qj2j.png

其他文件

为后续演示跳转，我们再新建一个简单的xml文件index，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
 <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello World"
     android:gravity="center"
    ></TextView>
</LinearLayout>

以及对应的java代码，新建一个java文件Idex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.example.mylogindemo;

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class Index extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.index);
    }
}

package com.example.mylogindemo;根据自己的项目名，自行修改

另外记得在文件夹maxifests下的AndroidManifest中添加（application标签内）

1
<activity android:name=".Index"></activity>

JAVA代码

该部分总览如下，具体可见我在代码中的注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
package com.example.mylogindemo;

import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.Color;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    EditText etuser,etpwd;
    Button thelogin;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        etuser=findViewById(R.id.etuser);//用户名输入框
        etpwd=findViewById(R.id.etpwd);//密码输入框
        thelogin=findViewById(R.id.Login_btn);//登录按钮
        ActionBar bar=getSupportActionBar();
        bar.setTitle("登录演示");
        View theview=getLayoutInflater().inflate(R.layout.activity_main,null);
        Read(theview);
        //登录按钮点击侦听
        thelogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Login(theview);
            }
        });
        //用户名输入框或密码输入框为空时
        if(etpwd.getText().toString().length()==0||etuser.getText().toString().length()==0){
            thelogin.setClickable(false);//设置按钮不可点击
            thelogin.setBackgroundColor(Color.parseColor("#abddff"));//按钮颜色换成偏淡一点的蓝色
        }
        //监听文本变化
        TextWatcher textWatcher=new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void afterTextChanged(Editable editable) {
                if(etpwd.getText().toString().length()==0||etuser.getText().toString().length()==0){
                    thelogin.setClickable(false);
                    thelogin.setBackgroundColor(Color.parseColor("#abddff"));
                }else{
                    thelogin.setClickable(true);
                    thelogin.setBackgroundColor(Color.parseColor("#077AF4"));
                }
            }
        };
        etpwd.addTextChangedListener(textWatcher);
        etuser.addTextChangedListener(textWatcher);
    }
    //登录
    public void Login(View view){
        String theuser =etuser.getText().toString();
        String thepwd=etpwd.getText().toString();
        CheckBox checkbox=findViewById(R.id.checkbox);
        //侦听复选框
        checkbox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
        Save(theuser,thepwd);
        Intent it = new Intent(MainActivity.this, Index.class);
        startActivity(it);
        Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
    }
    //存储用户名与密码
    void Save(String username,String password){
        SharedPreferences preferences=getSharedPreferences("yzyDemo",MODE_PRIVATE);
        SharedPreferences.Editor editor=preferences.edit();
        editor.putString("username",username);
        editor.putString("password",password);
        editor.commit();
    }
    //读取存储的用户名与密码
    void Read(View view){
        SharedPreferences preferences=getSharedPreferences("yzyDemo",MODE_PRIVATE);
        String user =preferences.getString("username",""); //获取已保存的用户名和密码
        String pass=preferences.getString("password","");
        etuser.setText(user);
        etpwd.setText(pass);
    }
    //退出
    public void Back(View view){
        finish();
    }
}