Android-实现登录窗口(找回密码，随机验证码)

Posted 2022-12-02 十壹、

1. 结果展示

2. 从布局开始
新建一个Empty Activity,命名为Login,勾选Generate a Layout File和Launcher Activity。让其成为主活动。
布局开始前先会运用一些布局

• RadioGroup提供了一种多选一的选择模式
• Spinner 是android 系统下拉的一个控件
• checkbox 是一个复选框，选中再次点击它，即可取消选中
• stroke 就是边框编辑
• corners 是用来字义圆角的
  在drawable下编写一个正常的密码框命名为shape_edit_normal.xml，和一个被选中的密码框shape_edit_focus.xml。再编写一个两个合起来的edittext_selector.xml。还有复选框选中的xml命名为check_selector.xml。
  编写shape_edit_normal.xml
  新建一个drawable-hdpi,记得在里面添加光标，选择复选框时的图片和未选中复选框时的图片。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffffff" />

    <stroke
        android:width="1dp"
        android:color="#FFaaaaaa"/>

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"/>
</shape>

编写shape_edit_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffffff" />

    <stroke
        android:width="1dp"
        android:color="#ff0000ff"/>

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"/>
</shape>

编写edittext_selector.xml

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

编写check_selector.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/check_choose"/>
    <item android:drawable="@drawable/check_unchoose"/>
</selector>

编写activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:padding="5dp">

    <RadioGroup
        android:id="@+id/group"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">
        
        <RadioButton
            android:id="@+id/button_pw"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="true"
            android:layout_gravity="left|center"
            android:text="密码登录"
            android:textColor="@color/black"
            android:textSize="17sp"/>

        <RadioButton
            android:id="@+id/button_ic"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="false"
            android:layout_gravity="left|center"
            android:text="验证码登录"
            android:textColor="@color/black"
            android:textSize="17sp"/>
    </RadioGroup>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">
        
        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="　　我是："
            android:gravity="center"
            android:layout_alignParentLeft="true"
            android:textColor="@color/black"
            android:textSize="17sp"/>
        
        <Spinner
            android:id="@+id/sp_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/tv_1"
            android:gravity="left|center"
            android:spinnerMode="dialog"/>
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">
        
        <TextView
            android:id="@+id/tv_phone"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="手机号码："
            android:layout_alignParentLeft="true"
            android:textColor="@color/black"
            android:textSize="17sp"/>

        <EditText
            android:id="@+id/et_phone"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/tv_phone"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:gravity="left|center"
            android:background="@drawable/edittext_selector"
            android:hint="请输入手机号码"
            android:inputType="number"
            android:maxLength="11"
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textCursorDrawable="@drawable/text_cursor"
            android:textSize="17sp"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_alignParentLeft="true"
            android:text="登录密码："
            android:textColor="@color/black"
            android:textSize="17sp"/>
        
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/tv_password">

            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:gravity="left|center"
                android:background="@drawable/edittext_selector"
                android:text="请输入密码"
                android:inputType="numberPassword"
                android:maxLength="6"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"
                android:textCursorDrawable="@drawable/text_cursor"
                android:textSize="17sp"/>

            <Button
                android:id="@+id/forget_password"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="right"
                android:text="忘记密码"
                android:textColor="@color/black"
                android:textSize="17sp"/>
        </FrameLayout>
    </RelativeLayout>

    <CheckBox
        android:id="@+id/ck_remember"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@drawable/check_selector"
        android:checked="false"
        android:padding="10dp"
        android:text="记住密码"
        android:textColor="@color/black"
        android:textSize="17sp"/>

    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textColor="@color/black"
        android:textSize="22sp"/>
</LinearLayout>

新建一个Empty Activity,命名为login_forget。编写activity_login_forget.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    android:padding="5dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp" >

        <TextView
            android:id="@+id/tv_password_first"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:gravity="center"
            android:text="输入新密码："
            android:textColor="@color/black"
            android:textSize="17sp" />

        <EditText
            android:id="@+id/et_password_first"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/tv_password_first"
            android:background="@drawable/edittext_selector"
            android:gravity="left|center"
            android:hint="请输入新密码"
            android:inputType="numberPassword"
            android:maxLength="11"
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textCursorDrawable="@drawable/text_cursor"
            android:textSize="17sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp" >

        <TextView
            android:id="@+id/tv_password_second"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:gravity="center"
            以上是关于Android-实现登录窗口(找回密码，随机验证码)的主要内容，如果未能解决你的问题，请参考以下文章
 
 用户登录 之 找回密码 | Django
 基于SpringBoot的QQ邮箱登录注册及找回密码
 WordPress 使用 Pie-Register 添加前台注册登录找回密码和编辑个人资料功能
 中国移动怎么申请随机密码
 简述邮箱找回密码功能
 简易登录表单的制作，包括用户名密码随机验证码（代码完整，复制即用）