安卓(android)实现注册界面【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的（如果代码有错漏，可查看源码）

1.掌握LinearLayout、RelativeLayout、FrameLayout等布局的综合使用。

2.掌握ImageView、TextView、EditText、CheckBox、Button、RadioGroup、RadioButton、ListView、RecyclerView等控件在项目中的综合使用。

3.掌握布局和控件的灵活运用，实现注册界面的布局设计。

二、实验条件

1.掌握了常见界面布局的特点及使用，熟悉XML方式和java代码方式编写界面布局。

2.掌握了ImageView、TextView、EditText、CheckBox、Button、RadioGroup、RadioButton等简单控件的使用。

三、实验内容

1.去掉默认标题栏：修改theme属性的值去掉默认标题栏。

2.实现注册功能：获取界面控件创建文本样式；设置单选按钮的点击事件。

3.运行结果：运行程序，并在界面上输入注册信息；点击“提交”按钮，Toast提示注册成功。

四、实验指导

1.去掉默认标题栏

(1)依次进入创建项目下的app目录→src目录→main目录→res目录→values目录。

(2)打开themes.xml文件，修改应用的主题如下：

<style name="Theme.RegiserAppDemo" parent="Theme.AppCompat.NoActionBar">
        <!-- Primary brand color. -->
        <!-- Secondary brand color. -->
        <!-- Status bar color. -->
       	……
        <!-- Customize your theme here. -->
</style>

2.实现注册功能

(1)在value目录下创建styles.xml文件，定义界面中水平分割线、垂直分割线、TextView和EditText等控件的样式如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="hLine">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@android:color/white</item>
    </style>




    <style name="tvOne">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:drawablePadding">8dp</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:paddingTop">40dp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">15dp</item>
    </style>

    <style name="tvTwo">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">20dp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">15dp</item>
    </style>


    <style name="etOne">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">30dp</item>
        <item name="android:background">@null</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

(2)在layout目录下的layout_main.xml文件中，引入界面需要的布局和控件，将第(1)步的样式文件引入设置，布局代码结构、代码图及设计预览图如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/background_bg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:ignore="ExtraText">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@android:color/holo_blue_bright"
            android:gravity="center"
            android:text="注册"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:orientation="horizontal"
            android:divider="@android:color/white"
            android:showDividers="middle">

            <TextView
                style="@style/tvOne"
                android:drawableTop="@drawable/qq_icon"
                android:text="用QQ注册" />


            <TextView
                style="@style/tvOne"
                android:drawableTop="@drawable/weixin_icon"
                android:text="用微信注册" />
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="15dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/email_icon" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:text="使用电子邮箱注册"
                android:textColor="@android:color/white"
                android:textSize="15sp" />
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:text="名字" />

            <EditText
                android:id="@+id/et_name"
                style="@style/etOne" />
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:text="邮箱" />

            <EditText
                android:id="@+id/et_email"
                style="@style/etOne"
                android:inputType="textEmailAddress" />
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:text="密码" />

            <EditText
                android:id="@+id/et_pwd"
                style="@style/etOne"
                android:inputType="textPassword" />
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:text="性别" />

            <RadioGroup
                android:id="@+id/rg_sex"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="50dp"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/rb_boy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="男"
                    android:textColor="@android:color/white"
                    android:textSize="15sp" />

                <RadioButton
                    android:id="@+id/rb_girl"
                    style="@style/tvTwo"
                    android:layout_width="match_parent"
                    android:text="女" />
            </RadioGroup>
        </LinearLayout>

        <View style="@style/hLine" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="请选择兴趣爱好:"
                android:textColor="@android:color/white"
                android:textSize="15sp" />

            <CheckBox
                android:id="@+id/cb_sing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="唱歌"
                android:textColor="@android:color/white"
                android:textSize="15sp" />

            <CheckBox
                android:id="@+id/cb_dance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="跳舞"
                android:textColor="@android:color/white"
                android:textSize="15sp" />

            <CheckBox
                android:id="@+id/cb_read"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="读书"
                android:textColor="@android:color/white"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>

    <View style="@style/hLine" />

    <View
        android:id="@+id/v_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/btn_submit"
        android:background="@android:color/darker_gray" />

    <Button
        android:id="@+id/btn_submit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:text="提交"
        android:textColor="@android:color/white"

        android:textSize="18sp" />

</RelativeLayout>

(3)在MainActivity.java文件中实现需求功能业务逻辑，代码如下：

package com.example.myapplication2022;


import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, CompoundButton.OnCheckedChangeListener {

    private EditText et_name, et_email, et_pwd;
    private Button btn_submit;
    private String name, email, pwd, sex, hobbies;
    private RadioGroup rg_sex;
    private CheckBox cb_sing, cb_dance, cb_read;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        init();
    }

    private void init() {
        // 初始化控件
        et_name = findViewById(R.id.et_name);
        et_email = findViewById(R.id.et_email);
        et_pwd = findViewById(R.id.et_pwd);
        rg_sex = findViewById(R.id.rg_sex);
        cb_sing = findViewById(R.id.cb_sing);
        cb_dance = findViewById(R.id.cb_dance);
        cb_read = findViewById(R.id.cb_read);
        btn_submit = findViewById(R.id.btn_submit);

        // 设置监听事件
        btn_submit.setOnClickListener(this);
        cb_sing.setOnCheckedChangeListener(this);
        cb_dance.setOnCheckedChangeListener(this);
        cb_read.setOnCheckedChangeListener(this);
        hobbies = new String();

        // 设置性别选项的监听事件
        rg_sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb_boy:
                        sex = "男";
                        break;
                    case R.id.rb_girl:
                        sex = "女";
                        break;
                }
            }
        });
    }

    /**
     * 获取用户输入的信息
     */
    private void getData() {
        name = et_name.getText().toString().trim();
        email = et_email.getText().toString().trim();
        pwd = et_pwd.getText().toString().trim();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_submit:
                getData();
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(MainActivity.this, "请输入名字", Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(email)) {
                    Toast.makeText(MainActivity.this, "请输入邮箱", Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(pwd)) {
                    Toast.makeText(MainActivity.this, "请输入密码", Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(sex)) {
                    Toast.makeText(MainActivity.this, "请选择性别", Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(hobbies)) {
                    Toast.makeText(MainActivity.this, "请选择兴趣爱好", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "注册成功", Toast.LENGTH_SHORT).show();
                    Log.i("MainActivity", "注册的用户信息：" +
                            "名字：" + name +
                            "，邮箱：" + email +
                            "，性别：" + sex +
                            "，兴趣爱好：" + hobbies);
                }
                break;
        }
    }

    /**
     * 监听兴趣爱好的点击事件
     */
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String motion = buttonView.getText().toString(); // 获取选项的文本内容
        if (isChecked) {
            if (!hobbies.contains(motion)) {
                // 判断之前选择的内容是否与此次选择的不同
                hobbies = hobbies + motion;
            }
        } else {
            if (hobbies.contains(motion)) {
                hobbies = hobbies.replace(motion, ""); // 取消选择时移除
            }
        }
    }
}