웹 뷰 에서 어떻게 그림 을 적응 시 킵 니까?

6474 단어 android
웹 뷰 에서 그림 에 적응 하려 면 웹 페이지 에 있 는 css 스타일 을 조정 해 야 합 니 다.한 가지 방법 은 웹 페이지 를 불 러 온 후 onPageFinish 에서 js 호출 로 그림 스타일 을 조정 하 는 것 입 니 다. 이 방법 은 웹 페이지 에 불 러 온 다음 에 그림 스타일 을 조정 하여 2 차 렌 더 링 을 하 는 것 이기 때문에 짧 은 시간 이 지연 되 어 뚜렷 한 페이지 반 짝 임 변 화 를 볼 수 있 습 니 다.또 다른 방법 은 웹 페이지 를 불 러 오기 전에 웹 페이지 의 이미지 스타일 을 수정 하고 조정 한 다음 에 loadDataWith BaseURL 로 웹 페이지 를 불 러 오 는 것 입 니 다. 이 방법 은 두 번 의 렌 더 링 으로 인 한 페이지 반 짝 임 이 없 을 것 입 니 다.
다음은 두 번 째 방법 으로 그림 을 처리 하 는 방안 이다.그림 의 방향 을 조정 하 는 것 은 그림 의 크기 가 화면 크기 를 초과 하면 화면 너비 에 따라 적당 하고 초과 하지 않 으 면 원래 의 그림 에 따라 표시 하 는 것 이다.그림 스타일 을 수정 하려 면 jsoup 으로 그림 요소 정 보 를 얻 고 수정 해 야 합 니 다.
 처리 방법 은 다음 과 같다.
               
//                    
    public BitmapFactory.Options getImageInfo(String imgPath) {
		BitmapFactory.Options options = new BitmapFactory.Options();
		options.inJustDecodeBounds = true;
		Bitmap bmp = BitmapFactory.decodeFile(imgPath, options);	
		return options;
	}
	
	//          
	public String resetImageSize(String htmlContent, Context context) {
		
		Document doc = Jsoup.parse(htmlContent);
		Elements imgs = doc.getElementsByTag("img");
		if (imgs.size() != 0) {
		    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
		    int width = wm.getDefaultDisplay().getWidth();
		    int height = wm.getDefaultDisplay().getHeight();
		    float density = context.getApplicationContext().getResources().getDisplayMetrics().density;
		       
		    String baseImagePath = "/mnt/sdcard/test/image/";		       
		    for (Element img : imgs) {
                String src = baseImagePath+img.attr("src");//   img  src  
		        
                BitmapFactory.Options option = getImageInfo(src);
		        
                String widthStyle = "100%";
		        if (option.outWidth*density < width) {
		            widthStyle = "auto";     
		        }
		        
		        img.attr("width", widthStyle);
		    }
		}
		
        return doc.toString();
		
	}
	

이상 의 방법 은 웹 페이지 의 그림 이 로 컬 에 저 장 된 상황 을 처리 하 는 것 이다. 최근 웹 페이지 가 인터넷 에서 직접 그림 을 가 져 오고 그림 에 적응 해 야 하 는 상황 을 만 났 다.
다음 과 같은 방법 으로 처리 하기 시 작 했 습 니 다. 주로 img 태그 의 width 속성 을 가 져 와 서 적합 합 니 다.
public static String resetImageSize(Context context, String htmlContent) {
    WindowManager wm = (WindowManager) context
                        .getSystemService(Context.WINDOW_SERVICE);
                @SuppressWarnings("deprecation")
                int width = wm.getDefaultDisplay().getWidth();
                @SuppressWarnings("deprecation")
                int height = wm.getDefaultDisplay().getHeight();
                float density = context.getApplicationContext()
                        .getResources().getDisplayMetrics().density;
    Document doc = Jsoup.parse(htmlContent); 
    Elements imgs = doc.getElementsByTag("img"); 
    if (imgs != null && imgs.size() > 0) { 
	    for (Element img : imgs) { 
		    String src = img.attr("src");//   img  src   
		    String imageWidth = img.attr("width");//   img  width
		    String imageHeight = img.attr("height");//   img  height
		    if (StringUtil.isEmpty(imageWidth) || imageWidth.contains("%")){ 
			    continue; 
		    }
			
		    String widthStyle = "100%"; 
		    try{ 
			    float imageWidthFloat = Float.parseFloat(imageWidth); 
			    if (imageWidthFloat*density < width) { 
				    widthStyle = "auto"; 
			    } 
			    img.attr("width", widthStyle); 
			    //          
			    if (imageWidthFloat*density > width) { 
				    float imageHeightFloat = Float.parseFloat(imageHeight); 
				    if (imageHeightFloat > 0){ 
					    float newImageHeight = width/density * imageHeightFloat/imageWidthFloat; 
					    img.attr("height", newImageHeight+""); 
				    } 
			    } 
		    }catch(Exception e){ 
		    } 
	    } 
    }
    return doc.toString(); 
}

img width height , img width height 。 。 webview userWideViewPort setInitialScale , , , 。

   
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
//      
webview.setInitialScale(200);

마지막 으로 웹 뷰 에 불 러 온 후 js 를 통 해 그림 을 적합 하 게 처리 하 는 방법 을 사용 하여 적합 한 효과 가 좋 습 니 다.
public class MyWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageFinished(view, url);        
        resetImagSize(view);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view,url);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        view.getSettings().setJavaScriptEnabled(true);
        super.onPageStarted(view, url, favicon);
    }
    
    //  1:               100%  
    private void resetImagSize(WebView webView) {
        webView.loadUrl("javascript:(function(){"
                +"var objs = document.getElementsByTagName(\"img\"); "
                +"for(var i=0;iwindow.screen.width){ objs[i].style.width = '100%';objs[i].style.height = 'auto';}"
                +"}"
                +"})()");
    }

    //  2:         100%,      1      ,    1   
    private void resetImagSize(WebView webView) {
        webView.loadUrl("javascript:(function(){"
                +"var objs = document.getElementsByTagName(\"img\"); "
                +"for(var i=0;i
//      
webView.setWebViewClient(new MyWebViewClient());
webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);

    

좋은 웹페이지 즐겨찾기