效果图:
采用RelativeLayout布局,主要说中间这块输入账号与密码的设计。
分别采用两个LinearLayout,在往里加上控件,调整位置。
那条灰色的线通过控件View实现。
这里首先隐藏了删除按钮的图片,如果输入数据的 时候,自然会显示出来。
android:visibility="invisible"
还有一些自己添加的style与color。
button.xml:
<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:
<resources>
<color name="colorPrimary">#5c5f6ccolor>
<color name="colorPrimaryDark">#303F9Fcolor>
<color name="colorAccent">#FF4081color>
<color name="colorButton">#2634c2color>
<color name="background">#ddefeeeecolor>
resources>
style.xml:
-- Base application theme. -->
UI界面代码:
<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>
隐藏应用最上面的蓝色框体:
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);
}