Android:＜3＞用户登陆页面练习

在我们学完了复选框和单选框之后，我们就可以来模拟一下用户登录界面；

这个界面有用户名、密码、确认密码、复选框（爱好）和单选框（男女）、toast，最下面还有一张图片：

同样的，在我们拿到一个页面之后，我们要想到 大致的做法；

比如，我看到了这样的一个页面，我就想到上面的编辑框和文本标签用约束布局来作，下面的复选框和单选框就用线性布局来做，那么我们就需要实现布局的嵌套。

如果对于编辑框有什么不懂可以看前面的文章，比如我们将长度变为占据后面的所有位置以及留一点，还有复选框和单选框的格式前面都有，这里我直接贴代码供大家参考：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity4">
    <TextView
        android:id="@+id/tv_myname"
        style="@style/mytvstyle"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/ed_myname"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="30dp"
        android:text="用户名:"/>
    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ed_myname"
        app:layout_constraintLeft_toRightOf="@+id/tv_myname"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/tv_myname"
        android:layout_marginTop="30dp"
        android:layout_marginRight="20dp"
        />

    <TextView
        style="@style/mytvstyle"
        android:id="@+id/tv_mypwd"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_myname"
        app:layout_constraintRight_toLeftOf="@+id/ed_mypwd"
        android:layout_marginTop="20dp"
        android:text="密码:"/>

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ed_mypwd"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toRightOf="@+id/tv_mypwd"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/tv_mypwd"
        android:layout_marginRight="20dp"
        android:inputType="textPassword"
        />


    <TextView
        style="@style/mytvstyle"
        android:id="@+id/tv_mypwd2"
        android:text="确认密码:"
        app:layout_constraintRight_toLeftOf="@+id/ed_mypwd2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_mypwd"
        android:layout_marginTop="20dp"
        />
    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ed_mypwd2"
        app:layout_constraintLeft_toRightOf="@+id/tv_mypwd2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/tv_mypwd2"
        android:layout_marginRight="20dp"
        android:inputType="textPassword"
        />


    <TextView
        style="@style/mytvstyle"
        android:id="@+id/tv_mysex"
        android:text="性别:"
        app:layout_constraintTop_toBottomOf="@+id/tv_mypwd2"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintRight_toLeftOf="@+id/rg_mygroup"/>
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/rg_mygroup"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@+id/ed_mypwd2"
        app:layout_constraintLeft_toRightOf="@+id/tv_mysex"
        android:orientation="horizontal"
        >
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rb_mybutton1"
            android:text="男"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rb_mybutton2"
            android:text="女"/>
    </RadioGroup>

    <TextView
        style="@style/mytvstyle"
        android:id="@+id/tv_myhobby"
        android:text="爱好:"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_mysex"
        android:layout_marginTop="20dp"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ll_check1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_myhobby"
        android:layout_marginTop="20dp"
        >
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/cb_check1"
            android:layout_marginLeft="20dp"
            android:text="玩手机"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/cb_check2"
            android:layout_marginLeft="20dp"
            android:text="游戏"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ll_mycheck2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ll_check1"
        >
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/cb_check3"
            android:layout_marginLeft="20dp"
            android:text="码代码"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/cb_check4"
            android:layout_marginLeft="20dp"
            android:text="美食"/>
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:src="@drawable/register"
        android:onClick="ivmylisterrn"
        android:layout_marginBottom="50dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

最下面有一个图片，点击它如果两次密码一致就会输出所有信息，如果不对就输出一句话：两次密码不正确；

不过我还是认为页面布局大家想怎么做就怎么做，如果实在不会就可以参考；

我们做好布局之后，在最后的imgeview加一个监听，来响应用户操作：

