【Android】_UI设计_登录页面(记住密码)

目标: Android记住密码和自动登录界面的实现(SharedPreferences),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

(一) SharedPreferences用法

  • SharedPreferences介绍:
    SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置参数,它是采用xml文件存放数据的,文件存放在"/data/data/shared_prefs"目录下。
  • SharedPreferences的用法:
    由于SharedPreferences是一个接口,而且在这个接口里没有提供写入数据和读取数据的能力。但它是通过其Editor接口中的一些方法来操作SharedPreference的,用法见下面代码:
  • Context.getSharedPreferences(String name,int mode)来得到一个SharedPreferences实例
    name:是指文件名称,不需要加后缀.xml,系统会自动为我们添加上。
    mode:是指定读写方式,其值有三种,分别为:

Context.MODE_PRIVATE:指定该SharedPreferences数据只能被本应用程序读、写
Context.MODE_WORLD_READABLE:指定该SharedPreferences数据能被其他应用程序读,但不能写
Context.MODE_WORLD_WRITEABLE:指定该SharedPreferences数据能被其他应用程序读写。

效果实现图:

只有 用户名为“student”且密码为“123456”才能登录!

我们平常进入登录界面都要求我们输入用户名和密码,记住密码后,进入界面就有不用手动输入,如图:
在这里插入图片描述 在这里插入图片描述

(二) 登录页面Demo

  • 新建AndroidStudio项目
    在这里插入图片描述

(三)具体的编码实现

  1. 布局界面采用嵌套的模式,在底色上加上半透明样式,有木有高级感,activity_remeber_Pwd.xml:
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/background_login">

    <LinearLayout
        android:id="@+id/login_back"
        android:layout_width="400dp"
        android:layout_height="320dp"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:layout_marginTop="50dp"
        android:background="@drawable/background_login_div" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Welcome To Student System"
            android:layout_marginTop="15dp"
            android:textSize="25dp"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:text="Please login first" />

        <EditText
            android:id="@+id/account"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:layout_marginTop="15dp"
            android:hint="请输入您的用户名"
            android:background="@drawable/edit_login_div"
            android:ems="10" />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/edit_login_div"
            android:hint="请输入您的密码"
            android:ems="10" />

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:layout_marginTop="2dp"
            android:orientation="horizontal"
            android:id="@+id/rg_login">
            <CheckBox
                android:id="@+id/savePassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="记住密码"
                android:textSize="12sp"
                />
            <CheckBox
                android:id="@+id/autologin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="自动登录"
                android:textSize="12sp"
                />
        </TableRow>
        <Button
            android:id="@+id/login"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:background="@drawable/background_login"
            android:text="登陆"
            android:textSize="18dp">
        </Button>
    </LinearLayout>
</RelativeLayout>

remeberPwdActivity

package com.example.cungu.myapplication4;

import android.content.Intent;
import android.preference.PreferenceManager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.content.SharedPreferences;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;

public class remeberPwdActivity extends AppCompatActivity {

    private SharedPreferences pref;
    private SharedPreferences.Editor editor;

    private EditText accountEdit;
    private EditText passwordEdit;
    private Button login;
    private CheckBox savePassword;
    private CheckBox autoLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_remeber_pwd);

        pref = PreferenceManager.getDefaultSharedPreferences(this);
        accountEdit = (EditText) findViewById(R.id.account);
        passwordEdit = (EditText) findViewById(R.id.password);
        savePassword = (CheckBox) findViewById(R.id.savePassword);
        autoLogin = (CheckBox) findViewById(R.id.autologin);
        login = (Button) findViewById(R.id.login);
        passwordEdit.setInputType(InputType.TYPE_CLASS_TEXT
                | InputType.TYPE_TEXT_VARIATION_PASSWORD);//隐式密码
        boolean isRemember = pref.getBoolean("savePassword", false);

        if (isRemember) {
            // 将账号和密码都设置到文本框中,下一次进入不如再输密码啦
            String account = pref.getString("account", "");
            String password = pref.getString("password", "");
            accountEdit.setText(account);
            passwordEdit.setText(password);
            savePassword.setChecked(true);
        }

        login.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                String account = accountEdit.getText().toString();
                String password = passwordEdit.getText().toString();
                if (account.equals("student") && password.equals("123456")) {
                    editor = pref.edit();
                    if (savePassword.isChecked()) { // 检查复选框是否被选中
                        editor.putBoolean("savePassword", true);
                        editor.putString("account", account);
                        editor.putString("password", password);
                    } else {
                        editor.clear();
                    }
                    editor.commit();
                    Toast.makeText(remeberPwdActivity.this, "Login Success!", Toast.LENGTH_SHORT).show();
                    //Intent intent = new Intent(remeberPwdActivity.this, MainActivity.class);//跳转
                    //startActivity(intent);
                    finish();
                } else {
                    Toast.makeText(remeberPwdActivity.this, "account or password is invalid", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}
  1. 布局样式:
    本次为了优化界面引入内容较多,Drawable下:
No. xml文件 样式
1 background_button_div.xml button蓝色背景
2 background_login.xml 登录框渐变蓝背景
3 background_login_div.xml 登录框圆角半透明背景
4 edit_login_div.xml 编辑框圆角半透明背景
  1. button蓝色背景——background_button_div.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FF72CAE1" />
    <!--
  设置圆角
  注意:	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角
    -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>
  1. 登录框渐变蓝背景——background_login.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<gradient
    android:angle="45"
    android:endColor="#FF72CAE1"
    android:startColor="#FFACDAE5" />
</shape>
  1. 登录框圆角半透明背景——background_login_div.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#55FFFFFF" />
    <!--
  设置圆角
  注意:	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角
    -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape>
  1. 编辑框圆角半透明背景——edit_login_div.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" />
    <!--
  设置圆角
  注意:	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角
    -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape>
  1. 隐藏上边框:修改styles.xml代码为:
    在这里插入图片描述
    在这里插入图片描述
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

大功告成!

猜你喜欢

转载自blog.csdn.net/cungudafa/article/details/84894047