Android开发学习日记--登录界面

最新推荐文章于 2024-07-25 11:10:08 发布

清梦2020

最新推荐文章于 2024-07-25 11:10:08 发布

阅读量1k

点赞数

分类专栏： Android开发学习文章标签： android studio android android-studio

本文链接：https://blog.csdn.net/m0_52238102/article/details/125761298

版权

Android开发学习专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一、效果展示

二、实现步骤

首先介绍下实现的步骤：

首先是设置焦点变更监听器，当输入完手机号码点击下一栏时，检查手机号是否有效。如果无效的手机号，会实现焦点重新返回到手机号码栏（可以参考我的另一篇文章）
设置文本变更变化监听器，当手机号输入到11位后，也就是输入完成后，实现自动收起键盘功能。(具体讲解同样是参考上一篇文章）
设置单选按钮勾选变化监听器，实现验证码登陆和密码登陆两种方式的切换。
设置获取验证码按钮的点击事件，使用自定义类MyCountDownTimer继承CountDownTimer，并实现相应的方法，为获取验证码按钮实现动态效果。
使用sharedPreferences记住密码。

具体实现代码都有注释，请直接食用：
XML代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingStart="10dp"
    android:paddingLeft="10dp"
    tools:context=".MainActivity">

    <RadioGroup
        android:id="@+id/radio"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
        android:id="@+id/r_verification"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:checked="true"
        android:text="验证码登录"/>
        <RadioButton
            android:id="@+id/r_password"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="密码登录"/>
    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginBottom="5dp"
        tools:visibility="visible">

        <TextView
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:text="手机号码:"
            android:textColor="#000000"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/et_phone"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/edittext"
            android:inputType="number"
            android:hint="请输入手机号"
            android:maxLength="11" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/l_password"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:visibility="gone">

        <TextView
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:gravity="center"
            android:text="密      码:"
            android:textColor="#000000"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/et_password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/edittext"
            android:focusedByDefault="true"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:maxLength="16" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="34dp"
        android:layout_marginBottom="5dp"
        android:id="@+id/l_verification">

        <TextView
            android:gravity="center"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:layout_width="80dp"
            android:layout_height="34dp"
            android:textSize="18sp"
            android:textColor="#000000"
            android:text="验 证 码:"/>
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/et_verification"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/edittext"
                android:hint="请输入验证码"
                android:inputType="number"
                android:maxLength="6"
                android:padding="5dp" />

            <Button
                android:id="@+id/bt_verify"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/btn_selector"
                android:text="获取验证码" />
            <!--默认模式会有空白空间,自定义background可以消除按钮的空白-->
        </RelativeLayout>
    </LinearLayout>
    <CheckBox
        android:id="@+id/cb_remember_the_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@drawable/checkbox"
        android:checked="false"
        android:layout_marginTop="10dp"
        android:visibility="gone"
        android:layout_marginLeft="10dp"
        android:paddingStart="5dp"
        android:paddingLeft="5dp"
        android:text="记住密码" />

    <CheckBox
        android:id="@+id/cb_consent_accord"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@drawable/checkbox"
        android:checked="false"
        android:layout_margin="10dp"
        android:paddingStart="5dp"
        android:paddingLeft="5dp"
        android:text="您已阅读并同意用户协议和隐私政策协议" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center">

        <Button
            android:id="@+id/bt_login"
            android:layout_width="310dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:background="@drawable/btn_selector"
            android:gravity="center"
            android:text="立即登陆" />
    </RelativeLayout>

</LinearLayout>

Java代码：

import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.Toast;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import com.example.helloworld.util.HideInputMethod;

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener {

    private EditText et_phone;
    private EditText et_password;
    private EditText et_verification;
    private SharedPreferences sharedPreferences;
    private final MyCountDownTimer myCountDownTimer=new MyCountDownTimer(60000,1000);
    private Button bt_CountDown;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadioGroup r=findViewById(R.id.radio);
        LinearLayout l_verification=findViewById(R.id.l_verification);
        LinearLayout l_password=findViewById(R.id.l_password);
        et_phone = findViewById(R.id.et_phone);
        et_password = findViewById(R.id.et_password);
        et_verification = findViewById(R.id.et_verification);
        CheckBox cb_remember_the_password=findViewById(R.id.cb_remember_the_password);
        CheckBox cb_consent_accord=findViewById(R.id.cb_consent_accord);
        Button bt_login=findViewById(R.id.bt_login);
        Button bt_verify=findViewById(R.id.bt_verify);
        sharedPreferences = getSharedPreferences("password",MODE_PRIVATE);
        String phone=sharedPreferences.getString("phone",null);
        String password=sharedPreferences.getString("password",null);
        if(phone!=null) et_phone.setText(phone);
        if(password!=null)
        {
            r.check(R.id.r_password);
            et_password.setText(password);
        }

        //设置密码或验证码的单选状态改变监听器
        r.setOnCheckedChangeListener((group, checkedId) -> {
            if(checkedId==R.id.r_verification)
            {
                l_password.setVisibility(View.GONE);
                l_verification.setVisibility(View.VISIBLE);
                cb_remember_the_password.setVisibility(View.GONE);
            }
            else
            {
                l_verification.setVisibility(View.GONE);
                l_password.setVisibility(View.VISIBLE);
                cb_remember_the_password.setVisibility(View.VISIBLE);
            }
        });
        //文本框设置文本改变监听器，到最大长度后自动收起键盘
        et_phone.addTextChangedListener(new HideTextWatcher(et_phone,11));
        et_password.addTextChangedListener(new HideTextWatcher(et_password,16));
        et_verification.addTextChangedListener(new HideTextWatcher(et_verification,6));
        //设置焦点改变监听器
        et_password.setOnFocusChangeListener(this);
        et_verification.setOnFocusChangeListener(this);
        //设置获取验证码按钮的点击事件
        bt_verify.setOnClickListener(v->{
            if(Check(et_phone))
            {
                bt_CountDown=bt_verify;
                myCountDownTimer.start();
            }
        });

        //设置登陆按钮的点击事件
        bt_login.setOnClickListener(v -> {
            if(cb_consent_accord.isChecked())  //判断是否勾选用户协议
            {
                if(r.getCheckedRadioButtonId()==R.id.r_password)    //判断登陆类型
                {
                    String p=et_password.getText().toString();
                    String ph=et_phone.getText().toString();
                    SharedPreferences.Editor editor=sharedPreferences.edit();
                    if(p.length()>=8)
                    { //不可能输入超过16位，因为编辑框限制了最大长度
                        if(cb_remember_the_password.isChecked())
                        {
                        //开始记住密码，我们默认密码正确
                            editor.putString("phone",ph);
                            editor.putString("password",p);
                            editor.commit();
                        }
                        else  //清除密码
                        {
                            editor.remove("phone");
                            editor.remove("password");
                            editor.commit();
                        }
                        Toast.makeText(this, "登陆成功！等待页面跳转...", Toast.LENGTH_SHORT).show();
                    }
                    else
                        Toast.makeText(this, "请输入正确的密码！", Toast.LENGTH_SHORT).show();
                }
                else
                {
                    String verification=et_verification.getText().toString();
                    if(verification.length()==6)
                        Toast.makeText(this, "登陆成功！等待页面跳转...", Toast.LENGTH_SHORT).show();
                    else
                        Toast.makeText(this, "验证码错误！", Toast.LENGTH_SHORT).show();
                }
            }
            else
                Toast.makeText(this, "请同意并勾选用户协议和隐私政策协议", Toast.LENGTH_SHORT).show();
        });
    }
    private Boolean Check(EditText et)
    {
        if(et.getId()==R.id.et_phone)
        {
            String text=et.getText().toString();
            if(text.isEmpty()||text.length()<11)
            {
                et.requestFocus();
                Toast.makeText(this, "请输入11位手机号", Toast.LENGTH_SHORT).show();
                return false;
            }
            else return true;
        }
        else return true;
    }

    @Override   //重写焦点变换监听器
    public void onFocusChange(View v, boolean hasFocus) {
        if(v.getId()==R.id.et_phone&&!hasFocus)
            Check(et_phone);
    }

    private class HideTextWatcher implements TextWatcher {
        EditText editText;
        int maxLength;

        HideTextWatcher(EditText ed,int max)
        {
            editText=ed;
            maxLength=max;
        }
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
        public void onTextChanged(CharSequence s, int start, int before, int count) {}
        public void afterTextChanged(Editable s) {
            if(s.length()==maxLength)  //隐藏输入法
                HideInputMethod.hideInput(MainActivity.this,editText);
        }
    }
    private class MyCountDownTimer extends CountDownTimer
    {
        public MyCountDownTimer(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);

        }
        @Override
        public void onTick(long millisUntilFinished) {
            Log.e("计时器","正在运行");
            bt_CountDown.setClickable(false);
            bt_CountDown.setText(millisUntilFinished/1000+"秒");
        }
        @Override
        public void onFinish() {
            bt_CountDown.setClickable(true);
            bt_CountDown.setText("重新获取");
        }
    }

}

记录下遇到的问题：

当Button的android:background属性是默认值的时候，Button按钮是会有空白间隙的，是padding和margin的问题。情况如下：

自定义的背景就会解决这个问题：

代码如下：
btn_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/btn_press"/>
    <item android:drawable="@drawable/btn_normal"/>
</selector>

btn_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#888888" />
    <corners android:radius="2dp" />
</shape>

btn_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#D0D0D0" />
    <corners android:radius="2dp" />
</shape>

自定义的复选框：
checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/gx" />
    <item android:drawable="@drawable/ngxx" />
</selector>