当前位置：首页 > news >正文

Android 应用开发入门案例：使用 Fragment 实现水果详情展示

news 来源：原创 2025/5/11 6:25:55

在本教程中，我们将使用 Android 中的 Fragment 技术，实现一个简单的“水果信息展示”应用。

左边是水果按钮列表，右边是对应水果的图文详情页面，点击任意按钮即可切换展示内容。

🌟 准备工作(一定要看！！！)

1. 创建2个变量(leftFragment，rightFragment);找到变量

2. 创建一个接口 IChangeFruitListener

3. 在MainActivity.java里面implements(实现)接口；实现接口方法

4. IChangeFruitListener 接口设置rightFragment的ChangFruit方法

✨ 功能简介

使用 Fragment 实现界面左右布局。
左侧是按钮列表：草莓、葡萄、西瓜、西红柿。
右侧展示点击水果对应的图片和详细介绍。
练习了 Activity、Fragment 之间的通信，以及 setOnClickListener 的使用。

📁 项目结构和源码（可直接复制使用）

✅ Java 代码部分

1. MainActivity.java（语言：Java）

// 文件名：MainActivity.java
package com.example.fragment003;import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;public class MainActivity extends AppCompatActivity implements IChangeFruitListener {private Left_Fragment leftFragment;private Right_Fragment rightFragment;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);leftFragment = (Left_Fragment) getSupportFragmentManager().findFragmentById(R.id.left_fragment);rightFragment = (Right_Fragment) getSupportFragmentManager().findFragmentById(R.id.right_fragment);leftFragment.setListener(this);}@Overridepublic void ChangeFruit(int i) {rightFragment.ChangeFruit(i);}
}

2. Left_Fragment.java（语言：Java）

// 文件名：Left_Fragment.java
package com.example.fragment003;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;public class Left_Fragment extends Fragment {private Button btn_1, btn_2, btn_3, btn_4;private IChangeFruitListener listener;@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.left_fragment, container, false);btn_1 = view.findViewById(R.id.btn_1);btn_2 = view.findViewById(R.id.btn_2);btn_3 = view.findViewById(R.id.btn_3);btn_4 = view.findViewById(R.id.btn_4);btn_1.setOnClickListener(v -> listener.ChangeFruit(1));btn_2.setOnClickListener(v -> listener.ChangeFruit(2));btn_3.setOnClickListener(v -> listener.ChangeFruit(3));btn_4.setOnClickListener(v -> listener.ChangeFruit(4));return view;}public void setListener(IChangeFruitListener listener) {this.listener = listener;}
}

3. Right_Fragment.java（语言：Java）

// 文件名：Right_Fragment.java
package com.example.fragment003;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;public class Right_Fragment extends Fragment {private ImageView imageView;private TextView textView;@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.right_fragment, container, false);imageView = view.findViewById(R.id.img);textView = view.findViewById(R.id.txt);return view;}public void ChangeFruit(int i) {switch (i) {case 1:imageView.setImageResource(R.drawable.cm);textView.setText("草莓的详细介绍...");break;case 2:imageView.setImageResource(R.drawable.pt);textView.setText("葡萄的详细介绍...");break;case 3:imageView.setImageResource(R.drawable.xg);textView.setText("西瓜的详细介绍...");break;case 4:imageView.setImageResource(R.drawable.xhs);textView.setText("西红柿的详细介绍...");break;}}
}

4. IChangeFruitListener.java（语言：Java）

// 文件名：IChangeFruitListener.java
package com.example.fragment003;public interface IChangeFruitListener {void ChangeFruit(int i);
}

✅ 布局 XML 文件

1. activity_main.xml（语言：XML）

<!-- 文件名：res/layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><fragmentandroid:id="@+id/left_fragment"android:name="com.example.fragment003.Left_Fragment"android:layout_width="150dp"android:layout_height="match_parent" /><fragmentandroid:id="@+id/right_fragment"android:name="com.example.fragment003.Right_Fragment"android:layout_width="match_parent"android:layout_height="match_parent" />
</LinearLayout>

2. left_fragment.xml（语言：XML）

<!-- 文件名：res/layout/left_fragment.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#8BC34A"android:padding="10dp"><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="水果列表"/><Button android:id="@+id/btn_1"android:text="草莓"android:layout_width="wrap_content"android:layout_height="wrap_content" /><Button android:id="@+id/btn_2"android:text="葡萄"android:layout_width="wrap_content"android:layout_height="wrap_content" /><Button android:id="@+id/btn_3"android:text="西瓜"android:layout_width="wrap_content"android:layout_height="wrap_content" /><Button android:id="@+id/btn_4"android:text="西红柿"android:layout_width="wrap_content"android:layout_height="wrap_content" />
</LinearLayout>

3. right_fragment.xml（语言：XML）

<!-- 文件名：res/layout/right_fragment.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/img"android:layout_width="match_parent"android:layout_height="300dp"android:scaleType="fitXY"android:src="@drawable/cm" /><TextViewandroid:id="@+id/txt"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="水果详细介绍..." />
</LinearLayout>

🖼️ 程序运行效果

左侧水果按钮	右侧显示内容
点击“草莓”	显示草莓图片和详细营养说明
点击“葡萄”	显示葡萄图片和功效介绍
点击“西瓜”	展示西瓜图片和解暑作用
点击“西红柿”	展示西红柿图文及番茄红素抗氧化说明

运行后页面被分为左右两栏，左栏点击按钮会改变右栏显示内容。非常适合新手学习 Fragment 组件的基本使用方法。