前言
最近找安卓登录注册界面，找了好久也没找到比较满意的设计，最后想想其实登录和注册两个界面也不复杂，干脆花点时间自己弄。
界面预览
最后的效果如下：
界面开发
安卓静态布局使用XML语言描述，采用布局+控件的方式实现。
首先创建编辑框和按钮的样式文件，避免大量的重复代码，这样可以使用一行代码引用该样式。
编辑框样式：
在”app/res/drawable”文件夹下新建xml文件“translucent_edit.xml”
1
2
3
4
5
6
7
8
9
10
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#DCDCDC" />
<stroke android:width="1dip" android:color="#fefefe" />
<corners android:radius="20dp"/>
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
</shape>
|
按钮样式：
在”app/res/drawable”文件夹下新建xml文件“translucent_button.xml”
1
2
3
4
5
6
7
8
9
10
| <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4682B4" />
<stroke android:width="1dip" android:color="#fefefe" />
<corners android:radius="20dp"/>
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
</shape>
|
这两个样式文件都是实现圆角和颜色效果，接下来就是登录和注册界面。
登录和注册界面两个界面的元素都是Logo、标题、编辑框和按钮四个，区别仅仅是数量不同。两个界面均采用线性布局嵌套的方式布局，并将属性“orientation”设置为”vertical”，每一行均使用一个线性布局。
登录界面：
在”app/res/layout”文件夹下新建xml文件“activity_main.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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<!--使用线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#F5F5F5">
<!--Logo-->
<ImageView
android:id="@+id/LogoImage"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="100dp"
android:src="@drawable/logo"/>
<!--标题-->
<TextView
android:id="@+id/TitleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:text="爱零食•登录"
android:gravity="center"
android:textStyle="italic"
android:textColor="#808080"
android:textSize="30dp" />
<!--嵌套线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/UserNameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--用户名输入-->
<EditText
android:id="@+id/UserNameEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:background="@drawable/translucent_edit"
android:hint="输入用户名"
android:textSize="24dp"
android:singleLine="true" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/PassWordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--密码输入-->
<EditText
android:id="@+id/PassWordEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:background="@drawable/translucent_edit"
android:hint="输入用户密码"
android:textSize="24dp"
android:maxLength="16"
android:singleLine="true"
android:inputType="textPassword" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/LayoutButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--登录按钮-->
<Button
android:id="@+id/LoginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:textColor="@color/white"
android:background="@drawable/translucent_button"
android:text="登 录"
android:textSize="24dp" />
<!--注册按钮-->
<Button
android:id="@+id/SignUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:textColor="@color/white"
android:background="@drawable/translucent_button"
android:text="注 册"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
|
注册界面：
在”app/res/layout”文件夹下新建xml文件“activity_sign_up.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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
| <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".SignUpActivity">
<!--使用线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#F5F5F5">
<!--Logo-->
<ImageView
android:id="@+id/LogoImage"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="50dp"
android:src="@drawable/logo"/>
<!--标题-->
<TextView
android:id="@+id/TitleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="爱零食•注册"
android:gravity="center"
android:textStyle="italic"
android:textColor="#808080"
android:textSize="30dp" />
<!--嵌套线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/UserNameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!--用户名输入-->
<EditText
android:id="@+id/UserNameEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/translucent_edit"
android:hint="输入用户名"
android:textSize="24dp"
android:singleLine="true" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/PassWordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--密码输入-->
<EditText
android:id="@+id/PassWordEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/translucent_edit"
android:hint="输入密码"
android:textSize="24dp"
android:maxLength="16"
android:singleLine="true"
android:inputType="textPassword" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/PasswordAgainLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--二次密码输入-->
<EditText
android:id="@+id/PassWordAgainEdit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/translucent_edit"
android:hint="再次输入密码"
android:maxLength="16"
android:textSize="24dp"
android:singleLine="true"
android:inputType="textPassword" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/EmailLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--邮箱输入-->
<EditText
android:id="@+id/EmailEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/translucent_edit"
android:hint="输入邮箱地址"
android:textSize="24dp"
android:maxLength="16"
android:singleLine="true" />
</LinearLayout>
<!--嵌套线性布局-->
<LinearLayout
android:id="@+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--立即注册按钮-->
<Button
android:id="@+id/SignUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:background="@drawable/translucent_button"
android:text="立即注册"
android:textColor="@color/white"
android:textSize="24dp" />
<!--返回登录按钮-->
<Button
android:id="@+id/BackLoginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:textColor="@color/white"
android:background="@drawable/translucent_button"
android:text="返回登录"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
|
如果按钮显示为紫色，解决方法参考Android Studio设置Button样式无效(为默认蓝紫色)。
可以看到两个界面布局并不复杂，美观性也算合格，接下来实现两个界面交互就行了。
界面交互
完成界面交互需要实现的功能：
1.登录界面点击“注册”按钮会跳转到注册界面
2.注册界面填写完信息后点击“立即注册”按钮会跳转到登录界面
3.注册界面点击“返回登录”按钮会跳转到登录界面
可选的附加功能：
1.检查输入的用户名和密码与预设的是否匹配
2.检查注册的信息基本格式是否正确
接下来实现上述功能。
登录界面的Activity类：
在”app/java/项目包名”目录下新建Class”MainActivity”
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
| package 项目包名;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
// 调用Actvity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 关联activity.xml
setContentView(R.layout.activity_main);
// 关联用户名、密码和登录、注册按钮
EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
Button loginButton = (Button) this.findViewById(R.id.LoginButton);
Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
// 登录按钮监听器
loginButton.setOnClickListener(
new OnClickListener() {
@Override
public void onClick(View v) {
// 获取用户名和密码
String strUserName = userName.getText().toString().trim();
String strPassWord = passWord.getText().toString().trim();
// 判断如果用户名为"123456"密码为"123456"则登录成功
if (strUserName.equals("123456") && strPassWord.equals("123456")) {
Toast.makeText(MainActivity.this, "登录成功！", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "请输入正确的用户名或密码！", Toast.LENGTH_SHORT).show();
}
}
}
);
// 注册按钮监听器
signUpButton.setOnClickListener(
new OnClickListener() {
@Override
public void onClick(View v) {
// 跳转到注册界面
Intent intent = new Intent(MainActivity.this, SignUpActivity.class);
startActivity(intent);
}
}
);
}
}
|
其中的“项目包名”需要替换为自己的项目包名。
注册界面Activity类：
在”app/java/项目包名”目录下新建Class”SignUpActivity”
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
| package 项目包名;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class SignUpActivity extends Activity {
// 调用Actvity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//关联activity_register.xml
setContentView(R.layout.activity_sign_up);
// 关联用户名、密码、确认密码、邮箱和注册、返回登录按钮
EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
EditText passWordAgain = (EditText) this.findViewById(R.id.PassWordAgainEdit);
EditText email = (EditText) this.findViewById(R.id.EmailEdit);
Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
Button backLoginButton = (Button) this.findViewById(R.id.BackLoginButton);
// 立即注册按钮监听器
signUpButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
String strUserName = userName.getText().toString().trim();
String strPassWord = passWord.getText().toString().trim();
String strPassWordAgain = passWordAgain.getText().toString().trim();
String strPhoneNumber = email.getText().toString().trim();
//注册格式粗检
if (strUserName.length() > 10) {
Toast.makeText(SignUpActivity.this, "用户名长度必须小于10！", Toast.LENGTH_SHORT).show();
} else if (strUserName.length() < 4) {
Toast.makeText(SignUpActivity.this, "用户名长度必须大于4！", Toast.LENGTH_SHORT).show();
} else if (strPassWord.length() > 16) {
Toast.makeText(SignUpActivity.this, "密码长度必须小于16！", Toast.LENGTH_SHORT).show();
} else if (strPassWord.length() < 6) {
Toast.makeText(SignUpActivity.this, "密码长度必须大于6！", Toast.LENGTH_SHORT).show();
} else if (!strPassWord.equals(strPassWordAgain)) {
Toast.makeText(SignUpActivity.this, "两次密码输入不一致！", Toast.LENGTH_SHORT).show();
} else if (!strPhoneNumber.contains("@")) {
Toast.makeText(SignUpActivity.this, "邮箱格式不正确！", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(SignUpActivity.this, "注册成功！", Toast.LENGTH_SHORT).show();
// 跳转到登录界面
Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
startActivity(intent);
}
}
}
);
// 返回登录按钮监听器
backLoginButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
// 跳转到登录界面
Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
startActivity(intent);
}
}
);
}
}
|
其中的“项目包名”需要替换为自己的项目包名。
最后向AndroidManifest注册界面：
编辑”app/manifests”目录下的”AndroidManifest.xml”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="项目包名">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.项目名">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".SignUpActivity" />
</application>
</manifest>
|
其中的“项目包名”和“项目名”需要替换为自己的项目包名和项目名。
大功告成！这样所有功能都实现了！
源码
Gitee：login-register-demo
Github：login-register-demo
蓝奏云：login-register-demo 密码:1xsz
最后
登录注册界面使用到的布局和控件都比较简单，Activity类实现的功能也很基础，但万丈高楼皆从平地起，有了根基，高楼只是时间问题。
微信
支付宝
