第三章 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"

示例：

<TextView
    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"   <!-- 限制输入类型 -->

示例：

<EditText
    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 示例：

<Button
    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"

示例：

<ImageView
    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 示例：

<RadioGroup
    android:id="@+id/rg_gender"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/rb_male"
        android:text="男"/>
    <RadioButton
        android: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) 布局：

<ListView
    android: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

<ListView
    android:id="@+id/lv_goods"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

(2) 单项布局 item_goods.xml

<LinearLayout android:orientation="horizontal">
    <ImageView
        android: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.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

(3) 单项布局 item_photo.xml

<ImageView
    android: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); }
    }

    @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<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 做更美观的布局。

• 在控件中添加点击事件、动态更新内容。

• 后续章节将学习如何整合数据库与界面交互。