目录
前言
在前面，我们已经学习了一些常见的界面布局和界面控件，那么本篇我们就来结合前面所学的知识，来实现一个注册界面。
布局图
我们最终要实现的界面：
那么上面这样的布局是怎么实现的呢？
实现过程
1.导入图片
这里我们需要用到三张图片，分别命名为qq_icon.png、wechat.png、email.png
我们可以直接去iconfont-阿里巴巴矢量图标库 进行查找相应的图片。
2.创建分割线样式
我们可以看到上面的图片中，有7条白色横杠和1条白色的竖杠，那这个是怎么实现的？我们可以在res/values/styles.xml文件下创建一个hLine的样式和一个vLine的样式。
代码如下：
<resources>
<!-- 定义水平分割线的样式 -->
<style name="hLine">
<item name="android:layout_width">match_parent</item> <!-- 宽度匹配父容器 -->
<item name="android:layout_height">1dp</item> <!-- 高度为1dp，实现细线效果 -->
<item name="android:background">@color/white</item> <!-- 背景颜色为白色，形成白色分割线 -->
</style>
<!-- 定义垂直分割线的样式 -->
<style name="vLine">
<item name="android:layout_width">1dp</item> <!-- 宽度为1dp，实现细线效果 -->
<item name="android:layout_height">match_parent</item> <!-- 高度匹配父容器 -->
<item name="android:background">@color/white</item> <!-- 背景颜色为白色，形成白色分割线 -->
</style>
</resources>
3.创建文本样式
在布局图中，我们可以看到，在注册界面中，需要用到“QQ注册”和“微信注册”这两个文本信息，这两个文本具有相同的样式，所以我们可以把这些相同的属性给提取出来。同理的，我们可以看到后面的“名字”、“邮箱”、“密码”、“性别”、“兴趣”这些文本的信息，也是具有同样的样式，所以我们也可以看这些相同的属性给提取出来。
所以，我们针对QQ注册和微信注册这两个文本信息，我们可以创建一个tvOne的样式来存放。样式要放在resources中。
<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:paddingTop">45dp</item> --文本距离顶部距离
<item name="android:drawablePadding">8dp</item> --文本距离顶部距离
<item name="android:gravity">center_horizontal</item> --文本位置
<item name="android:textSize">20sp</item> --文本大小
<item name="android:textColor">@color/white</item> --文本颜色
</style>
那么对于名字等的信息，我们可以在styles.xml中创建一个tvTwo样式存放。
-- 定义一个名为"tvTwo"的样式，主要用于设置文本视图（如TextView）的布局和视觉属性 --
<style name="tvTwo">
<!-- 设置组件的布局宽度为包裹内容，即根据内容自动调整其宽度 -->
<item name="android:layout_width">wrap_content</item>
<!-- 设置组件的布局高度为包裹内容，即根据内容自动调整其高度 -->
<item name="android:layout_height">wrap_content</item>
<!-- 设置文本大小为20sp（scaled pixel），sp是一种根据设备密度自动调整的单位，以确保文本的可读性 -->
<item name="android:textSize">20sp</item>
<!-- 设置文本颜色为白色 -->
<item name="android:textColor">@color/white</item>
<!-- 设置组件背景为null，即不显示背景 -->
<item name="android:background">@null</item>
<!-- 设置组件左边距为20sp，用于分隔组件与左边界的距离 -->
<item name="android:layout_marginLeft">20sp</item>
</style>
4.创建输入框样式
在注册界面需要一些用户信息，如名字、邮箱、密码等，这些输入框具有相同的样式，所以我们可以将具有相同属性的代码提取出来，放到一个样式etOne中。
<!-- 定义一个名为etOne的样式，主要用于设置EditText组件的布局和样式属性 -->
<style name="etOne">
<!-- 设置布局宽度为匹配父容器，使EditText组件的宽度与其父布局的宽度一致 -->
<item name="android:layout_width">match_parent</item>
<!-- 设置布局高度为包裹内容，使EditText组件的高度根据其内容自动调整 -->
<item name="android:layout_height">wrap_content</item>
<!-- 设置左边距为30dp，用于在布局中创建统一的左边空白区域，以区分其他元素 -->
<item name="android:layout_marginLeft">30dp</item>
<!-- 设置背景为null，表示EditText组件不显示背景，以突出文本内容 -->
<item name="android:background">@null</item>
<!-- 设置文本颜色为白色，确保在任何背景色下都能清晰显示文本内容 -->
<item name="android:textColor">@color/white</item>
</style>
5.XML布局文件
我们可以创建一个名为edits.xml的布局，借助上面的样式，就可以实现我们的布局图。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#9EBA78"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#62764A"
android:gravity="center_horizontal"
android:text="注册"
android:textSize="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:orientation="horizontal">
<TextView
style="@style/tvOne"
android:drawableTop="@drawable/qq_icon"
android:text="QQ注册" />
<View style="@style/vLine"></View>
<TextView
style="@style/tvOne"
android:drawableTop="@drawable/wechat"
android:text="微信注册" />
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="15sp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/email" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="使用电子邮箱注册"
android:textSize="20sp" />
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="15sp">
<TextView
android:id="@+id/name"
style="@style/tvTwo"
android:text="姓名" />
<EditText
style="@style/etOne"
android:hint="请输入姓名" />
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="15sp">
<TextView
android:id="@+id/email"
style="@style/tvTwo"
android:text="邮箱" />
<EditText
style="@style/etOne"
android:hint="请输入邮箱" />
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="15sp">
<TextView
android:id="@+id/password"
style="@style/tvTwo"
android:text="密码" />
<EditText
style="@style/etOne"
android:hint="请输入密码" />
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="15sp">
<TextView
style="@style/tvTwo"
android:text="性别" />
<RadioGroup
android:id="@+id/sex"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:textSize="20sp" />
<RadioButton
android:id="@+id/female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20sp"
android:text="女"
android:textSize="20sp" />
</RadioGroup>
</LinearLayout>
<View style="@style/hLine"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="15sp">
<TextView
style="@style/tvTwo"
android:text="兴趣爱好" />
<CheckBox
android:id="@+id/basketball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="篮球"
android:textSize="15sp" />
<CheckBox
android:id="@+id/shuttle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="羽毛球"
android:textSize="15sp" />
<CheckBox
android:id="@+id/football"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="足球"
android:textSize="15sp" />
<CheckBox
android:id="@+id/tennis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="网球"
android:textSize="15sp" />
</LinearLayout>
<View style="@style/hLine"></View>
<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="#728373"
android:text="提交"
android:textColor="@color/white"
android:textSize="18dp" />
</LinearLayout>
</RelativeLayout>测试
我们可以创建一个register.java，在里面来实现我们的注册功能。
先通过来设置register的显示界面，我们需要去AndroidManifest.xml注册一下register.java。
运行一下
6.实现注册功能
我们可以在register.java中定义一个Init()方法来获取界面控件并且设置点击事件，再创建一个getData()方法来获取界面上输入的信息，实现OnClickListener和OnCheckedChangeListener接口，并重写onClick()方法（用来处理提交的点击事件）和onCheckedChanged()方法（用来处理复选框的点击事件）和onCheckedChanged()方法（用来处理单选框的点击事件）。
package com.example.newapptext1;
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.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
public class register extends AppCompatActivity implements View.OnClickListener, CompoundButton.OnCheckedChangeListener, RadioGroup.OnCheckedChangeListener {
private EditText et_name,et_password,et_email;
private RadioGroup radioGroup;
private CheckBox ball,shuttle,tennis,football;
private String email,password,name,sex,hobbys;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.edits);
Init();
}
/**
* 初始化用户界面组件
* 通过ID获取所有必要的界面元素，以便在表单中使用
*/
private void Init() {
//获取界面组件
et_name = findViewById(R.id.ed_name);
et_password = findViewById(R.id.ed_password);
et_email = findViewById(R.id.ed_email);
//获取单选组件
radioGroup = findViewById(R.id.sex);
//获取复选框组件
ball = findViewById(R.id.basketball);
shuttle = findViewById(R.id.shuttle);
tennis = findViewById(R.id.tennis);
football = findViewById(R.id.football);
Button submit=findViewById(R.id.btn_submit);//提交按钮
submit.setOnClickListener(this);//提交按钮点击事件
//设置复合按钮的点击事件
ball.setOnCheckedChangeListener(this);
shuttle.setOnCheckedChangeListener(this);
tennis.setOnCheckedChangeListener(this);
football.setOnCheckedChangeListener(this);
hobbys =new String();
//设置单选组件的点击事件
radioGroup.setOnCheckedChangeListener(this);
}
private void getData(){
name = et_name.getText().toString();
password = et_password.getText().toString();
email = et_email.getText().toString();
}
//提交按钮的点击事件
@Override
public void onClick(View view) {
if(view.getId()==R.id.btn_submit){
getData();
if(TextUtils.isEmpty(name)){
Toast.makeText(this,"请输入名字",Toast.LENGTH_SHORT).show();
}else if(TextUtils.isEmpty(password)){
Toast.makeText(this,"请输入密码",Toast.LENGTH_SHORT).show();
}else if(TextUtils.isEmpty(email)){
Toast.makeText(this,"请输入邮箱",Toast.LENGTH_SHORT).show();
}else if(TextUtils.isEmpty(sex)){
Toast.makeText(this,"请选择性别",Toast.LENGTH_SHORT).show();
}else if (TextUtils.isEmpty(hobbys)){
Toast.makeText(this,"请选择爱好",Toast.LENGTH_SHORT).show();
}else {
Toast.makeText(this,"注册成功",Toast.LENGTH_SHORT).show();
Log.i("register","注册信息为："+" 名字："+name+" 邮箱："+email+" 密码："+password+" 性别："+sex+" 爱好："+hobbys);
}
}
}
// 复合按钮的点击事件
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
String motion = compoundButton.getText().toString(); // 获取复选框的文本
if (b) {
// 如果复选框被选中
if (!hobbys.contains(motion)) {
// 如果爱好列表中不包含当前文本
hobbys = hobbys + motion;
// 将当前文本添加到爱好列表中
}
} else {
// 如果复选框被取消选中
if (hobbys.contains(motion)) {
// 如果爱好列表中包含当前文本
hobbys = hobbys.replace(motion, "");
// 从爱好列表中移除当前文本
}
}
}
//单选组件的点击事件
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
//根据点击的单选按钮ID更新性别变量
if(i==R.id.male){
sex ="男";
} else if(i==R.id.female){
sex ="女";
}
}
}
我们运行进行测试。
如果我们想对密码保密，那么就可以在输入密码的复合控件中加入
android:inputType="textPassword"
android实现的注册界面
以上就是本篇所有内容~
若有不足，欢迎指正~
2116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
