Android登录界面设计

Android登录界面设计

这是之前项目的一个界面，现在抽出来給大家看看。

界面：

功能：

（1）基本的判断，输入的是否为空

这里没有判断网络情况，实际项目中是必须要判断的

（2）核心知识：sharePreference的使用

本地保存数据，用户名和密码，还有下面复选框的状态都要保存。

这里我自己封装了一个工具栏。

（3）密码可见和不可见

默认密码不可见，单击图标后可见，再次点击后不可见。

点击右边的图标时，对EditText设置代码即可：

if (iv_see_password.isSelected()) {
iv_see_password.setSelected(false);
//密码不可见
et_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

} else {
iv_see_password.setSelected(true);
//密码可见
et_password.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}

（4）登录后会显示链接服务器的对话框

这里有一个自定义的对话框，也是可以自己修改对话框的样式和显示的文字

（5）这里密码保存到本地经过了base64的加密

这里创建了一个加密工具类，base64加密过的字符串，会很容易就被解密出来。

但是我发现一个字符串可以加密N次，解密也是要N次，就可以得到原来的字符串。

所以我在工具类里面设置了N的数值，别人就很难知道我的base64怎么解密了！

值得注意的是：多次解密过程有可能会給字符串添加空格，所有每次要对字符串去空格！

加密解密的次数太大，也是要耗时间的，不建议N的数值大于20.

动态效果：

如果勾选了自动登录，下次进入登录界面，会自动请求服务器登录。如下图所示：



这里分享一下主要的代码：

登录页面的xml布局代码：

<?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:background="#fff"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="登录界面"
android:gravity="center"
android:textSize="30sp"
/>
<View android:layout_width="match_parent" android:layout_height="@dimen/dp_1"
android:background="@color/orange_main"
/>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_height_normal"
android:layout_marginLeft="@dimen/margin_large"
android:layout_marginRight="@dimen/margin_large"
android:layout_marginTop="@dimen/dp_120">

<ImageView
android:id="@+id/img_account"
android:layout_width="@dimen/dp_19"
android:layout_height="@dimen/dp_20"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/margin_tiny"
android:layout_marginLeft="@dimen/margin_tiny"
android:scaleType="fitXY"
android:src="@drawable/icon_login_account"/>

<EditText
android:id="@+id/et_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="@dimen/margin_tiny"
android:layout_marginLeft="@dimen/margin_normal"
android:layout_toRightOf="@+id/img_account"
android:background="@null"
android:hint="@string/account"
android:maxLines="1"
android:textColor="@android:color/black"
android:textColorHint="@color/tv_gray_deep"
android:textSize="@dimen/text_size_normal"/>

<View
android:layout_width="match_parent"
android:layout_height="@dimen/line_height"
android:layout_alignParentBottom="true"
android:layout_marginLeft="@dimen/margin_normal"
android:layout_toRightOf="@+id/img_account"
android:background="@color/orange_light"/>
</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_height_normal"
android:layout_marginLeft="@dimen/margin_large"
android:layout_marginRight="@dimen/margin_large">

<ImageView
android:id="@+id/img_pw"
android:layout_width="@dimen/dp_18"
android:layout_height="@dimen/dp_20"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/margin_tiny"
android:layout_marginLeft="@dimen/margin_tiny"
android:scaleType="fitXY"
android:src="@drawable/icon_login_pw"/>

<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="@dimen/margin_tiny"
android:layout_marginLeft="@dimen/margin_normal"
android:layout_toRightOf="@+id/img_pw"
android:background="@null"
android:hint="@string/password"
android:inputType="textPassword"
android:maxLines="1"
android:textColor="@android:color/black"
android:textColorHint="@color/tv_gray_deep"
android:textSize="@dimen/text_size_normal"/>
<ImageView
android:id="@+id/iv_see_password"
android:layout_width="@dimen/image_height_litter"
android:layout_height="@dimen/image_height_litter"
android:src="@drawable/image_password_bg"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
/>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/line_height"
android:layout_alignParentBottom="true"
android:layout_marginLeft="@dimen/margin_normal"
android:layout_toRightOf="@+id/img_pw"
android:background="@color/orange_light"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_large"
android:layout_marginRight="@dimen/margin_large"
android:layout_marginTop="@dimen/margin_small"
android:paddingBottom="@dimen/margin_small"
android:paddingTop="@dimen/margin_small"
android:orientation="horizontal"
android:gravity="center"
>
<CheckBox
android:id="@+id/checkBox_password"
android:padding="@dimen/dp_10"
android:textSize="@dimen/text_size_normal"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="@string/check_password"
android:textColor="@color/top_bar_normal_bg" android:checked="false"/>
<CheckBox
android:id="@+id/checkBox_login"
android:padding="@dimen/dp_10"
android:textSize="@dimen/text_size_normal"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="@string/check_login"
android:textColor="@color/top_bar_normal_bg" android:checked="false"/>

