Android WebView中顯示一張或多張圖片

時間 2019-12-11

原文原文鏈接

最近須要在平板中顯示多張圖片，調查了下，決定用WebView(說實話，我還不清楚有沒有其餘android控件可以顯示多張圖片的。。。。。), 主要是用HTML的img來顯示多張圖片。html

google百度一通後，實現了多張圖片的顯示，出來的效果還錯。android

仍是本身總結一下，看別人東一點，西一點的博客仍是比較費解（有時候我真的是很反感看這些博客，東抄一點，西抄一點，到最後也沒說問題怎麼解決的。。。。。）。web

首先，在android xml增長WebView控件，以下：ide

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />
    <ImageButton
        android:id="@+id/btn_close"
        android:layout_width="@dimen/dip30"
        android:layout_height="@dimen/dip30"
        android:layout_gravity="top|right"
        android:layout_marginRight="@dimen/dip5"
        android:background="@drawable/close" />
</FrameLayout>

很簡單，增長了WebView，關閉按鈕，接下來就是在代碼中調用了，以下：函數

private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.webview_sample);
        webView = (WebView)findViewById(R.id.webView);        

        // 設置屬性
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);  // 支持縮放
        settings.setBuiltInZoomControls(true);  // 顯示縮放控件
        settings.setUseWideViewPort(true);  // 讓圖片自適應屏幕
        settings.setLoadWithOverviewMode(true);// 支持雙擊放大和縮小
        settings.setDefaultZoom(ZoomDensity.FAR); 
        settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); // 讓網頁的內容呈單列顯示
        settings.setRenderPriority(RenderPriority.HIGH); // 加速顯示圖片 

　　　　 // 讓圖片居中

DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int currentHeight = displaymetrics.heightPixels;
int currentWidth = displaymetrics.widthPixels;ui

Bitmap bitmapOfImageBitmap = BitmapFactory.decodeFile("/sdcard/sample.png");google

       String imageString = "<img src=\"" + "sample.png" + "\" vspace=" + (currentHeight - bitmapOfImageBitmap.getWidth()) / 2 +

" hspace=" + (currentWidth - bitmapOfImageBitmap.getHeight()) / 2 + " />"; // 沒錯，就是width-heightspa

 webView.loadDataWithBaseURL("file:///sdcard/", "<html><center>" + imageString + "</html>", "text/html", "utf-8", ""); ImageButton closeBtn = (ImageButton) findViewById(R.id.btn_close); closeBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); super.onCreate(savedInstanceState); }

主要是用WebView的loadDataWithBaseURL函數，若是有多張圖片，只需在多加幾個<img src="sample1.png" />就能夠了。code

我這邊顯示的是SD卡中的圖片，若是你想顯示項目中的文件，那麼能夠修改如下語句：xml

Bitmap bitmapOfImageBitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.drawable.sample);

String imagePath = Uri.parse("android.resource://com.mypackagename/"+ R.drawable.sample).toString();

webView.loadDataWithBaseURL(null,
"<html><center>" + imagePath + "</html>",
"text/html",
"utf-8",
"");

注意：因爲時間，上面那句 loadDataWithBaseURL(null, ...)本人不曾親自驗證，歡迎各位看官反饋。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。