Android注册页面展示

发布于 2024-10-18  666 次阅读


代码展示:

  • xml1部分
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/register_bg">

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

<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#01ceff"
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">

<TextView
style="@style/tvOne"
android:padding="8dp"
android:drawableTop="@drawable/qq_icon"
android:text="用QQ注册"
android:gravity="center"
/>

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

<TextView
style="@style/tvOne"
android:padding="8dp"
android:drawableTop="@drawable/wechat"
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" />

<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"
android:hint="请输入姓名"/>

</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:hint="请输入邮箱"/>

</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"
android:hint="请输入密码"/>
</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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
android:textColor="@android:color/white"
android:textSize="15sp" />
</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>

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

</LinearLayout>

<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:gravity="center"
android:text="提交"
android:textColor="@android:color/white"
android:background="@null"
android:textSize="18sp" />

</RelativeLayout>
  • xml2部分
<resources>
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar"></style>

<!-- 定义水平分割线的样式 -->
<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>
<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>
-- 定义一个名为"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>
<!-- 定义一个名为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>
</resources>
  • java部分
package cn.itcast.zhuce;

import android.annotation.SuppressLint;
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 MainActivity extends AppCompatActivity implements View.OnClickListener, CompoundButton.OnCheckedChangeListener, RadioGroup.OnCheckedChangeListener {

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

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Init();
}

/**
* 初始化用户界面组件
* 通过ID获取所有必要的界面元素,以便在表单中使用
*/
@SuppressLint("WrongViewCast")
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_read.setOnCheckedChangeListener(this);
cb_read.setOnCheckedChangeListener(this);
hobbys = new String();
//设置单选组件的点击事件
rg_sex.setOnCheckedChangeListener(this);

}


private void getData() {
name = et_name.getText().toString();
email = et_email.getText().toString();
pwd = et_pwd.getText().toString();

}@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
//根据点击的单选按钮ID更新性别变量
if (i == R.id.rb_boy) {
sex = "男";
} else if (i == R.id.rb_girl) {
sex = "女";
}

}

//提交按钮的点击事件
@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(email)) {
Toast.makeText(this, "请输入邮箱", Toast.LENGTH_SHORT).show();
} else if (TextUtils.isEmpty(pwd)) {
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 {
String registrationInfo = "名字:" + name + ",邮箱:" + email + ",性别:" + sex + ",爱好:" + hobbys;
Toast.makeText(this, "注册成功!" + registrationInfo, Toast.LENGTH_LONG).show();
Log.i("register", "注册信息为:" + registrationInfo);
}
}
}

// 复合按钮的点击事件
@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, "");
// 从爱好列表中移除当前文本
}
}
}


}

图片素材:


日常分享
最后更新于 2025-03-14