Android WebView中显示一张或多张图片

最近需要在平板中显示多张图片，调查了下，决定用WebView(说实话，我还不清楚有没有其他android控件能够显示多张图片的。。。。。), 主要是用HTML的img来显示多张图片。

google百度一通后，实现了多张图片的显示，出来的效果还错。

还是自己总结一下，看别人东一点，西一点的博客还是比较费解（有时候我真的是很反感看这些博客，东抄一点，西抄一点，到最后也没说问题怎么解决的。。。。。）。

首先，在android xml增加WebView控件，如下：

<?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;

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

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

" hspace=" + (currentWidth - bitmapOfImageBitmap.getHeight()) / 2 + " />"; // 没错，就是width-height

       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" />就可以了。

我这边显示的是SD卡中的图片，如果你想显示项目中的文件，那么可以修改以下语句：

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, ...)本人未曾亲自验证，欢迎各位看官反馈。

posted on 2014-10-31 16:29 心在飞_ 阅读(2484) 评论(0) 编辑收藏举报