Android 实现WebView点击图片查看大图列表及图片保存功能

简介

在WebView中点击图片可以实现图片查看、图片保存等功能是非常常见且实用的功能，本文将详细介绍如何在Android中实现WebView点击图片查看大图列表及图片保存功能。

WebView中显示图片

在Android中使用WebView加载网页时，如果网页中有图片，则图片默认是不会展示出来的，需要通过设置WebViewClient的方法来实现，代码如下所示：

webView.setWebViewClient(new WebViewClient() {
    // 通过重写shouldOverrideUrlLoading方法来自定义图片展示
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url.endsWith(".jpg") || url.endsWith(".png") || url.endsWith(".jpeg")) {
            // 显示图片
            showImage(url);
            return true;
        }
        // 其他情况交给WebView处理
        view.loadUrl(url);
        return true;
    }
});

// 显示图片的方法
private void showImage(String url) {
    // 实现查看大图、保存图片等功能
    // ...
}

显示大图列表

在showImage方法中，我们可以通过自定义Dialog或PopupWindow等方式来显示大图列表，代码如下所示：

private void showImage(String url) {
    // 创建PopupWindow对象
    PopupWindow popupWindow = new PopupWindow(context);

    // 创建要显示的View
    View view = LayoutInflater.from(context).inflate(R.layout.popup_image_list, null);

    // 设置RecyclerView
    RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
    LinearLayoutManager layoutManager = new LinearLayoutManager(context);
    layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    recyclerView.setLayoutManager(layoutManager);
    ImageListAdapter adapter = new ImageListAdapter(imageUrls);
    recyclerView.setAdapter(adapter);

    // 设置PopupWindow参数
    popupWindow.setContentView(view);
    popupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
    popupWindow.setOutsideTouchable(true);
    popupWindow.setFocusable(true);
    popupWindow.showAtLocation(webView, Gravity.BOTTOM, 0, 0);
}

其中，popup_image_list.xml布局文件可以自定义，这里使用一个RecyclerView来展示大图列表，代码如下所示：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:overScrollMode="never"
    android:background="@android:color/transparent"/>

图片保存功能

在显示大图列表的PopupWindow中，我们可以为每一张图片添加一个保存图片的按钮，点击按钮即可实现图片保存功能，代码如下所示：

private void showImage(String url) {
    ...
    ImageListAdapter adapter = new ImageListAdapter(imageUrls);
    adapter.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            // 保存图片
            saveImage(imageUrls.get(position));
        }
    });
    recyclerView.setAdapter(adapter);
    ...
}

// 保存图片的方法
private void saveImage(String url) {
    Glide.with(context)
        .asBitmap()
        .load(url)
        .into(new SimpleTarget<Bitmap>() {
            @Override
            public void onResourceReady(Bitmap resource, Transition<? super Bitmap> transition) {
                // 获取存储路径
                File targetFile = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM).getAbsolutePath()
                    + File.separator
                    + "图片保存文件夹"
                    + File.separator
                    + System.currentTimeMillis()
                    + ".jpg");

                try {
                    // 创建文件夹
                    File dir = targetFile.getParentFile();
                    if(!dir.exists()) {
                        dir.mkdirs();
                    }
                    // 保存图片到本地
                    FileOutputStream fos = new FileOutputStream(targetFile);
                    resource.compress(Bitmap.CompressFormat.JPEG, 90, fos);
                    fos.flush();
                    fos.close();
                    // 通知相册更新
                    MediaScannerConnection.scanFile(context,
                        new String[]{ targetFile.getAbsolutePath() },
                        null,
                        new MediaScannerConnection.OnScanCompletedListener() {
                            @Override
                            public void onScanCompleted(String path, Uri uri) {
                                Toast.makeText(context, "图片已保存至相册", Toast.LENGTH_SHORT).show();
                            }
                        });
                } catch (Exception e) {
                    e.printStackTrace();
                    Toast.makeText(context, "图片保存失败", Toast.LENGTH_SHORT).show();
                }
            }
        });
}

在saveImage方法中，使用Glide库加载图片并将其转换为Bitmap格式，然后将其保存到指定目录下，同时通过MediaScannerConnection通知相册更新。

示例

下面是两个示例：

1. 在WebView中点击图片，显示大图列表及图片保存功能：

webView.loadUrl("http://www.example.com");

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url.endsWith(".jpg") || url.endsWith(".png") || url.endsWith(".jpeg")) {
            showImage(url);
            return true;
        }
        view.loadUrl(url);
        return true;
    }
});

1. 在RecyclerView或ListView中点击图片，显示大图列表及图片保存功能：

// 在Adapter中为ImageView设置监听器，然后调用showImage方法
image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        showImage(imageUrls);
    }
});

private void showImage(List<String> imageUrls) {
    // 创建PopupWindow对象
    PopupWindow popupWindow = new PopupWindow(context);

    // 创建要显示的View
    View view = LayoutInflater.from(context).inflate(R.layout.popup_image_list, null);

    // 设置RecyclerView
    RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
    LinearLayoutManager layoutManager = new LinearLayoutManager(context);
    layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    recyclerView.setLayoutManager(layoutManager);
    ImageListAdapter adapter = new ImageListAdapter(imageUrls);
    adapter.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            saveImage(imageUrls.get(position));
        }
    });
    recyclerView.setAdapter(adapter);

    // 设置PopupWindow参数
    popupWindow.setContentView(view);
    popupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
    popupWindow.setOutsideTouchable(true);
    popupWindow.setFocusable(true);
    popupWindow.showAtLocation(recyclerView, Gravity.BOTTOM, 0, 0);
}