</LinearLayout>
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_large"
android:layout_marginRight="@dimen/margin_large"
android:layout_marginTop="@dimen/margin_huge"
android:paddingBottom="@dimen/margin_small"
android:paddingTop="@dimen/margin_small"
android:text="@string/login"
android:background="@drawable/btn_orange_selector"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_normal"/>

</LinearLayout>

sharePreference工具类代码：

package com.lwz.login_demo.util;

import android.content.Context;
import android.content.SharedPreferences;

/**
* 这是一个SharePreference的根据类，使用它可以更方便的数据进行简单存储
* 这里只要知道基本调用方法就可以了
* 1.通过构造方法来传入上下文和文件名
* 2.通过putValue方法传入一个或多个自定义的ContentValue对象，进行数据存储
* 3.通过get方法来获取数据
* 4.通过clear方法来清除这个文件的数据
* 这里没有提供清除单个key的数据，是因为存入相同的数据会自动覆盖，没有必要去理会
*/
public class SharedPreferencesUtils {
//定义一个SharePreference对象
SharedPreferences sharedPreferences;
//定义一个上下文对象

//创建SharePreference对象时要上下文和存储的模式
//通过构造方法传入一个上下文
public SharedPreferencesUtils(Context context, String fileName) {
//实例化SharePreference对象，使用的是get方法，而不是new创建
//第一个参数是文件的名字
//第二个参数是存储的模式，一般都是使用私有方式：Context.MODE_PRIVATE
sharedPreferences = context.getSharedPreferences(fileName, Context.MODE_PRIVATE);
}

/**
* 存储数据
* 这里要对存储的数据进行判断在存储
* 只能存储简单的几种数据
* 这里使用的是自定义的ContentValue类，来进行对多个数据的处理
*/
//创建一个内部类使用，里面有key和value这两个值
public static class ContentValue {
String key;
Object value;

//通过构造方法来传入key和value
public ContentValue(String key, Object value) {
this.key = key;
this.value = value;
}
}

//一次可以传入多个ContentValue对象的值
public void putValues(ContentValue... contentValues) {
//获取SharePreference对象的编辑对象，才能进行数据的存储
SharedPreferences.Editor editor = sharedPreferences.edit();
//数据分类和存储
for (ContentValue contentValue : contentValues) {
//如果是字符型类型
if (contentValue.value instanceof String) {
editor.putString(contentValue.key, contentValue.value.toString()).commit();
}
//如果是int类型
if (contentValue.value instanceof Integer) {
editor.putInt(contentValue.key, Integer.parseInt(contentValue.value.toString())).commit();
}
//如果是Long类型
if (contentValue.value instanceof Long) {
editor.putLong(contentValue.key, Long.parseLong(contentValue.value.toString())).commit();
}
//如果是布尔类型
if (contentValue.value instanceof Boolean) {
editor.putBoolean(contentValue.key, Boolean.parseBoolean(contentValue.value.toString())).commit();
}

}
}

//获取数据的方法
public String getString(String key) {
return sharedPreferences.getString(key, null);
}

public boolean getBoolean(String key, Boolean b) {
return sharedPreferences.getBoolean(key, b);
}

public int getInt(String key) {
return sharedPreferences.getInt(key, -1);
}

public long getLong(String key) {
return sharedPreferences.getLong(key, -1);
}

//清除当前文件的所有的数据
public void clear() {
sharedPreferences.edit().clear().commit();
}

}

登录页面的java逻辑代码：

package com.lwz.login_demo.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.*;
import com.lwz.login_demo.R;
import com.lwz.login_demo.util.Base64Utils;
import com.lwz.login_demo.util.SharedPreferencesUtils;
import com.lwz.login_demo.widget.LoadingDialog;

/**
* 登录界面
*/

public class LoginActivity extends Activity
implements View.OnClickListener, CompoundButton.OnCheckedChangeListener {
//布局内的控件
private EditText et_name;
private EditText et_password;
private Button mLoginBtn;
private CheckBox checkBox_password;
private CheckBox checkBox_login;
private ImageView iv_see_password;

private LoadingDialog mLoadingDialog; //显示正在加载的对话框

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
initViews();
setupEvents();
initData();

}

