Android查看動態圖或者長圖的簡單方案（WebView與JS交互）
此方案從何而來？
最近再做一個小項目，圖片列表顯示的圖片，有動態圖，有長圖等，用Fresco加載并centerCrop裁剪了一把，還湊合能看，但是現在需要點擊的時候查看大圖，查看大圖的時候需要自適應屏幕，用Fresco的話挺麻煩的需要計算圖片的比例才行，于是這里想到了一個投機取巧的方案：把圖片地址傳遞給html，html接收到參數之后把< img >標簽的src替換不就可以了么？ （此文章可能稍微需要點html+css+js的基礎，a little is enough）
實戰動手
編寫html的代碼，并寫一個替換img標簽src的帶參數的function：
<!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>
再看一下style.css文件：
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>
好了，現在html有了，再瀏覽器里可以自適應圖片大小了，開始Android端：
首先在Android studio工程里新建一個assets文件目錄與java及res平級，把html文件及css文件拷貝到assets目錄里。新建Activity及布局,只需要一個webview加載圖片即可：
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_gravity="center"
android:layout_height="wrap_content">
</WebView>
開啟支持JavaScript，加載html文件， 這里要記住要在html加載完成再去調用js方法,否則會報錯！
// 啟用javascript
webView.getSettings().setJavaScriptEnabled(true);
// 從assets目錄下面的加載html
webView.loadUrl("file:///android_asset/index.html");
webView.setWebViewClient(new ImageWebViewClient ());
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 + "')");
}
}
好了，這樣就可以顯示動圖及長圖了，可以自適應，是不是很簡單了，有缺點就是每次都要加載webview體驗并不算很好，如果有好的方案或者問題還望留言告訴我，謝謝。
來自：http://www.jianshu.com/p/8b93033365e6