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

匹马夕阳

1102人浏览 · 2025-06-08 19:19:21

匹马夕阳 · 2025-06-08 19:19:21 发布

总结步骤：

创建数据模型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
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_image, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ImageItem item = items.get(position);
        holder.bind(item);
    }

    @Override
    public 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
    @Override
    public 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;

    @Override
    protected 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.RecyclerView
        android: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">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="centerCrop"/>

    <TextView
        android: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">

    <ImageView
        android:id="@+id/detail_image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="centerInside"/>

    <TextView
        android:id="@+id/detail_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_marginTop="16dp"/>

    <Button
        android: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'
}