android 加载大长图,android加载长图片的方法

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，之后同事提醒可以试一下手势缩放图片的控件。这个东西找到一个第三方开源的项目

有需要了再试一下吧。