private void initData() {

//判断用户第一次登陆
if (firstLogin()) {
checkBox_password.setChecked(false);//取消记住密码的复选框
checkBox_login.setChecked(false);//取消自动登录的复选框
}
//判断是否记住密码
if (remenberPassword()) {
checkBox_password.setChecked(true);//勾选记住密码
setTextNameAndPassword();//把密码和账号输入到输入框中
} else {
setTextName();//把用户账号放到输入账号的输入框中
}

//判断是否自动登录
if (autoLogin()) {
checkBox_login.setChecked(true);
login();//去登录就可以

}
}

/**
* 把本地保存的数据设置数据到输入框中
*/
public void setTextNameAndPassword() {
et_name.setText("" + getLocalName());
et_password.setText("" + getLocalPassword());
}

/**
* 设置数据到输入框中
*/
public void setTextName() {
et_name.setText("" + getLocalName());
}

/**
* 获得保存在本地的用户名
*/
public String getLocalName() {
//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
String name = helper.getString("name");
return name;
}

/**
* 获得保存在本地的密码
*/
public String getLocalPassword() {
//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
String password = helper.getString("password");
return Base64Utils.decryptBASE64(password);   //解码一下
//       return password;   //解码一下

}

/**
* 判断是否自动登录
*/
private boolean autoLogin() {
//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
boolean autoLogin = helper.getBoolean("autoLogin", false);
return autoLogin;
}

/**
* 判断是否记住密码
*/
private boolean remenberPassword() {
//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
boolean remenberPassword = helper.getBoolean("remenberPassword", false);
return remenberPassword;
}

private void initViews() {
mLoginBtn = (Button) findViewById(R.id.btn_login);
et_name = (EditText) findViewById(R.id.et_account);
et_password = (EditText) findViewById(R.id.et_password);
checkBox_password = (CheckBox) findViewById(R.id.checkBox_password);
checkBox_login = (CheckBox) findViewById(R.id.checkBox_login);
iv_see_password = (ImageView) findViewById(R.id.iv_see_password);
}

private void setupEvents() {
mLoginBtn.setOnClickListener(this);
checkBox_password.setOnCheckedChangeListener(this);
checkBox_login.setOnCheckedChangeListener(this);
iv_see_password.setOnClickListener(this);

}

/**
* 判断是否是第一次登陆
*/
private boolean firstLogin() {
//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
boolean first = helper.getBoolean("first", true);
if (first) {
//创建一个ContentVa对象（自定义的）设置不是第一次登录，,并创建记住密码和自动登录是默认不选，创建账号和密码为空
helper.putValues(new SharedPreferencesUtils.ContentValue("first", false),
new SharedPreferencesUtils.ContentValue("remenberPassword", false),
new SharedPreferencesUtils.ContentValue("autoLogin", false),
new SharedPreferencesUtils.ContentValue("name", ""),
new SharedPreferencesUtils.ContentValue("password", ""));
return true;
}
return false;
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_login:
loadUserName();    //无论如何保存一下用户名
login(); //登陆
break;
case R.id.iv_see_password:
setPasswordVisibility();    //改变图片并设置输入框的文本可见或不可见
break;

}
}

/**
* 模拟登录情况
* 用户名csdn，密码123456，就能登录成功，否则登录失败
*/
private void login() {

//先做一些基本的判断，比如输入的用户命为空，密码为空，网络不可用多大情况，都不需要去链接服务器了，而是直接返回提示错误
if (getAccount().isEmpty()){
showToast("你输入的账号为空！");
return;
}

if (getPassword().isEmpty()){
showToast("你输入的密码为空！");
return;
}
//登录一般都是请求服务器来判断密码是否正确，要请求网络，要子线程
showLoading();//显示加载框
Thread loginRunnable = new Thread() {

@Override
public void run() {
super.run();
setLoginBtnClickable(false);//点击登录后，设置登录按钮不可点击状态

//睡眠3秒
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}

//判断账号和密码
if (getAccount().equals("csdn") && getPassword().equals("123456")) {
showToast("登录成功");
loadCheckBoxState();//记录下当前用户记住密码和自动登录的状态;

startActivity(new Intent(LoginActivity.this, LoginAfterActivity.class));
finish();//关闭页面
} else {
showToast("输入的登录账号或密码不正确");
}

setLoginBtnClickable(true);  //这里解放登录按钮，设置为可以点击
hideLoading();//隐藏加载框
}
};
loginRunnable.start();

}

