01 Anykey登录界面

目录

1. 仿照此图制作

原图链接：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());    }}

预览图如下：

样图中的下划线和光标也是紫色的，首先我们在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实现（伪）登录流程完成。
作为一个密码管理软件，最重要的加密功能还没有制作，随着后续的学习，我们会不断地更新旧模块功能，有些甚至要重头做起。
所有项目都不是一蹴而就的，只要遵循循序渐进的过程，就能让你的软件越来越好。

---

相关参考

1. https://uimovement.com/ui/4568/login-user-profile/
2. http://m.blog.csdn.net/shenggaofei/article/details/52262314
3. http://blog.csdn.net/likianta/article/details/78607911
4. https://segmentfault.com/a/1190000009507919
5. http://blog.csdn.net/qq_24505485/article/details/52820410
6. http://blog.csdn.net/huningjun/article/details/52450465

---

日志

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

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

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