Android登录界面设计

太过爱你忘了你带给我的痛 2022-06-09 08:42 214阅读 0赞

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

## 界面： ##

![1][]

## 功能： ##

### （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.

## 动态效果： ##

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

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

## 登录页面的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][https_github.com_liwenzhi_LoginDemo.git]

上面只是一个简单的示例，逻辑相对会有点啰嗦，因为这是我一个MVP框架程序中抠下来的代码。  
请求服务器也是创建子线程来模拟实现的。登录页面可以根据实际需求再修改修改。

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

[1]: http://i.imgur.com/ZwDUWBM.png
[2]: http://i.imgur.com/WgtPUBz.gif
[3]: http://i.imgur.com/4KZBIZy.gif
[https_github.com_liwenzhi_LoginDemo.git]: https://github.com/liwenzhi/LoginDemo.git