android加载长图片的方法

来源：互联网发布：网络的应用有哪些编辑：程序博客网时间：2024/06/02 22:46

1.很多应用都有加载一张长图片，用户可以上下拉动图片。

自己没有好的想法，那只好百度咯。结果都说用webview来实现，好吧那就只好先试一下了。

2.自己写了简单的html，然后webview加载。图片可以成功显示，但是因为图片太大了，webview需要左右上下拉动才能看到完整的图。

好吧，html应该也可以适配手机的宽度吧。奈何不会html啊，那只好再求助度娘了。找到一个css文件，可以用来做html的适配，好了，就用他了。

3，代码

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 { padding:10px; 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了:

html就简单多了，增加css和图片的引用就ok了。

注：html，css，图片等文件，在这个demo中都是放在assert中的。

4.这样用那不是只能引用本地的长图了？需要显示的长图片是从服务端请求过来的呢？

这个还没有尝试过，不知道能不能去修改html里图片的引用。

5，之后同事提醒可以试一下手势缩放图片的控件。这个东西找到一个第三方开源的项目

https://codeload.github.com/jasonpolites/gesture-imageview/zip/master

有需要了再试一下吧。

0 0