最近再做一个小项目,图片列表显示的图片,有动态图,有长图等,用 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;
- }
好了,现在 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 体验并不算很好,如果有好的方案或者问题还望留言告诉我,谢谢。
来源: