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

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

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

第三章 Android常见界面控件

2️⃣ EditText ------ 输入框控件

3️⃣ Button ------ 按钮控件

4️⃣ ImageView ------ 图片控件

5️⃣ RadioButton ------ 单选按钮（配合 RadioGroup）

6️⃣ CheckBox ------ 多选按钮

7️⃣ Toast ------ 弹出提示信息

二、列表控件 ListView

1️⃣ 概念

2️⃣ 使用步骤

(1) 布局：

(2) 数据源：

(3) 创建适配器：

(4) 绑定：

(5) 点击事件：

3️⃣ 常用 Adapter 类型

三、实战演练：超市界面（ListView + SimpleAdapter）

(1) 主布局 activity_main.xml

(2) 单项布局 item_goods.xml

(3) Java 代码：

四、RecyclerView 控件的使用

1️⃣ 简介

2️⃣ 使用步骤

(1) 添加依赖：

(2) 布局：

(3) 单项布局 item_photo.xml

(4) 适配器类：

(5) MainActivity 设置：

五、实战演练：相册界面（RecyclerView + GridLayout）

✅ 本章小结

(1) 主布局 `activity_main.xml`

(2) 单项布局 `item_goods.xml`

(3) 单项布局 `item_photo.xml`