[Android开发] 实现点击缩略图查看大图的功能

[Android开发] 实现点击缩略图查看大图的功能

实现点击缩略图查看大图的功能1 思路分析

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

实现这一需求一般有两种方式：一是直接跳转到新的显示大图，二是直接显示原来的大图。 下面介绍一种利用原生的()来实现该功能的方法。

2 实现方法 2.1 基本使用

是中常用的组件，可用于弹出提示框、选择框等功能。 OK、、消息的常见使用方法如下：

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() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        //...To-do
    }
});
normalDialog.setNegativeButton("取消", 
    new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        //...To-do
    }
});
// 显示
normalDialog.show();

2.2 用于实现查看大图的功能

既然我们要实现原件中查看大图的功能，那么可以用它来实现吗？ 提供了这样一个方法()，可以让我们自定义View。 既然如此，我们就可以利用该方法轻松实现一个包含图片的对话框，用于显示图片。

2.2.1 样式文件

首先，在样式表中添加缩略图显示的样式表。

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

创建一个新的 .xml 文件并设置视图：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <ImageView
    android: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 实现逻辑

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); // 自定义dialog
dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
dialog.show();

其中，如果只进行上述设置，你会发现弹出的对话框有难看的白色背景，所以需要使用()将对话框的背景设置为透明：

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

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

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

2.3 效果