登录界面设计

效果图：

1、UI界面设计

采用RelativeLayout布局，主要说中间这块输入账号与密码的设计。

分别采用两个LinearLayout，在往里加上控件，调整位置。

那条灰色的线通过控件View实现。

这里首先隐藏了删除按钮的图片，如果输入数据的 时候，自然会显示出来。

android:visibility="invisible"

还有一些自己添加的style与color。

button.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--设置背景色-->
    <solid android:color="#2634c2" />
    <!--设置圆角-->
    <corners android:radius="10dip" />
    <stroke android:width="1dp" android:color="#4e4d56" />
</shape>

color.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#5c5f6c</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorButton">#2634c2</color>
    <color name="background">#ddefeeee</color>
</resources>

style.xml：

<resources>

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

    <style name="MyEditText" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@android:color/darker_gray</item>
        <item name="colorControlActivated">@android:color/darker_gray</item>
    </style>

    <style name="MyCheckBox" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@android:color/darker_gray</item>
        <item name="colorControlActivated">@android:color/darker_gray</item>
    </style>
</resources>

UI界面代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="50dp"
        android:layout_centerHorizontal="true"
        app:srcCompat="@drawable/dragon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="170dp"
        android:text="双木非林，田下有心"
        android:textSize="20dp"
        />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginTop="230dp"
        android:background="@color/background"
        >

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/user"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="5dp"
            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="15dp"
            android:layout_marginRight="3dp"
            android:layout_marginLeft="5dp"
            android:background="#979595"
            />

        <EditText
            android:id="@+id/user"
            android:layout_width="290dp"
            android:layout_height="50dp"
            android:layout_marginLeft="8dp"
            android:background="@null"
            android:hint="输入账号..."
            android:textSize="14sp"
            android:theme="@style/MyEditText"
            />

        <ImageView
            android:id="@+id/delete"
            android:layout_width="25dp"
            android:layout_height="35dp"
            android:src="@drawable/delete"
            android:layout_marginRight="20dp"
            android:visibility="invisible"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginTop="270dp"
        android:id="@+id/linearLayout"
        android:background="@color/background"
        >

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/password"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="5dp"
            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="15dp"
            android:layout_marginRight="3dp"
            android:layout_marginLeft="5dp"
            android:background="#979595"
            />

        <EditText
            android:id="@+id/pssword"
            android:layout_width="290dp"
            android:layout_height="50dp"
            android:layout_marginLeft="8dp"
            android:background="@null"
            android:hint="输入密码..."
            android:inputType="textPassword"
            android:textSize="14sp"
            android:theme="@style/MyEditText"
            />

        <ImageView
            android:id="@+id/delete1"
            android:layout_width="25dp"
            android:layout_height="35dp"
            android:src="@drawable/delete"
            android:layout_marginRight="20dp"
            android:visibility="invisible"
            />

    </LinearLayout>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/linearLayout"
        android:layout_marginEnd="39dp"
        android:layout_marginRight="39dp"
        android:layout_marginTop="20dp"
        android:text="记住账号与密码"
        android:textColor="@color/colorPrimary"
        android:theme="@style/MyCheckBox"
        />

    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="400dp"
        android:background="@drawable/button"
        android:gravity="center"
        android:onClick="login"
        android:text="登录"
        android:textColor="@android:color/white"
        android:textSize="20dp" />


</RelativeLayout>

2、逻辑实现

隐藏应用最上面的蓝色框体：

    getSupportActionBar().hide();

在onCreate()函数中新建SharedPreferences对象，用于存放与读取数据。

mSp = this.getSharedPreferences("config", this.MODE_PRIVATE);

主要是获取控件，并实现隐藏删除控件与实现删除的逻辑。

addTextChangedListener()获取EditText的输入状态，并作出相应的响应。

private void initView() {
        mUser = findViewById(R.id.user);
        mPssword = findViewById(R.id.pssword);
        mLogin = findViewById(R.id.login);
        mRememberInfo = findViewById(R.id.checkBox);
        mDelete = findViewById(R.id.delete);
        mDelete1 = findViewById(R.id.delete1);

        mDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mUser.setText("");
            }
        });

        mDelete1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mPssword.setText("");
            }
        });

        mUser.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (s.length() > 0) {
                    //显示清除按钮
                    mDelete.setVisibility(View.VISIBLE);
                } else {
                    //隐藏清除按钮
                    mDelete.setVisibility(View.INVISIBLE);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

        mPssword.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (s.length() > 0) {
                    //显示清除按钮
                    mDelete1.setVisibility(View.VISIBLE);
                } else {
                    //隐藏清除按钮
                    mDelete1.setVisibility(View.INVISIBLE);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

    }

登录按钮的逻辑实现：

TextUtils.isEmpty()检测字符串是否为空。

如果记住账号与密码的复选框被选中，将输入存入文件中。

putString()需要key与value,value就是我们需要存入的数据，key是用来查找相应数据的，按什么顺序存入的数据，就需要按什么顺序读取出来。

if(mRememberInfo.isChecked()) {
                    SharedPreferences.Editor editor = mSp.edit();
                    editor.putString("user", user);
                    editor.putString("password", password);
                    editor.commit();
                }

 public void login(View view) {
        String user =  mUser.getText().toString().trim();
        String password = mPssword.getText().toString().trim();

        if(TextUtils.isEmpty(user) || TextUtils.isEmpty(password)) {
            Toast.makeText(MainActivity.this, "账号与密码不能为空!", Toast.LENGTH_SHORT).show();
        }
        else {
            if("10086".equals(user) && "10010".equals(password)) {

                if(mRememberInfo.isChecked()) {
                    SharedPreferences.Editor editor = mSp.edit();
                    editor.putString("user", user);
                    editor.putString("password", password);
                    editor.commit();
                }

                Toast.makeText(MainActivity.this,"登录成功!", Toast.LENGTH_SHORT).show();
            }
            else {
                SharedPreferences.Editor editor = mSp.edit();
                editor.putString("user", "");
                editor.putString("password", "");
                editor.commit();
                Toast.makeText(MainActivity.this,"登录失败!", Toast.LENGTH_SHORT).show();
            }
        }
    }

如果记住账号与密码的框被选中，则退出app后，下一次登录会再显示账号与密码，前提是上一次输入的账号与密码都正确。

public void restoreInfor() {
        String user = mSp.getString("user", "");
        String pwd = mSp.getString("password", "");
        mUser.setText(user);
        mPssword.setText(pwd);
    }