Android 实现点击缩略图查看大图的功能

1 思路分析

在本次项目的开发过程中，想实现这样一个常见功能，即点击页面上的小图查看大图，点击大图则关闭的功能。

该需求的实现思路一般有两种：一种是直接跳转到一个新的 activity 显示大图，另一种则是在原 activity 直接显示大图。这里介绍一种使用安卓原生对话框（dialog）实现该功能的方法。

2 实现方法

2.1 dialog 基本使用

dialog 是 Android 中一个常用组件，可以用于弹出提示框、选择框等功能。一个含有确定、取消和提示信息的普通 AlertDialog 使用方法如下：

final AlertDialog.Builder normalDialog = new AlertDialog.Builder(MainActivity.this);normalDialog.setIcon(R.drawable.icon_dialog);normalDialog.setTitle("Title")normalDialog.setMessage("Test");normalDialog.setPositiveButton("确定", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {//...To-do}});normalDialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {//...To-do}});// 显示normalDialog.show();

2.2 使用 dialog 实现查看大图功能

由于我们想在原 activity 中实现查看大图功能，那么可不可以借助 dailog 实现呢？dialog 提供了这样一个方法setView()，可以使我们自定义 dialog 的 View。既然如此，我们就可以利用该方法很简单地实现一个含有ImageView的对话框用于显示图片。

2.2.1 样式文件

首先，在 Activity 的样式文件中添加一个 ImageView 用作缩略图显示。

<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right|bottom"android:layout_marginTop="23dp"android:orientation="horizontal"><ImageViewandroid:layout_width="44dp"android:layout_height="44dp"android:layout_marginLeft="10dp"android:src="@drawable/default" /></LinearLayout>

新建一个dialog_photo.xml文件，设置 dialog 的 View：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/large_image"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"/></LinearLayout>

2.2.2 实现逻辑

首先为 ImageView 设置点击事件使用dialog.setView(imgEntryView)设置 dialog 的 View使用 Glide 为 ImageView 加载图片

LayoutInflater inflater = LayoutInflater.from(context);View imgEntryView = inflater.inflate(R.layout.dialog_photo, null);// 加载自定义的布局文件final AlertDialog dialog = new AlertDialog.Builder(AssignmentDetailActivity.this).create();ImageView img = (ImageView) imgEntryView.findViewById(R.id.large_image);Glide.with(AssignmentDetailActivity.this).load(HttpClient.getPictureBaseUrl + url).into(img);dialog.setView(imgEntryView); // 自定义dialogdialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);dialog.show();

其中，如果仅作以上设置，那么会发现弹出的对话框有一个很难看的白色背景，因此需要使用setBackgroundDrawableResource()设置对话框背景为透明即可：

dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);

我们不仅要实现点击缩略图查看大图，还要实现点击大图关闭对话框。因此为对话框的 View 再次设置对话框关闭事件：

// 点击大图关闭dialogimgEntryView.setOnClickListener(new View.OnClickListener() {public void onClick(View paramView) {dialog.cancel();}});

2.3 效果