public void ivmylisterrn(View view) {
        //1.4 当点击后，获取相应的密码进行判断
        pwd1=ed_mypwd.getText().toString();
        pwd2=ed_mypwd2.getText().toString();
        //1.5 进行密码正确与否的判断
        if(pwd1.equals(pwd2)){
            //1.7 拿到内容并拼接
            str = "用户名:"+ed_myname.getText().toString()+"\n"
                    +"密码："+pwd1+"\n"+"性别：";
            //1.8 判断男女和获取爱好
            if(rb_mybutton1.isChecked()){
                str+="男\n";
            }else{
                str+="女\n" ;
            }
            str+="爱好：";
            if(cb_check1.isChecked()){
                str+="玩手机  ";
            }
            if(cb_check2.isChecked()){
                str+="玩游戏  ";
            }
            if(cb_check3.isChecked()){
                str+="码代码  ";
            }
            if(cb_check4.isChecked()){
                str+="美食  ";
            }
            Toast.makeText(this,str,Toast.LENGTH_LONG).show();
            str="";
        }else{
            Toast.makeText(this,"两次密码输入不同",Toast.LENGTH_LONG).show();
        }
    }

 我们实现toast显示这些文字也很简单，就是定义好一个全局变量进行拼接，我们判读复选框和单选框的选择情况和获取编辑框的内容，很容易实现；

同样的我们在做之前，先将要用到的组件的对象先获取到：

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity4 extends AppCompatActivity {

    //1.1 自定义变量
    EditText ed_myname,ed_mypwd,ed_mypwd2;
    RadioGroup rg_mygroup;
    RadioButton rb_mybutton1,rb_mybutton2;
    CheckBox cb_check1,cb_check2,cb_check3,cb_check4;

    //1.3 定义两个字符串存放两次代码
    String pwd1,pwd2;

    //1.6 定义一个变量来接受所有选择情况
    String str;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        paramters();
    }


    //1.2 初始化变量
    public void paramters(){
        ed_myname=findViewById(R.id.ed_myname);
        ed_mypwd=findViewById(R.id.ed_mypwd);
        ed_mypwd2=findViewById(R.id.ed_mypwd2);
        rg_mygroup=findViewById(R.id.rg_mygroup);
        cb_check1=findViewById(R.id.cb_check1);
        cb_check2=findViewById(R.id.cb_check2);
        cb_check3=findViewById(R.id.cb_check3);
        cb_check4=findViewById(R.id.cb_check4);
        rb_mybutton1=findViewById(R.id.rb_mybutton1);
        rb_mybutton2=findViewById(R.id.rb_mybutton2);
    }
    public void ivmylisterrn(View view) {
        //1.4 当点击后，获取相应的密码进行判断
        pwd1=ed_mypwd.getText().toString();
        pwd2=ed_mypwd2.getText().toString();
        //1.5 进行密码正确与否的判断
        if(pwd1.equals(pwd2)){
            //1.7 拿到内容并拼接
            str = "用户名:"+ed_myname.getText().toString()+"\n"
                    +"密码："+pwd1+"\n"+"性别：";
            //1.8 判断男女和获取爱好
            if(rb_mybutton1.isChecked()){
                str+="男\n";
            }else{
                str+="女\n" ;
            }
            str+="爱好：";
            if(cb_check1.isChecked()){
                str+="玩手机  ";
            }
            if(cb_check2.isChecked()){
                str+="玩游戏  ";
            }
            if(cb_check3.isChecked()){
                str+="码代码  ";
            }
            if(cb_check4.isChecked()){
                str+="美食  ";
            }
            Toast.makeText(this,str,Toast.LENGTH_LONG).show();
            str="";
        }else{
            Toast.makeText(this,"两次密码输入不同",Toast.LENGTH_LONG).show();
        }
    }
}

 当然，和之前说的一样，我们的变量名保持和组件ID名一致，这样就不容易错；

还是讲一下怎么样的逻辑吧，首先我们定义连个检验密码的字符串pwd1和pwd2，分别通过gettext().tostring()方法来获取到内容，再利用字符串的比较函数equals（）进行两字符串的比较，成功就输出内容，失败就输出那句话；

然后通过一些列的ischeckded()判断来进行字符串的拼接，挺简单的，非常适合练手；

好了，就这些，代码都在这，至于那张图片就直接给你们吧；

关注我，更多分享!