/**
* 保存用户账号
*/
public void loadUserName() {
if (!getAccount().equals("") || !getAccount().equals("请输入登录账号")) {
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
helper.putValues(new SharedPreferencesUtils.ContentValue("name", getAccount()));
}

}

/**
* 设置密码可见和不可见的相互转换
*/
private void setPasswordVisibility() {
if (iv_see_password.isSelected()) {
iv_see_password.setSelected(false);
//密码不可见
et_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

} else {
iv_see_password.setSelected(true);
//密码可见
et_password.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}

}

/**
* 获取账号
*/
public String getAccount() {
return et_name.getText().toString().trim();//去掉空格
}

/**
* 获取密码
*/
public String getPassword() {
return et_password.getText().toString().trim();//去掉空格
}

/**
* 保存用户选择“记住密码”和“自动登陆”的状态
*/
private void loadCheckBoxState() {
loadCheckBoxState(checkBox_password, checkBox_login);
}

/**
* 保存按钮的状态值
*/
public void loadCheckBoxState(CheckBox checkBox_password, CheckBox checkBox_login) {

//获取SharedPreferences对象，使用自定义类的方法来获取对象
SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");

//如果设置自动登录
if (checkBox_login.isChecked()) {
//创建记住密码和自动登录是都选择,保存密码数据
helper.putValues(
new SharedPreferencesUtils.ContentValue("remenberPassword", true),
new SharedPreferencesUtils.ContentValue("autoLogin", true),
new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));

} else if (!checkBox_password.isChecked()) { //如果没有保存密码，那么自动登录也是不选的
//创建记住密码和自动登录是默认不选,密码为空
helper.putValues(
new SharedPreferencesUtils.ContentValue("remenberPassword", false),
new SharedPreferencesUtils.ContentValue("autoLogin", false),
new SharedPreferencesUtils.ContentValue("password", ""));
} else if (checkBox_password.isChecked()) {   //如果保存密码，没有自动登录
//创建记住密码为选中和自动登录是默认不选,保存密码数据
helper.putValues(
new SharedPreferencesUtils.ContentValue("remenberPassword", true),
new SharedPreferencesUtils.ContentValue("autoLogin", false),
new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));
}
}

/**
* 是否可以点击登录按钮
*
* @param clickable
*/
public void setLoginBtnClickable(boolean clickable) {
mLoginBtn.setClickable(clickable);
}

/**
* 显示加载的进度款
*/
public void showLoading() {
if (mLoadingDialog == null) {
mLoadingDialog = new LoadingDialog(this, getString(R.string.loading), false);
}
mLoadingDialog.show();
}

/**
* 隐藏加载的进度框
*/
public void hideLoading() {
if (mLoadingDialog != null) {
runOnUiThread(new Runnable() {
@Override
public void run() {
mLoadingDialog.hide();
}
});

}
}

/**
* CheckBox点击时的回调方法 ,不管是勾选还是取消勾选都会得到回调
*
* @param buttonView 按钮对象
* @param isChecked  按钮的状态
*/
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (buttonView == checkBox_password) {  //记住密码选框发生改变时
if (!isChecked) {   //如果取消“记住密码”，那么同样取消自动登陆
checkBox_login.setChecked(false);
}
} else if (buttonView == checkBox_login) {   //自动登陆选框发生改变时
if (isChecked) {   //如果选择“自动登录”，那么同样选中“记住密码”
checkBox_password.setChecked(true);
}
}
}

/**
* 监听回退键
*/
@Override
public void onBackPressed() {
if (mLoadingDialog != null) {
if (mLoadingDialog.isShowing()) {
mLoadingDialog.cancel();
} else {
finish();
}
} else {
finish();
}

}

/**
* 页面销毁前回调的方法
*/
protected void onDestroy() {
if (mLoadingDialog != null) {
mLoadingDialog.cancel();
mLoadingDialog = null;
}
super.onDestroy();
}

public void showToast(String msg) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, msg, Toast.LENGTH_SHORT).show();
}
});

}

}

你也可以参考我的项目的完整代码：https://github.com/liwenzhi/LoginDemo.git

上面只是一个简单的示例，逻辑相对会有点啰嗦，因为这是我一个MVP框架程序中抠下来的代码。

请求服务器也是创建子线程来模拟实现的。登录页面可以根据实际需求再修改修改。

共勉：直面一辈子一次的人生路。