第三章 Android常见界面控件
📝 《第三章：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"
示例：
<TextViewandroid: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" <!-- 限制输入类型 -->
示例：
<EditTextandroid: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 示例：
<Buttonandroid: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"
示例：
<ImageViewandroid: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 示例：
<RadioGroupandroid:id="@+id/rg_gender"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_male"android:text="男"/><RadioButtonandroid:id="@+id/rb_female"android:text="女"/>
</RadioGroup>
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 示例：
<CheckBox android:id="@+id/cb_music" android:text="音乐"/>
<CheckBox android:id="@+id/cb_sport" android:text="运动"/>
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) 布局：
<ListViewandroid:id="@+id/list_view"android:layout_width="match_parent"android:layout_height="match_parent"/>
(2) 数据源：
String[] products = {"牛奶", "面包", "苹果", "洗发水"};
(3) 创建适配器：
ArrayAdapter<String> adapter =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
<ListViewandroid:id="@+id/lv_goods"android:layout_width="match_parent"android:layout_height="match_parent"/>
(2) 单项布局 item_goods.xml
<LinearLayout android:orientation="horizontal"><ImageViewandroid:id="@+id/img_icon"android:layout_width="60dp"android:layout_height="60dp"/><LinearLayout android:orientation="vertical"><TextView android:id="@+id/tv_name" android:text="商品名"/><TextView android:id="@+id/tv_price" android:text="价格"/></LinearLayout>
</LinearLayout>
(3) Java 代码：
List<Map<String,Object>> data = new ArrayList<>();
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<names.length;i++){Map<String,Object> map = new HashMap<>();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) 布局：
<androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"/>
(3) 单项布局 item_photo.xml
<ImageViewandroid:id="@+id/img_photo"android:layout_width="match_parent"android:layout_height="200dp"android:scaleType="centerCrop"/>
(4) 适配器类：
public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {private List<Integer> photos;public PhotoAdapter(List<Integer> photos){ this.photos = photos; }static class ViewHolder extends RecyclerView.ViewHolder {ImageView imgPhoto;ViewHolder(View view){ super(view); imgPhoto = view.findViewById(R.id.img_photo); }}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_photo, parent, false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {holder.imgPhoto.setImageResource(photos.get(position));}@Overridepublic int getItemCount() { return photos.size(); }
}
(5) MainActivity 设置：
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); // 2列网格List<Integer> photoList = Arrays.asList(R.drawable.pic1, R.drawable.pic2, R.drawable.pic3);
PhotoAdapter adapter = new PhotoAdapter(photoList);
recyclerView.setAdapter(adapter);
✅ 效果：一个精美的相册网格界面。
五、实战演练：相册界面（RecyclerView + GridLayout）
功能：
显示多张图片
点击图片弹出提示或打开大图
扩展思路：
使用 Glide 加载网络图片
使用 Intent 打开全屏大图
添加动画与圆角图片样式
✅ 本章小结
| 控件 | 功能 | 示例 |
|---|---|---|
| TextView | 显示文字 | 欢迎界面 |
| EditText | 输入内容 | 登录输入框 |
| Button | 点击交互 | 提交按钮 |
| ImageView | 图片展示 | 商品图标 |
| RadioButton | 单选项 | 性别选择 |
| CheckBox | 多选项 | 爱好选择 |
| Toast | 提示消息 | 提交成功提示 |
| ListView | 简单列表 | 超市商品 |
| RecyclerView | 高性能列表 | 相册网格 |
💡 学习建议：
尝试结合
ConstraintLayout做更美观的布局。在控件中添加点击事件、动态更新内容。
后续章节将学习如何整合数据库与界面交互。