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, ...)本人未曾亲自验证,欢迎各位看官反馈。
Android WebView中显示一张或多张图片的更多相关文章
- Android WebView中的JavaScript代码使用
在WebView中使用JavaScript 如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript. 一旦使能之后,你也可以自己创建接口在你的应用和Java ...
- [OpenCV笔记]0.OpenCV中显示多张图像
摘要 本文主要介绍OpenCV中同时显示多张IplImage图像的方法(C++形式的多图显示需要修改,用vector<Mat>可能比较方便),有点类似MATLAB中的subplot,只是暂 ...
- web端生成的带有echarts图表的html页面,嵌入在(javaFx)webview中显示错位问题
web项目需要嵌入到手机APP的webview里面以及 windows客户端应用(JavaFx)的webview里面,这个时候就出现了问题. echarts渲染的时候根据浏览器不同的内核显示是有区别的 ...
- Android Webview中解决H5的音视频不能自动播放的问题
在开发webview的时候,当加载有声音的网页的时候,声音不会自动播放, 解决方法:在webview中调用js方法.这个方法需要在webview的setWebViewClient方法之后在onPage ...
- Android WebView中那些不得不解决的坑~~
前面那张hybrid开发心得 有人问 怎么解决不用onJsPrompt 来回调js函数的问题.其实很简单,就是在在你的jscalljava回调函数内 另外开个线程去load js代码即可: wb.po ...
- android webview正确显示音标
package com.example.fonttest; import android.support.v7.app.ActionBarActivity; import android.webkit ...
- Android webview中cookie增加/修改
最近项目需求中,需要满足往webview传递cookie,而且cookie需要增加修改: public class MainActivity extends Activity { private We ...
- Android WebView中软键盘会遮挡输入框相关问题
要想实现这样的软键盘出现的时候会自己主动把输入框的布局顶上去的效果,须要设置输入法的属性,有下面两种设置方式: 一.在java代码中设置例如以下: getWindow().setSo ...
- Xamarin Android Webview中JS调用App中的C#方法
参考链接:https://github.com/xamarin/recipes/tree/master/Recipes/android/controls/webview/call_csharp_fro ...
随机推荐
- php设计模式之抽象工厂模式
之前总结了一下工厂模式,其实准确地说是简单 工厂模式,在它的基础上再进行抽象就可以得到一种新的模式:抽象工厂模式. 专业一点的定义为: 抽象工厂模式(Abstact Factory)是一种常见的软件设 ...
- 玩转docker镜像和镜像构建
摘要 本文从个人的角度,讲述对于docker镜像和镜像构建的一些实践经验.主要内容包括利用docker hub进行在线编译,下载镜像,dind的实践,对于镜像的一些思考等.本文是对当时微信分享内容的一 ...
- TFS Services 集成Docker
随着Docker的爆发,越来越多软件研发团体开始享用和受益于Docker系统体系带来的巨大好处.Docker的使用,除了减少软硬件成本的立竿见影效果,更是对软件生命周期过程开发.测试.生成部署和运维整 ...
- base关键字
base关键字 专门用来在子类访问父类成员 base.标识符:“.”调用父类同名属性.同名函数.构造函数 ()父类person public class Person { public Pe ...
- 队列Queue FIFO先进先出 栈Stack FILO先进后出
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Ubuntu16.04 server下配置MySQL,并开启远程连接
背景 最近正在学nodejs,想到曾经有台云服务器,但是很久不用了,由于怕麻烦,一股脑的把云主机重装了个Ubuntu系统,于是配置MySQL成了配置服务中的一个环节(node用不用MySQL不管,主要 ...
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
- PostgreSQL 序列使用
数据库中主键的生成一般是通过序列来生成,PG的序列知识主要罗列如下: 如何找到序列的名称:用pgadmin打开当前所用数据库,在schemas->sequences下找到相关的序列,然后SELE ...
- NGINX----源码阅读一(main函数)
1.ngx_debug_init(); 初始化debug函数,一般为空. 2.ngx_strerror_init(): 将系统错误码+错误信息,以ngx_str_t数组保存. 3.ngx_get_op ...
- 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变
在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...