01 Anykey登录界面

程序员文章站 2022-05-06 13:27:00

...

仿照此图制作
制作登录布局
使用SharedPreferences实现伪登录
相关参考
日志

1. 仿照此图制作

01 Anykey登录界面

原图链接：https://uimovement.com/ui/4568/login-user-profile/

2. 制作登录布局

首先来制作样图中的标题、介绍语、输入框以及登录按钮，动画等特效先不急着实现，一步步来。
在layout目录中新建“activity_login.xml”：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
    <!--注意最外层是ScrollView布局-->

    <!--然后在Scrollview布局中加入LinearLayout布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!--标题文字“AnyKey”，深灰色，字号较大-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="30dp"
            android:text="AnyKey"
            android:textSize="34sp" />

        <!--欢迎语，浅灰色，字号较小，根据实际情况使用不同的欢迎语，比如首次登录则将文本改为“首次使用\n请创建你的主密码”（后面会在函数中实现）-->
        <TextView
            android:id="@+id/login_welcome"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="26dp"
            android:text="欢迎回来\n请输入主密码进入"
            android:textColor="#8e8e8e"
            android:textSize="18sp" />
        <!--注：如果\n不能被识别为换行符，则在开头部分确认是不是丢了这行代码：xmlns:tools="http://schemas.android.com/tools"-->

        <!--编辑框，输入主密码，设置为单行显示，文字颜色为紫色-->
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:layout_marginTop="100dp"
            android:singleLine="true"
            android:textColor="#6000c0" />
        <!--更多EditText属性详见：http://m.blog.csdn.net/shenggaofei/article/details/52262314-->

        <!--登录按钮-->
        <Button
            android:id="@+id/login_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="90dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="进入" />

    </LinearLayout>
</ScrollView>

然后在AndroidManifest.xml中把该登录界面设为启动界面：

<application
        ...
        <activity android:name=".MainActivity">
        </activity>

        <!--将MainActivity的<intent-filter...>剪切到LoginActivity中-->
        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

</application>

新建LoginActivity.java，在代码中实现隐藏标题栏以及输入密码为密文格式：

public class LoginActivity extends AppCompatActivity {

    private EditText etPassword;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        //其他隐藏自带标题栏的方法详见：http://blog.csdn.net/likianta/article/details/78607911

        etPassword = (EditText) findViewById(R.id.et_password);
        //以密文形式显示你的输入
        etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
    }
}

预览图如下：

01 Anykey登录界面

样图中的下划线和光标也是紫色的，首先我们在res/values/styles.xml中添加自定义颜色样式：

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--设置编辑框未**时的颜色为浅紫色，**时的颜色为紫色-->
    <style name="MyEditText" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">#8668a5</item>
        <item name="colorControlActivated">#6000c0</item>
    </style>
</resources>

然后在activity_login.xml布局中应用该颜色，使光标和下划线都变成紫色：

<ScrollView...>
    <LinearLayout...>
    ...

    <EditText
    android:id="@+id/et_password"
    ...
    android:textCursorDrawable="@null"
    android:theme="@style/MyEditText" />
    <!--参考：https://segmentfault.com/a/1190000009507919-->

    ...
    </LinearLayout>
</ScrollView>

至此基本登录界面制作完成，界面中有标题、欢迎语、编辑框以及登录按钮，而且系统自带标题栏被成功隐藏，编辑框的颜色也实现了自定义，虽然还有很多样图中的效果没有实现，但界面的雏形已经建立了。
不重要的功能我们留到日后再说。下面开始用SharedPreferences来实现一个明文的登录过程。
之所以使用明文存储密码，是为了通过此实现让大家初步认识一下“密码”的读写操作。在完成这个（伪）登录之后，我们将会进一步研究如何使用AES加密存储来升级自己的登录逻辑。

3. 使用SharedPreferences实现（伪）登录

LoginActivity.java的完整代码如下：

public class LoginActivity extends AppCompatActivity {

    private EditText etPassword;
    private TextView loginWelcome;
    private Button loginOn;
    private String passwordValue;
    private SharedPreferences sharedPreferences;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }

        //绑定按钮
        etPassword = (EditText) findViewById(R.id.et_password);
        loginWelcome = (TextView) findViewById(R.id.login_welcome);
        loginOn = (Button) findViewById(R.id.login_on);
        //以密文形式显示你的输入
        etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());

        //获得SharedPreferences实例对象并初始化它的值
        sharedPreferences = this.getSharedPreferences("UserInfo", Context.MODE_PRIVATE); //第一个参数表示需要获取的文件名“UserInfo”（后缀是.xml，可以省略不写），当首次使用获取不到时，会自动创建该文件。第二个参数表示操作模式，PRIVATE模式表示只有本应用可以读写该实例
        final String saved_userPassword = sharedPreferences.getString("UserPassword", "N/A"); //第一个参数是键，第二个参数是get不到该键时的返回值
        // 我们在第一次安装该应用时，sharedPreferences肯定啥都get不到，所以就会返回第二个参数“N/A”，这是我们判断用户是不是初次使用的重要依据
        final SharedPreferences.Editor editor = sharedPreferences.edit();//SharedPreferences是抽象类，不能直接编辑，因此创造一个editor来负责sp的读写操作

        //判断是否为首次使用
        LoginWelcome(saved_userPassword);
        //首次登录判断的业务逻辑为：判断用户名是不是“N/A”，是的话就是首次登录，此时文本框的欢迎词就变了；不是的话就什么事情也不做

        //触发点击事件，监听登录按钮
        loginOn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                passwordValue = etPassword.getText().toString().trim(); //trim()函数可以消除字符串前后的空白符，避免用户手误多按一个空格
                if (saved_userPassword.equals("N/A")) {
                    //首次使用的业务逻辑
                    editor.putString("UserPassword", passwordValue);
                    editor.apply();
                    Log.d("dda", "主密码保存成功！");
                } else {
                    //非首次登录时的常规业务
                    if (passwordValue.equals(saved_userPassword)) {
                        Toast.makeText(LoginActivity.this, "登录成功", Toast.LENGTH_SHORT).show();

                        //跳转至主界面
                        Intent intent = new Intent(LoginActivity.this, MainActivity.class);
                        LoginActivity.this.startActivity(intent);
                        finish();
                    } else {
                        //密码错误时的业务
                        loginWelcome.setText("密码错误\n请重新登录");//在“欢迎词”中显示出错提示
                        etPassword.setText("");//重置编辑框为空

                        //让输入框重新获取焦点
                        etPassword.setFocusable(true);
                        etPassword.setFocusableInTouchMode(true);
                        etPassword.requestFocus();

                        //通过调用输入管理器来自动弹出软键盘
                        InputMethodManager inputMethodManager = (InputMethodManager) etPassword.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
                        inputMethodManager.showSoftInput(etPassword, 0);
                    }
                }
            }
        });
    }

    //判断是否为首次使用，不是的话什么都不做
    public void LoginWelcome(String saved_userPassword){

        if (saved_userPassword.equals("N/A")) {
            //是首次使用
            loginWelcome.setText("首次使用\n请创建你的主密码");
        }
    }
}

PS：使用Ctrl+Alt+L可以自动整理排版，按F11可以给某行添加一个书签，Shift+F11管理书签。
如果Ctrl+Alt+L快捷键不管用的话，请查看是否有其他软件占用了快捷键，比如网易云音乐或者QQ等软件，关闭或更改其热键设置即可。（参考：http://blog.csdn.net/qq_24505485/article/details/52820410）
更多AS快捷操作参考：http://blog.csdn.net/huningjun/article/details/52450465

运行模拟器，用户登录流程如下：

至此使用SharedPreferences实现（伪）登录流程完成。
作为一个密码管理软件，最重要的加密功能还没有制作，随着后续的学习，我们会不断地更新旧模块功能，有些甚至要重头做起。
所有项目都不是一蹴而就的，只要遵循循序渐进的过程，就能让你的软件越来越好。

日志

2017年11月9日
1. 【创建】启动密码管理开发项目，app命名为“AnyKey”
2. 【创建】登录页面
3. 【修改】隐藏标题栏
4. 【修改】自定义EditText的光标和下划线颜色

2017年11月14日
1. 【新增】使用SharedPreferences实现（伪）登录

2017年11月15日
1. 【新增】密码错误后重新获取焦点并自动弹出软键盘
2. 【更新】SharedPreferences的完整实现（判断首次登录、记录主密码、密码错误提醒）

01 Anykey登录界面

1. 仿照此图制作

2. 制作登录布局

3. 使用SharedPreferences实现（伪）登录

相关参考

日志

Android实现EventBus登录界面与传值（粘性事件）

bootstrap登录模板实例（html登录注册界面模板）

bootstrap登录模板实例（html登录注册界面模板）

jsp跳转页面的方式（jsp实现注册登录界面跳转方法）

js富文本编辑器实现（js登录注册界面源代码）

浅谈移动端的用户登录界面优化

Android实现背景可滑动登录界面 (不压缩背景弹出键盘)

jsp连接sql数据库的步骤（用jsp连接sql做一个登录界面）

pyqt5利用pyqtDesigner实现登录界面

pyqt5实现登录界面的模板