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

（三十四）Android图片列表与点击弹窗展示大图完整教程

news 2025/8/18 3:09:47

总结步骤：

创建数据模型ImageItem。
准备数据源（硬编码列表）。
创建RecyclerView适配器。
在MainActivity中设置RecyclerView。
实现点击事件，打开弹窗。
创建弹窗的DialogFragment。
使用Glide加载图片。
测试和调试。

以下是完整实现方案：

Android图片列表与弹窗展示完整教程

一、项目结构规划

com.example.testapp
├── model
│   └── ImageItem.java // 数据模型
├── adapter
│   └── ImageAdapter.java // 列表适配器
├── dialog
│   └── ImageDetailDialog.java // 弹窗组件
├── MainActivity.java // 主界面
└── res├── layout│   ├── activity_main.xml // 主界面布局│   ├── item_image.xml // 列表项布局 │   └── dialog_image_detail.xml // 弹窗布局└── values└── strings.xml // 资源字符串

二、核心实现代码

1. 数据模型 (ImageItem.java)

public class ImageItem {private String imageUrl;private String title;public ImageItem(String imageUrl, String title) {this.imageUrl = imageUrl;this.title = title;}// Getters and setters
}

2. 图片适配器 (ImageAdapter.java)

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {private List<ImageItem> items;private Context context;public ImageAdapter(Context context, List<ImageItem> items) {this.context = context;this.items = items;}@NonNull@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(context).inflate(R.layout.item_image, parent, false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull ViewHolder holder, int position) {ImageItem item = items.get(position);holder.bind(item);}@Overridepublic int getItemCount() {return items.size();}class ViewHolder extends RecyclerView.ViewHolder {private ImageView imageView;private TextView textView;public ViewHolder(@NonNull View itemView) {super(itemView);imageView = itemView.findViewById(R.id.image_view);textView = itemView.findViewById(R.id.text_view);}public void bind(ImageItem item) {Glide.with(context).load(item.getImageUrl()).into(imageView);textView.setText(item.getTitle());itemView.setOnClickListener(v -> {ImageDetailDialog dialog = new ImageDetailDialog(context, item);dialog.show(((AppCompatActivity) context).getSupportFragmentManager(), "ImageDetailDialog");});}}
}

3. 弹窗组件 (ImageDetailDialog.java)

public class ImageDetailDialog extends DialogFragment {private ImageItem item;private Context context;public ImageDetailDialog(Context context, ImageItem item) {this.context = context;this.item = item;}@NonNull@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {LayoutInflater inflater = requireActivity().getLayoutInflater();View view = inflater.inflate(R.layout.dialog_image_detail, null);ImageView imageView = view.findViewById(R.id.detail_image);TextView textView = view.findViewById(R.id.detail_text);Button closeButton = view.findViewById(R.id.btn_close);Glide.with(context).load(item.getImageUrl()).into(imageView);textView.setText(item.getTitle());closeButton.setOnClickListener(v -> dismiss());return new AlertDialog.Builder(getActivity()).setView(view).create();}
}

4. 主界面 (MainActivity.java)

public class MainActivity extends AppCompatActivity {private RecyclerView recyclerView;private List<ImageItem> imageDataList;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);recyclerView = findViewById(R.id.recycler_view);recyclerView.setLayoutManager(new GridLayoutManager(this, 2));// 初始化测试数据imageDataList = new ArrayList<>();imageDataList.add(new ImageItem("https://example.com/image1.jpg", "风景1"));imageDataList.add(new ImageItem("https://example.com/image2.jpg", "人物1"));ImageAdapter adapter = new ImageAdapter(this, imageDataList);recyclerView.setAdapter(adapter);}
}

三、布局文件

1. 主界面布局 (activity_main.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="8dp"/>
</LinearLayout>

2. 列表项布局 (item_image.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="8dp"><ImageViewandroid:id="@+id/image_view"android:layout_width="150dp"android:layout_height="150dp"android:scaleType="centerCrop"/><TextViewandroid:id="@+id/text_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textAlignment="center"/>
</LinearLayout>

3. 弹窗布局 (dialog_image_detail.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="16dp"><ImageViewandroid:id="@+id/detail_image"android:layout_width="match_parent"android:layout_height="300dp"android:scaleType="centerInside"/><TextViewandroid:id="@+id/detail_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="18sp"android:layout_marginTop="16dp"/><Buttonandroid:id="@+id/btn_close"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="关闭"android:layout_marginTop="16dp"/>
</LinearLayout>

四、依赖配置 (build.gradle)

dependencies {implementation 'com.github.bumptech.glide:glide:4.12.0'annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'implementation 'androidx.recyclerview:recyclerview:1.2.1'implementation 'androidx.gridlayout:gridlayout:1.0.0'
}