AndroidStudio case - switching of login page

simple login page

【Show results】

 

[xml code]

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:padding="10dp"
    >

<!--        登录方式的选择-->
    <RadioGroup
        android:id="@+id/login"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp">
        <RadioButton
            android:id="@+id/password_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="密码登录"
            android:textSize="18dp"
            />
        <RadioButton
            android:id="@+id/yzm_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="80dp"
            android:text="验证码登录"
            android:textSize="18dp"
            />
    </RadioGroup>
    <!--        手机号码-->
    <LinearLayout
        android:id="@+id/phone"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/login">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="手机号码："
            android:textSize="20dp" />
        <EditText
            android:layout_width="270dp"
            android:layout_height="50dp"
            android:singleLine="true"
            android:hint="请输入手机号"
            android:background="@drawable/editext_selector"
            />
    </LinearLayout>
<!--        登录密码-->
    <LinearLayout
        android:id="@+id/password_view"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/phone">

        <TextView
            android:id="@+id/password_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录密码："
            android:textSize="20dp" />
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <EditText
                    android:id="@+id/password_value"
                    android:layout_width="160dp"
                    android:layout_height="50dp"
                    android:singleLine="true"
                    android:hint="请输入密码"
                    android:background="@drawable/editext_selector"
                    tools:ignore="MissingConstraints" />

                <Button
                    android:id="@+id/login_yzm"
                    android:layout_width="110dp"
                    android:layout_height="50dp"
                    android:layout_toEndOf="@id/password_value"
                    android:text="登录"
                    android:background="@color/colorPrimaryDark"/>
            </RelativeLayout>


    </LinearLayout>
    <CheckBox
        android:id="@+id/btn_forget"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="记住密码"
        android:layout_below="@id/password_view"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_below="@+id/btn_forget"
        android:gravity="center"
        android:text="登录" />
<!--    未解决的bug：
    1.输入框的宽度屏幕自适应
    2.密码设置为不可见，验证码可见（JAVA更改编辑框的属性）
-->
</RelativeLayout>

 [Java code]

package com.example.a10133;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    TextView password_txt;
    EditText password_value;
    Button login_yzm;
    RadioGroup login;
    CheckBox btn_forget;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //加载布局
        setContentView(R.layout.activity_main);
        //获取控件
//        密码登录
        password_txt = findViewById(R.id.password_txt);
//        输入的密码框
        password_value = findViewById(R.id.password_value);
//        登录及获取验证码按钮
        login_yzm = findViewById(R.id.login_yzm);
//        忘记密码按钮
        btn_forget = findViewById(R.id.btn_forget);
//        选择两种登录方式
        login = findViewById(R.id.login);
        //单选按钮组绑定监听器
        login.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if (checkedId == R.id.password_login) {
                    password_txt.setText("登录密码：");
                    password_value.setHint("请输入密码");
                    login_yzm.setText("登录");
                    btn_forget.setVisibility(View.VISIBLE);
                } else if (checkedId == R.id.yzm_login) {
                    password_txt.setText("    验证码：");
                    password_value.setHint("请输入验证码");
                    login_yzm.setText("获取验证码");
                    btn_forget.setVisibility(View.INVISIBLE);
                }
            }
        });
    }

}

appendix

medium drawable

[editext_selector.xml code]

<?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>

[shape_edit_focus.xml code]

<?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>

[shape_edit_normal.xml code]

<?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>

in values

【Code added by colors.xml】

<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>

【Code added by themes.xml】

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorAccent">@color/colorAccent</item>