Activity各类控件学习小结：实现简单的用户界面
Activity各类控件学习小结：实现简单的用户界面
目标：实现不同用户的图片的选择与显示对应图片的demo
（1）默认添加10个照片文件到app中，p1到p10
（2）主要控件和逻辑：
一个ImageView，显示用户头像；
一个下拉框，显示用户的姓名列表信息，默认两个用户，下拉选择后更新用户头像，并显示年龄和身高在头像下面；
三个输入框，输入姓名、年龄，身高；
一个添加按钮，点击添加按钮后，把新增的用户添加到下拉框列表；
先创建一个新项目，和基础的部分我就不再展示了，并且找好10个图片放入自己的资源drawable文件夹
先来创建一个布局文件user_layout.xml，
根据上述的要求我们吧需要的控件网上堆一堆，后续可以细细调整他们的格式，可以知道我们首先应该展示用户的头像
<ImageView
android:id="@+id/iv_avatar"
android:layout_width="195dp"
android:layout_height="202dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/p1" />
设置头像是水平方向剧中
下面要展示的是当前这个用户的基本信息，弄一个TextView上去
<TextView
android:id="@+id/tv_user_info"
android:layout_width="match_parent"
android:layout_height="154dp"
android:layout_marginTop="16dp"
android:gravity="center"
android:textSize="16sp" />
下面就是选择用户的下拉框了
<Spinner
android:id="@+id/sp_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:prompt="@string/select_user_prompt" />
接下来是输入框3个分别对应姓名年龄身高，我使用一个竖直嵌套水平的嵌套LinearLayout来做，
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="姓名:"
android:textSize="16sp" />
<EditText
android:id="@+id/et_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:hint="请输入姓名" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="性别:"
android:textSize="16sp" />
<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:checked="true" />
<RadioButton
android:id="@+id/rb_female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
android:layout_marginStart="16dp" />
RadioGroup>
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="年龄:"
android:textSize="16sp" />
<EditText
android:id="@+id/et_age"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:hint="请输入年龄"
android:inputType="number" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="身高(cm):"
android:textSize="16sp" />
<EditText
android:id="@+id/et_height"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:hint="请输入身高"
android:inputType="number" />
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="爱好:"
android:textSize="16sp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal">
<CheckBox
android:id="@+id/cb_reading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="阅读" />
<CheckBox
android:id="@+id/cb_sport"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="运动"
android:layout_marginStart="16dp" />
<CheckBox
android:id="@+id/cb_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="游戏"
android:layout_marginStart="16dp" />
LinearLayout>
LinearLayout>
LinearLayout>
<Button
android:id="@+id/btn_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="添加用户"
android:textSize="18sp" />
最后一个按钮，现在我们所有的界面的部分就完成了。
因为要展示用户信息，我们直接整一个java类User，其中应该有name，age，height，那如何处理图片呢，添加一个id就可以了avatarResId，用来配对资源里面的图片。
package com.example.user;
import java.util.List;
public class User {
private String name; // 姓名
private int age; // 年龄
private int height; // 身高
private int avatarResId; // 头像资源ID
private String gender; // 性别
private List<String> hobbies; // 爱好列表
// 构造方法
public User(String name, int age, int height, int avatarResId, String gender, List<String> hobbies) {
this.name = name;
this.age = age;
this.height = height;
this.avatarResId = avatarResId;
this.gender = gender;
this.hobbies = hobbies;
}
// Getter方法
public String getName() {
return name;
}
public int getAge() {
return age;
}
public int getHeight() {
return height;
}
public int getAvatarResId() {
return avatarResId;
}
public String getGender() {
return gender;
}
public List<String> getHobbies() {
return hobbies;
}
// 将爱好列表转换为字符串（用于显示）
public String getHobbiesString() {
if (hobbies == null || hobbies.isEmpty()) {
return "无";
}
StringBuilder sb = new StringBuilder();
for (int i = 0; i < hobbies.size(); i++) {
sb.append(hobbies.get(i));
if (i < hobbies.size() - 1) {
sb.append("、");
}
}
return sb.toString();
}
}
给上一个构造方法就可以了。
再来写我们的活动UserActivity
// 控件引用
private ImageView ivAvatar;
private TextView tvUserInfo;
private Spinner spUser;
private EditText etName, etAge, etHeight;
private RadioGroup rgGender;
private CheckBox cbReading, cbSport, cbGame;
private Button btnAdd;
// 数据相关
private List<User> userList = new ArrayList<>();
private ArrayAdapter<String> adapter;
重写onCreate
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.user_layout);
// 初始化控件
initViews();
// 初始化默认用户
initDefaultUsers();
// 初始化下拉框适配器
initSpinnerAdapter();
// 设置事件监听
setListeners();
}
// 初始化控件引用
private void initViews() {
ivAvatar = findViewById(R.id.iv_avatar);
tvUserInfo = findViewById(R.id.tv_user_info);
spUser = findViewById(R.id.sp_user);
etName = findViewById(R.id.et_name);
etAge = findViewById(R.id.et_age);
etHeight = findViewById(R.id.et_height);
rgGender = findViewById(R.id.rg_gender);
cbReading = findViewById(R.id.cb_reading);
cbSport = findViewById(R.id.cb_sport);
cbGame = findViewById(R.id.cb_game);
btnAdd = findViewById(R.id.btn_add);
}
// 初始化默认用户
private void initDefaultUsers() {
// 默认用户1：男，爱好阅读、运动
List<String> hobbies1 = new ArrayList<>();
hobbies1.add("阅读");
hobbies1.add("运动");
userList.add(new User("张三", 25, 175, R.drawable.p1, "男", hobbies1));
// 默认用户2：女，爱好游戏
List<String> hobbies2 = new ArrayList<>();
hobbies2.add("游戏");
hobbies2.add("看动漫");
userList.add(new User("李四", 30, 168, R.drawable.p2, "女", hobbies2));
}
// 初始化下拉框适配器
private void initSpinnerAdapter() {
adapter = new ArrayAdapter<>(this,
android.R.layout.simple_spinner_item,
getUserNameList());
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spUser.setAdapter(adapter);
if (!userList.isEmpty()) {
showUserInfo(userList.get(0));
}
}
// 从用户列表中提取用户名
private List<String> getUserNameList() {
List<String> nameList = new ArrayList<>();
for (User user : userList) {
nameList.add(user.getName());
}
return nameList;
}
// 设置事件监听
private void setListeners() {
// 下拉框选择事件
spUser.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
showUserInfo(userList.get(position));
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// 未选择时不做处理
}
});
// 添加按钮点击事件
btnAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
addNewUser();
}
});
}
// 显示用户信息（包括性别和爱好）
private void showUserInfo(User user) {
ivAvatar.setImageResource(user.getAvatarResId());
tvUserInfo.setText("性别: " + user.getGender() +
"\n年龄: " + user.getAge() + "岁" +
"\n身高: " + user.getHeight() + "cm" +
"\n爱好: " + user.getHobbiesString());
}
下面讲一下控件的绑定和获取数据的方法
private void initViews() {
ivAvatar = findViewById(R.id.iv_avatar);
tvUserInfo = findViewById(R.id.tv_user_info);
spUser = findViewById(R.id.sp_user);
etName = findViewById(R.id.et_name);
etAge = findViewById(R.id.et_age);
etHeight = findViewById(R.id.et_height);
rgGender = findViewById(R.id.rg_gender);
cbReading = findViewById(R.id.cb_reading);
cbSport = findViewById(R.id.cb_sport);
cbGame = findViewById(R.id.cb_game);
btnAdd = findViewById(R.id.btn_add);
}
绑定：使用findViewById
从前端获取信息的方法：
1.editText
String name = etName.getText().toString().trim();
2.radioButton
String gender = rgGender.getCheckedRadioButtonId() == R.id.rb_male ? "男" : "女";
3.checkBox
List<String> hobbies = new ArrayList<>();
if (cbReading.isChecked()) hobbies.add("阅读");
if (cbSport.isChecked()) hobbies.add("运动");
if (cbGame.isChecked()) hobbies.add("游戏");
下面是添加新用户的完整逻辑
private void addNewUser() {
// 获取输入内容
String name = etName.getText().toString().trim();
String ageStr = etAge.getText().toString().trim();
String heightStr = etHeight.getText().toString().trim();
// 输入验证
if (name.isEmpty()) {
Toast.makeText(this, "请输入姓名", Toast.LENGTH_SHORT).show();
return;
}
if (ageStr.isEmpty()) {
Toast.makeText(this, "请输入年龄", Toast.LENGTH_SHORT).show();
return;
}
if (heightStr.isEmpty()) {
Toast.makeText(this, "请输入身高", Toast.LENGTH_SHORT).show();
return;
}
// 转换为整数
int age;
int height;
try {
age = Integer.parseInt(ageStr);
height = Integer.parseInt(heightStr);
} catch (NumberFormatException e) {
Toast.makeText(this, "年龄和身高必须是数字", Toast.LENGTH_SHORT).show();
return;
}
// 获取选择的性别
String gender = rgGender.getCheckedRadioButtonId() == R.id.rb_male ? "男" : "女";
// 获取选择的爱好
List<String> hobbies = new ArrayList<>();
if (cbReading.isChecked()) hobbies.add("阅读");
if (cbSport.isChecked()) hobbies.add("运动");
if (cbGame.isChecked()) hobbies.add("游戏");
// 分配头像
int avatarResId = getAvatarResId(userList.size());
// 创建新用户并添加到列表
User newUser = new User(name, age, height, avatarResId, gender, hobbies);
userList.add(newUser);
// 刷新下拉框
adapter.clear();
adapter.addAll(getUserNameList());
adapter.notifyDataSetChanged();
spUser.setSelection(userList.size() - 1);
// 清空输入框和选择状态
etName.setText("");
etAge.setText("");
etHeight.setText("");
rgGender.check(R.id.rb_male); // 重置为默认选择男
cbReading.setChecked(false);
cbSport.setChecked(false);
cbGame.setChecked(false);
// 提示添加成功
Toast.makeText(this, "用户添加成功", Toast.LENGTH_SHORT).show();
}
1.从前端获取内容
2.构建新User实例并添加到UserList
3.刷新下拉框
4.清空输入框和选择
5.显示添加成功
下面是完整代码
package com.example.user;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;
import com.example.user.R;
import java.util.ArrayList;
import java.util.List;
public class UserActivity extends AppCompatActivity {
// 控件引用
private ImageView ivAvatar;
private TextView tvUserInfo;
private Spinner spUser;
private EditText etName, etAge, etHeight;
private RadioGroup rgGender;
private CheckBox cbReading, cbSport, cbGame;
private Button btnAdd;
// 数据相关
private List<User> userList = new ArrayList<>();
private ArrayAdapter<String> adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.user_layout);
// 初始化控件
initViews();
// 初始化默认用户
initDefaultUsers();
// 初始化下拉框适配器
initSpinnerAdapter();
// 设置事件监听
setListeners();
}
// 初始化控件引用
private void initViews() {
ivAvatar = findViewById(R.id.iv_avatar);
tvUserInfo = findViewById(R.id.tv_user_info);
spUser = findViewById(R.id.sp_user);
etName = findViewById(R.id.et_name);
etAge = findViewById(R.id.et_age);
etHeight = findViewById(R.id.et_height);
rgGender = findViewById(R.id.rg_gender);
cbReading = findViewById(R.id.cb_reading);
cbSport = findViewById(R.id.cb_sport);
cbGame = findViewById(R.id.cb_game);
btnAdd = findViewById(R.id.btn_add);
}
// 初始化默认用户
private void initDefaultUsers() {
// 默认用户1：男，爱好阅读、运动
List<String> hobbies1 = new ArrayList<>();
hobbies1.add("阅读");
hobbies1.add("运动");
userList.add(new User("张三", 25, 175, R.drawable.p1, "男", hobbies1));
// 默认用户2：女，爱好游戏
List<String> hobbies2 = new ArrayList<>();
hobbies2.add("游戏");
hobbies2.add("看动漫");
userList.add(new User("李四", 30, 168, R.drawable.p2, "女", hobbies2));
}
// 初始化下拉框适配器
private void initSpinnerAdapter() {
adapter = new ArrayAdapter<>(this,
android.R.layout.simple_spinner_item,
getUserNameList());
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spUser.setAdapter(adapter);
if (!userList.isEmpty()) {
showUserInfo(userList.get(0));
}
}
// 从用户列表中提取用户名
private List<String> getUserNameList() {
List<String> nameList = new ArrayList<>();
for (User user : userList) {
nameList.add(user.getName());
}
return nameList;
}
// 设置事件监听
private void setListeners() {
// 下拉框选择事件
spUser.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
showUserInfo(userList.get(position));
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// 未选择时不做处理
}
});
// 添加按钮点击事件
btnAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
addNewUser();
}
});
}
// 显示用户信息（包括性别和爱好）
private void showUserInfo(User user) {
ivAvatar.setImageResource(user.getAvatarResId());
tvUserInfo.setText("性别: " + user.getGender() +
"\n年龄: " + user.getAge() + "岁" +
"\n身高: " + user.getHeight() + "cm" +
"\n爱好: " + user.getHobbiesString());
}
// 添加新用户
private void addNewUser() {
// 获取输入内容
String name = etName.getText().toString().trim();
String ageStr = etAge.getText().toString().trim();
String heightStr = etHeight.getText().toString().trim();
// 输入验证
if (name.isEmpty()) {
Toast.makeText(this, "请输入姓名", Toast.LENGTH_SHORT).show();
return;
}
if (ageStr.isEmpty()) {
Toast.makeText(this, "请输入年龄", Toast.LENGTH_SHORT).show();
return;
}
if (heightStr.isEmpty()) {
Toast.makeText(this, "请输入身高", Toast.LENGTH_SHORT).show();
return;
}
// 转换为整数
int age;
int height;
try {
age = Integer.parseInt(ageStr);
height = Integer.parseInt(heightStr);
} catch (NumberFormatException e) {
Toast.makeText(this, "年龄和身高必须是数字", Toast.LENGTH_SHORT).show();
return;
}
// 获取选择的性别
String gender = rgGender.getCheckedRadioButtonId() == R.id.rb_male ? "男" : "女";
// 获取选择的爱好
List<String> hobbies = new ArrayList<>();
if (cbReading.isChecked()) hobbies.add("阅读");
if (cbSport.isChecked()) hobbies.add("运动");
if (cbGame.isChecked()) hobbies.add("游戏");
// 分配头像
int avatarResId = getAvatarResId(userList.size());
// 创建新用户并添加到列表
User newUser = new User(name, age, height, avatarResId, gender, hobbies);
userList.add(newUser);
// 刷新下拉框
adapter.clear();
adapter.addAll(getUserNameList());
adapter.notifyDataSetChanged();
spUser.setSelection(userList.size() - 1);
// 清空输入框和选择状态
etName.setText("");
etAge.setText("");
etHeight.setText("");
rgGender.check(R.id.rb_male); // 重置为默认选择男
cbReading.setChecked(false);
cbSport.setChecked(false);
cbGame.setChecked(false);
// 提示添加成功
Toast.makeText(this, "用户添加成功", Toast.LENGTH_SHORT).show();
}
// 根据索引获取头像资源
private int getAvatarResId(int index) {
switch (index % 10) {
case 0: return R.drawable.p1;
case 1: return R.drawable.p2;
case 2: return R.drawable.p3;
case 3: return R.drawable.p4;
case 4: return R.drawable.p5;
case 5: return R.drawable.p6;
case 6: return R.drawable.p7;
case 7: return R.drawable.p8;
case 8: return R.drawable.p9;
case 9: return R.drawable.p10;
default: return R.drawable.p1;
}
}
}
效果图如下
