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

  • 相关阅读:
    NO.05--谈一谈Angular 和 Vue.js 的对比。
    NO.04--我的使用心得之使用vue绑定class名
    No.03---Vue学习之路之模块化组织
    NO.02---聊聊Vue提升
    NO.01---今天聊聊Vuex的简单入门
    hello word!------为什么开通博客以及自我介绍
    JavaScript 常用正则示例
    Newtonsoft.Json(Json.Net)学习笔记
    aspx后台传递Json到前台的两种接收方法
    MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子
  • 原文地址:https://www.cnblogs.com/jackyim/p/4065392.html
Copyright © 2020-2023  润新知