Android中使用WebView加载大图

最新推荐文章于 2024-03-28 10:55:25 发布

easion_zms

最新推荐文章于 2024-03-28 10:55:25 发布

阅读量3.4k

点赞数

分类专栏： Android 文章标签： android 图片 Webview

本文链接：https://blog.csdn.net/easion_zms/article/details/46878347

版权

Android 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

在Android系统中，加载图片是一个充满挑战的工作，特别是超出屏幕很大的图片，要考虑适应屏幕，滚动等问题。

而采用网页的方式可以很好的屏蔽这些问题，Webview+JS可以很好的控制屏幕的适配，也不会出现内存溢出的情况，来看看怎么实现的吧

package com.msn.support.gallery;

import android.annotation.TargetApi;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;

import com.msn.weiboclient.R;

import java.io.File;

/**
 * Created by Msn on 2015/7/13.
 */
public class LargePictureFragment extends Fragment{
    public static String ARG_URL = "URL";

    private String url;

    public LargePictureFragment(){

    }

    public static LargePictureFragment newInstance(String url){
        LargePictureFragment fragment = new LargePictureFragment();
        Bundle args = new Bundle();
        args.putString(ARG_URL,url);
        fragment.setArguments(args);
        return  fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if(getArguments() != null){
            url = getArguments().getString(ARG_URL);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.fragment_large_pic,container,false);
        final WebView imgWebview = (WebView) view.findViewById(R.id.img_webview);
        imgWebview.setBackgroundColor(getResources().getColor(R.color.transparent));
        imgWebview.setVisibility(View.INVISIBLE);
        //@TargetApi(11)
        imgWebview.setOverScrollMode(View.OVER_SCROLL_NEVER);


        imgWebview.getSettings().setJavaScriptEnabled(true);
        imgWebview.getSettings().setUseWideViewPort(true);
        imgWebview.getSettings().setLoadWithOverviewMode(true);
        imgWebview.getSettings().setBuiltInZoomControls(true);
        imgWebview.getSettings().setDisplayZoomControls(false);

        imgWebview.setVerticalScrollBarEnabled(false);
        imgWebview.setHorizontalScrollBarEnabled(false);
        imgWebview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        imgWebview.setOnTouchListener(new ImageWebViewOnTouch(imgWebview));


        showContent(ImageloaderUtils.getImageDiscCached(url), imgWebview);
        return view;
    }


    private void showContent(File file, WebView large) {
        String str1 = "file://" + file.getAbsolutePath()
                .replace("/mnt/sdcard/", "/sdcard/");
        String str2 =
                "<html>\n<head>\n     <style>\n          html,body{background:transparent;margin:0;padding:0;}          *{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}\n     </style>\n     <script type=\"text/javascript\">\n     var imgUrl = \""
                        + str1 + "\";" + "     var objImage = new Image();\n"
                        + "     var realWidth = 0;\n" + "     var realHeight = 0;\n" + "\n"
                        + "     function onLoad() {\n"
                        + "          objImage.onload = function() {\n"
                        + "               realWidth = objImage.width;\n"
                        + "               realHeight = objImage.height;\n" + "\n"
                        + "               document.gagImg.src = imgUrl;\n"
                        + "               onResize();\n" + "          }\n"
                        + "          objImage.src = imgUrl;\n" + "     }\n" + "\n"
                        + "     function onResize() {\n" + "          var scale = 1;\n"
                        + "          var newWidth = document.gagImg.width;\n"
                        + "          if (realWidth > newWidth) {\n"
                        + "               scale = realWidth / newWidth;\n"
                        + "          } else {\n"
                        + "               scale = newWidth / realWidth;\n" + "          }\n"
                        + "\n"
                        + "          hiddenHeight = Math.ceil(30 * scale);\n"
                        + "          document.getElementById('hiddenBar').style.height = hiddenHeight + \"px\";\n"
                        + "          document.getElementById('hiddenBar').style.marginTop = -hiddenHeight + \"px\";\n"
                        + "     }\n" + "     </script>\n" + "</head>\n"
                        + "<body οnlοad=\"onLoad()\" οnresize=\"onResize()\" οnclick=\"Android.toggleOverlayDisplay();\">\n"
                        + "     <table style=\"width: 100%;height:100%;\">\n"
                        + "          <tr style=\"width: 100%;\">\n"
                        + "               <td valign=\"middle\" align=\"center\" style=\"width: 100%;\">\n"
                        + "                    <div style=\"display:block\">\n"
                        + "                         <img name=\"gagImg\" src=\"\" width=\"100%\" style=\"\" />\n"
                        + "                    </div>\n"
                        + "                    <div id=\"hiddenBar\" style=\"position:absolute; width: 100%; background: transparent;\"></div>\n"
                        + "               </td>\n" + "          </tr>\n" + "     </table>\n"
                        + "</body>\n" + "</html>";
        large.loadDataWithBaseURL("file:///android_asset/", str2, "text/html", "utf-8",
                null);
        large.setVisibility(View.VISIBLE);
    }


    public class ImageWebViewOnTouch implements View.OnTouchListener{
        GestureDetector gestureDetector;

        public ImageWebViewOnTouch(View view){
            gestureDetector = new GestureDetector(view.getContext(),
                    new GestureDetector.SimpleOnGestureListener(){
                        @Override
                        public boolean onSingleTapUp(MotionEvent e) {
                            getActivity().onBackPressed();
                            return true;
                        }
                    });
        }

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            gestureDetector.onTouchEvent(event);
            return false;
        }
    }
}