直接上代码
Android代码
public class MissionDetailsActivity extends BaseActivity implements View.OnClickListener{
private RelativeLayout backLayout;
private TextView titleTextView;
private TextView doctorTextView;
private TextView timeTextView;
private WebView webView;
private ProgressBar progressbar;
private ToastUtils toast;
private int net=0;
private String title;
private String doctor;
private String time;
private List<String> list;
private HashMap<String,Integer> map;
private int position=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_missiondetails);
initView();
}
/**
* 初始化各种View
* */
private void initView(){
//接收传递值
Intent intent=getIntent();
title=intent.getStringExtra("title");
doctor=intent.getStringExtra("doctor");
time=intent.getStringExtra("time");
list=new ArrayList<>();
map=new HashMap<>();
toast=new ToastUtils(this);
backLayout = findViewById(R.id.apptoplayout_onlyback_backlayout);
titleTextView = findViewById(R.id.apptoplayout_onlyback_titletextview);
doctorTextView=findViewById(R.id.activity_missiondetails_doctortextview);
timeTextView=findViewById(R.id.activity_missiondetails_timetextview);
webView=findViewById(R.id.activity_missiondetails_webview);
progressbar= findViewById(R.id.activity_missiondetails_progressbar);
backLayout.setOnClickListener(this);
//标题
if(!BooleanUtils.isEmpty(title)){
titleTextView.setText(title);
}else{
titleTextView.setText(R.string.mission_textview1);
}
//医生
if(!BooleanUtils.isEmpty(doctor)){
doctorTextView.setText(doctor);
}else{
doctorTextView.setText(R.string.empty_textview11);
}
//时间
if(!BooleanUtils.isEmpty(time)){
timeTextView.setText(time);
}else{
timeTextView.setText(R.string.empty_textview12);
}
//WebView
initWebView(webView, DataConstant.context);
}
/**
* 初始化WebView方法
* */
private void initWebView(WebView webView,String context){
if(null==webView||BooleanUtils.isEmpty(context)){
return;
}
//获取WebSettings对象
WebSettings settings=webView.getSettings();
//设置setting属性
settings.setJavaScriptEnabled(true);//支持js
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存方式 不使用缓存只从网络获取数据
settings.setDomStorageEnabled(true);//开启DOM storage API功能（HTML5 提供的一种标准的接口，主要将键值对存储在本地，在页面加载完毕后可以通过 JavaScript 来操作这些数据。）
settings.setDefaultTextEncodingName("utf-8");//设置默认编码
settings.setUseWideViewPort(false);//将图片调整到适合webview的大小
settings.setSupportZoom(true);//支持缩放
settings.setDisplayZoomControls(false);//设定缩放控件隐藏
settings.setAllowFileAccess(true);//设置可以访问文件
settings.setBuiltInZoomControls(true);//设置支持缩放
settings.setJavaScriptCanOpenWindowsAutomatically(true);//支持通过JS打开新窗口
settings.setLoadWithOverviewMode(true);//缩放至屏幕的大小
settings.setLoadsImagesAutomatically(true);//支持自动加载图片
//设置webview监听
webView.setWebViewClient(myWebViewClient);//WebViewClient监听
webView.setWebChromeClient(myWebChromeClient);//WebChromeClient 监听
// 添加js交互接口类，并起别名 imagelistner
webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
//WebVIew加载数据
webView.loadData(context, "text/html", "uft-8");//JS方式
}
/**
* JavascriptInterface接口
*/
@SuppressLint("JavascriptInterface")
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
XinSuiApplication.setLookPictureList(list);
if (!BooleanUtils.isEmpty(img) && null != map && map.containsKey(img)) {
position = map.get(img);
}
Intent intent = new Intent();
intent.putExtra("position", position);
intent.putExtra("type", "2");
intent.setClass(context, ShowBigImagActivity.class);
context.startActivity(intent);
}
@android.webkit.JavascriptInterface
public void getAllImagPath(int position, String path) {
list.add(path);
map.put(path, position);
}
}
/**
* 匹配h5 页面中的图片路径(单张)
*/
private void addImageClickListner() {
//这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
String method = "javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()";
webView.loadUrl(method);
}
/**
* 匹配h5 页面中的图片路径(全部)
*/
private void addImageClickListnerAll() {
String method = "" +
"javascript:(function()" +
"{"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) "
+ "{"
+ "window.imagelistner.getAllImagPath(i,objs[i].src);"
+ "}"
+ "})()";
webView.loadUrl(method);
}
/**
* 调整图片大小
*/
private void imgReset() {
String method = "javascript:(function(){" +
"var objs = document.getElementsByTagName('img'); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ "var img = objs[i]; " +
" img.style.maxWidth = '100%'; img.style.height = 'auto'; " +
"}" +
"})()";
webView.loadUrl(method);
}
/**
* WebViewClient
*/
WebViewClient myWebViewClient = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
addImageClickListner();
addImageClickListnerAll();
imgReset();
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
progressbar.setVisibility(View.GONE);//progressbar隐藏
webView.setVisibility(View.GONE);//webview隐藏
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
handler.proceed();//接受信任所有网站的证书
}
};
/**
* WebChromeClient
*/
WebChromeClient myWebChromeClient = new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
if (newProgress == 100) {
progressbar.setVisibility(View.GONE);//加载完网页进度条消失
webView.setVisibility(View.VISIBLE);//webview显示
} else {
progressbar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
progressbar.setProgress(newProgress);//设置进度值
webView.setVisibility(View.GONE);//webview隐藏
}
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
@Override
public void onReceivedIcon(WebView view, Bitmap icon) {
super.onReceivedIcon(view, icon);
}
};
/**
* 各种点击事件的方法
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.apptoplayout_onlyback_backlayout://返回
finish();
overridePendingTransition(0, R.anim.activity_right_open);
break;
default:
break;
}
}
/**
* onKeyDown方法
* */
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
finish();
overridePendingTransition(0,R.anim.activity_right_open);
return false;
}
return super.onKeyDown(keyCode, event);
}
}
html片段
public static String context ="<p><img src=\"http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg\" />\n"+
"\n"+
"\n"+
"先说第一个，如何绘制波浪图形。绘制波浪图形的方法有很多,这里介绍一种最简单的方法，就是使用canvas的drawLine方法绘制直线。我们可以将view的宽度转化成弧度，通过sin或者cos方法获取每个像素点的坐标，通过drawline绘制一条从顶点到底部的直线，这样都可以达到效果。\n"+
"\n"+
"\n"+
"再说第二个，这个是一个难点，但是实现起来却很简单。我们获取的坐标是从0-360度的坐标，也就是说，最后一个的坐标接下来的坐标应该是第一的坐标，它们是一个连续的没有断开的坐标系列，那么我们只需要将坐标按照一定的规则交换一下位置就可以实现波浪的荡漾效果了。\n"+
"\n"+
"\n"+
"<img src=\"https://www.baidu.com/img/bd_logo1.png\" />\n"+
"\n"+
"\n"+
"阿迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯" +
"发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发" +
"迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发" +
"多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发" +
"多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪" +
"斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯" +
"发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发" +
"<img src=\"http://i.imgur.com/DvpvklR.png\" />" +
"迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发" +
"多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯" +
"发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪" +
"斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多" +
"发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯" +
"发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发" +
"多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发" +
"迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发" +
"多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪" +
"斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多" +
"发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发迪斯发多发\n"+
"\n"+
"\n"+
"\n"+
"</p>\n"+
"<p><font color='green'>先说第一个，如何绘制波浪图形。绘制波浪图形的方法有很多," +
"这里介绍一种最简单的方法，就是使用canvas的drawLine方法绘制直线。" +
"我们可以将view的宽度转化成弧度，通过sin或者cos方法获取每个像素点的坐标，" +
"通过drawline绘制一条从顶点到底部的直线，这样都可以达到效果。\n"+
"\n"+
"再说第二个，这个是一个难点，但是实现起来却很简单。我们获取的坐标是" +
"从0-360度的坐标，也就是说，最后一个的坐标接下来的坐标应该是第一的坐标，" +
"它们是一个连续的没有断开的坐标系列，那么我们只需要将坐标按照一定的规则" +
"交换一下位置就可以实现波浪的荡漾效果了。</font></p>";
如果需要替换JS片段的某张图片为本地图片
1.在app/src/main下创建一个assets文件夹 assets文件夹里再创建一个images文件夹。放一个替换的图片
2.在WebViewClient的shouldInterceptRequest方法中替换
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
if ("http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg".equals(url)) {
// 步骤1:创建一个输入流
InputStream is = null;
try {
// 步骤2:打开需要替换的资源(存放在assets文件夹里) 在app/src/main下创建一个assets文件夹 assets文件夹里再创建一个images文件夹,放一个error.png的图片
is = getApplicationContext().getAssets().open("images/ic_launcher.png");
} catch (IOException e) {
e.printStackTrace();
}
// 步骤4:替换资源
WebResourceResponse response = new WebResourceResponse("image/png", "utf-8", is);
// 参数1:http请求里该图片的Content-Type,此处图片为image/png
// 参数2:编码类型
// 参数3:替换资源的输入流
return response;
}
return super.shouldInterceptRequest(view, url);
}
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
