Android查看动态图或者长图的简单方案（WebView与JS交互）
AntReel
7年前
<h2>此方案从何而来？</h2> <p>最近再做一个小项目，图片列表显示的图片，有动态图，有长图等，用Fresco加载并centerCrop裁剪了一把，还凑合能看，但是现在需要点击的时候查看大图，查看大图的时候需要自适应屏幕，用Fresco的话挺麻烦的需要计算图片的比例才行，于是这里想到了一个投机取巧的方案：把图片地址传递给html，html接收到参数之后把< img >标签的src替换不就可以了么？ （此文章可能稍微需要点html+css+js的基础，a little is enough）</p> <h2>实战动手</h2> <p>编写html的代码，并写一个替换img标签src的带参数的function：</p> <pre> <code class="language-java"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="keywords" content="test" /> <meta name="description" content="" /> <title>test</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> function javacalljswith(arg){ document.getElementById("image").src = arg; } </script> </head> <body> <div class="doc"> <div class="content-step"> <img id="image" src="" width="574" height="68" alt="" /> </div> </div> </body> </html></code></pre> <p>再看一下style.css文件：</p> <pre> <code class="language-java">body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color: #333; -webkit-text-size-adjust: none } fieldset,img { border: 0 } ol,ul { list-style: none } address,em { font-style: normal } a { color: #000; text-decoration: none } table { border-collapse: collapse } #clear { clear: both; width: 100%; background-color: #fff } #clear: after { display: block; clear: both; height: 1px; content: '' } img, fieldset { border: 0; } img { height: auto; width: auto\9; width:100%; } .content-step ul li .red{ color:#e5362b; background:none; width:inherit; vertical-align:inherit} * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .doc { margin: 0 auto; } .doc h1 {font-size:16px;color:#333;padding:10px 0;font-weight:500;} .shop-title {padding:10px 0;} .author {padding:10px 0;font-size:12px;} .author span {color:#333;} .author a {color:#2B8CB2;} .content {padding:20px 0;} .f-bold {background-color:#CCC5C0;color:#E5362B;padding:5px;line-height:24px;font-size:14px;} .content p {line-height:24px;padding:10px 0;text-indent:2em; font-size:14px;} .content-time {padding:20px 0;color:#000;font-weight:500;line-height:40px;} .content-time span {color:#000;} .content-time em {color:#E5362B;} .content-step {} .content-step ul {padding:20px 0;} .content-step ul li {line-height:30px;color:#5D5D5D; font-size:14px; padding-top:0} .content-step ul li .icon{ display:inline-block; background:url(../images/icon.jpg) no-repeat scroll; width:20px; height:20px; background-size:20px 20px; vertical-align:middle; margin-right:8px;} .shop-list {} .shop-list li {text-align:center;padding:20px 0;} .shop-list li p {text-align:left;color:#7A7878; text-indent:2em;} .shop-list li img {margin:0 auto;} .content-contact {color:#F15050;padding:20px 10px;line-height:30px;text-indent:2em;} .cmbc-qrcode {text-align:center;padding:20px 0;} .down-cmbc {text-align:center;display:block;margin:0 auto;} .down-cmbc img {margin:0 auto;} /* @media screen and (min-width: 480px) { .doc { font-size: 21px } }@media screen and (min-width: 640px) { .doc { font-size: 28px } } */ .list li{display:-moz-box;display:-webkit-box;display:box;} .list li p{ width:90%} .last{ text-align:right ; font-size:12px; color:#bdbdbd; padding-right:20px; margin-bottom:10px;}</code></pre> <p>好了，现在html有了，再浏览器里可以自适应图片大小了，开始Android端：</p> <p>首先在Android studio工程里新建一个assets文件目录与java及res平级，把html文件及css文件拷贝到assets目录里。新建Activity及布局,只需要一个webview加载图片即可：</p> <pre> <code class="language-java"><WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_gravity="center" android:layout_height="wrap_content"> </WebView></code></pre> <p>开启支持JavaScript，加载html文件， 这里要记住要在html加载完成再去调用js方法,否则会报错！</p> <pre> <code class="language-java">// 启用javascript webView.getSettings().setJavaScriptEnabled(true); // 从assets目录下面的加载html webView.loadUrl("file:///android_asset/index.html"); webView.setWebViewClient(new ImageWebViewClient ());</code></pre> <pre> <code class="language-java">private class ImageWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url);// 当打开新链接时，使用当前的 WebView，不会使用系统其他浏览器 return true; } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //在这里调用js方法传递图片url给html,此处的imageUrl 为图片地址 webView.loadUrl("javascript:javacalljswith('" + imageUrl + "')"); } }</code></pre> <p>好了，这样就可以显示动图及长图了，可以自适应，是不是很简单了，有缺点就是每次都要加载webview体验并不算很好，如果有好的方案或者问题还望留言告诉我，谢谢。</p> <p> </p> <p>来自：http://www.jianshu.com/p/8b93033365e6</p> <p> </p>