📝 《第三章：Android 常见界面控件》 ------------关联知识学习，效果会更好
复制代码
# 📘 第三章：Android 常见界面控件
Android 应用的界面由各种控件（View）组成。掌握常见控件的使用，是编写交互界面的核心。
---
## 一、简单控件的使用
常见基础控件包括：
| 控件名 | 功能 |
|---------|------|
| `TextView` | 显示文本内容 |
| `EditText` | 输入文本内容 |
| `Button` | 按钮点击交互 |
| `ImageView` | 显示图片 |
| `RadioButton` | 单选按钮 |
| `CheckBox` | 复选框 |
| `Toast` | 弹出提示信息 |
---
### 1️⃣ TextView ------ 文本显示控件
**常用属性：**
```xml
android:text="显示文字"
android:textSize="18sp"
android:textColor="#333333"
android:gravity="center"
示例：
复制代码
android:id="@+id/tv_hello" android:text="欢迎使用Android！" android:textSize="20sp" android:textColor="@color/black" android:layout_width="wrap_content" android:layout_height="wrap_content"/> Java 调用： 复制代码 TextView tv = findViewById(R.id.tv_hello); tv.setText("你好，Android！"); 2️⃣ EditText ------ 输入框控件 常用属性： 复制代码 android:hint="请输入用户名" android:inputType="textPassword" 示例： 复制代码 android:id="@+id/et_name" android:hint="请输入用户名" android:layout_width="match_parent" android:layout_height="wrap_content"/> Java 获取输入内容： 复制代码 EditText et = findViewById(R.id.et_name); String name = et.getText().toString(); 3️⃣ Button ------ 按钮控件 XML 示例： 复制代码 android:id="@+id/btn_login" android:text="登录" android:layout_width="wrap_content" android:layout_height="wrap_content"/> Java 响应点击事件： 复制代码 Button btn = findViewById(R.id.btn_login); btn.setOnClickListener(v -> Toast.makeText(this, "登录成功", Toast.LENGTH_SHORT).show() ); 4️⃣ ImageView ------ 图片控件 常用属性： 复制代码 android:src="@drawable/logo" android:scaleType="centerCrop" 示例： 复制代码 android:id="@+id/img_logo" android:src="@drawable/logo" android:layout_width="100dp" android:layout_height="100dp"/> Java 设置图片： 复制代码 ImageView img = findViewById(R.id.img_logo); img.setImageResource(R.drawable.new_logo); 5️⃣ RadioButton ------ 单选按钮（配合 RadioGroup） XML 示例： 复制代码 android:id="@+id/rg_gender" android:orientation="horizontal"> android:id="@+id/rb_male" android:text="男"/> android:id="@+id/rb_female" android:text="女"/> Java 判断选中项： 复制代码 RadioGroup rg = findViewById(R.id.rg_gender); int id = rg.getCheckedRadioButtonId(); RadioButton rb = findViewById(id); Toast.makeText(this, "选择：" + rb.getText(), Toast.LENGTH_SHORT).show(); 6️⃣ CheckBox ------ 多选按钮 XML 示例： 复制代码 Java 获取状态： 复制代码 CheckBox cbMusic = findViewById(R.id.cb_music); if (cbMusic.isChecked()) { Toast.makeText(this, "喜欢音乐", Toast.LENGTH_SHORT).show(); } 7️⃣ Toast ------ 弹出提示信息 用法： 复制代码 Toast.makeText(this, "注册成功！", Toast.LENGTH_SHORT).show(); 二、列表控件 ListView 1️⃣ 概念 ListView 用于显示 可滚动的多项数据列表。 2️⃣ 使用步骤 (1) 布局： 复制代码 android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"/> (2) 数据源： 复制代码 String[] products = {"牛奶", "面包", "苹果", "洗发水"}; (3) 创建适配器： 复制代码 ArrayAdapter new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, products); (4) 绑定： 复制代码 ListView listView = findViewById(R.id.list_view); listView.setAdapter(adapter); (5) 点击事件： 复制代码 listView.setOnItemClickListener((parent, view, position, id) -> { String item = products[position]; Toast.makeText(this, "点击了：" + item, Toast.LENGTH_SHORT).show(); }); 3️⃣ 常用 Adapter 类型 适配器类型 说明 ArrayAdapter 绑定字符串数组 SimpleAdapter 绑定键值对数据（图片+文字） BaseAdapter 自定义复杂列表项 RecyclerView.Adapter 高性能列表适配器 三、实战演练：超市界面（ListView + SimpleAdapter） 目标： 显示超市商品列表（图标 + 名称 + 价格）。 (1) 主布局 activity_main.xml 复制代码 android:id="@+id/lv_goods" android:layout_width="match_parent" android:layout_height="match_parent"/> (2) 单项布局 item_goods.xml 复制代码 android:id="@+id/img_icon" android:layout_width="60dp" android:layout_height="60dp"/> (3) Java 代码： 复制代码 List int[] imgs = {R.drawable.milk, R.drawable.bread, R.drawable.apple}; String[] names = {"牛奶", "面包", "苹果"}; String[] prices = {"￥6.5", "￥4.0", "￥3.0"}; for(int i=0;i Map map.put("img", imgs[i]); map.put("name", names[i]); map.put("price", prices[i]); data.add(map); } SimpleAdapter adapter = new SimpleAdapter( this, data, R.layout.item_goods, new String[]{"img","name","price"}, new int[]{R.id.img_icon,R.id.tv_name,R.id.tv_price} ); ListView lv = findViewById(R.id.lv_goods); lv.setAdapter(adapter); ✅ 运行效果：超市商品图 + 名称 + 价格 列表展示。 四、RecyclerView 控件的使用 1️⃣ 简介 RecyclerView 是 ListView 的升级版，性能更好、支持多种布局样式（列表、网格、瀑布流）。 2️⃣ 使用步骤 (1) 添加依赖： 复制代码 implementation "androidx.recyclerview:recyclerview:1.3.2" (2) 布局： 复制代码 android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent"/> (3) 单项布局 item_photo.xml 复制代码 android:id="@+id/img_photo" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop"/> (4) 适配器类： 复制代码 public class PhotoAdapter extends RecyclerView.Adapter private List public PhotoAdapter(List static class ViewHolder extends RecyclerView.ViewHolder { ImageView imgPhoto; ViewHolder(View view){ super(view); imgPhoto = view.findViewById(R.id.img_photo); } } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_photo, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.imgPhoto.setImageResource(photos.get(position)); } @Override public int getItemCount() { return photos.size(); } } (5) MainActivity 设置： 复制代码 RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); // 2列网格 List PhotoAdapter adapter = new PhotoAdapter(photoList); recyclerView.setAdapter(adapter); ✅ 效果：一个精美的相册网格界面。 五、实战演练：相册界面（RecyclerView + GridLayout） 功能： 显示多张图片 点击图片弹出提示或打开大图 扩展思路： 使用 Glide 加载网络图片 使用 Intent 打开全屏大图 添加动画与圆角图片样式 ✅ 本章小结 控件 功能 示例 TextView 显示文字 欢迎界面 EditText 输入内容 登录输入框 Button 点击交互 提交按钮 ImageView 图片展示 商品图标 RadioButton 单选项 性别选择 CheckBox 多选项 爱好选择 Toast 提示消息 提交成功提示 ListView 简单列表 超市商品 RecyclerView 高性能列表 相册网格 💡 学习建议： 尝试结合 ConstraintLayout 做更美观的布局。 在控件中添加点击事件、动态更新内容。 后续章节将学习如何整合数据库与界面交互。