瀑布流照片墙与图片缓存的完美结合

传统界面的布局方式总是行列分明、坐落有序的，这种布局已是司空见惯，在不知不觉中大家都已经对它产生了审美疲劳。这个时候瀑布流布局的出现，就给人带来了耳目一新的感觉，这种布局虽然看上去貌似毫无规律，但是却有一种说不上来的美感，以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面。

记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了，但那个时候是使用的GridView来进行布局的，这种布局方式只适用于“墙”上的每张图片大小都相同的情况，如果图片的大小参差不齐，在GridView中显示就会非常的难看。而使用瀑布流的布局方式就可以很好地解决这个问题，因此今天我们也来赶一下潮流，看看如何在Android上实现瀑布流照片墙的功能。

首先还是讲一下实现原理，瀑布流的布局方式虽然看起来好像排列的很随意，其实它是有很科学的排列规则的。整个界面会根据屏幕的宽度划分成等宽的若干列，由于手机的屏幕不是很大，这里我们就分成三列。每当需要添加一张图片时，会将这张图片的宽度压缩成和列一样宽，再按照同样的压缩比例对图片的高度进行压缩，然后在这三列中找出当前高度最小的一列，将图片添加到这一列中。之后每当需要添加一张新图片时，都去重复上面的操作，就会形成瀑布流格局的照片墙，示意图如下所示。

听我这么说完后，你可能会觉得瀑布流的布局非常简单嘛，只需要使用三个LinearLayout平分整个屏幕宽度，然后动态地addView()进去就好了。确实如此，如果只是为了实现功能的话，就是这么简单。可是别忘了，我们是在手机上进行开发，如果不停地往LinearLayout里添加图片，程序很快就会OOM。因此我们还需要一个合理的方案来对图片资源进行释放，这里仍然是准备使用LruCache算法，对这个算法不熟悉的朋友可以先参考Android高效加载大图、多图方案，有效避免程序OOM 。

下面我们就来开始实现吧，新建一个Android项目，起名叫PhotoWallFallsDemo，并选择4.0的API。

第一个要考虑的问题是，我们到哪儿去收集这些大小参差不齐的图片呢？这里我事先在百度上搜索了很多张风景图片，并且为了保证它们访问的稳定性，我将这些图片都上传到了我的CSDN相册里，因此只要从这里下载图片就可以了。新建一个Images类，将所有相册中图片的网址都配置进去，代码如下所示：

[java] view plaincopy

  1. public class Images {
  2. public final static String[] imageUrls = new String[] {
  3. "http://img.my.csdn.net/uploads/201309/01/1378037235_3453.jpg",
  4. "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg",
  5. "http://img.my.csdn.net/uploads/201309/01/1378037235_9280.jpg",
  6. "http://img.my.csdn.net/uploads/201309/01/1378037234_3539.jpg",
  7. "http://img.my.csdn.net/uploads/201309/01/1378037234_6318.jpg",
  8. "http://img.my.csdn.net/uploads/201309/01/1378037194_2965.jpg",
  9. "http://img.my.csdn.net/uploads/201309/01/1378037193_1687.jpg",
  10. "http://img.my.csdn.net/uploads/201309/01/1378037193_1286.jpg",
  11. "http://img.my.csdn.net/uploads/201309/01/1378037192_8379.jpg",
  12. "http://img.my.csdn.net/uploads/201309/01/1378037178_9374.jpg",
  13. "http://img.my.csdn.net/uploads/201309/01/1378037177_1254.jpg",
  14. "http://img.my.csdn.net/uploads/201309/01/1378037177_6203.jpg",
  15. "http://img.my.csdn.net/uploads/201309/01/1378037152_6352.jpg",
  16. "http://img.my.csdn.net/uploads/201309/01/1378037151_9565.jpg",
  17. "http://img.my.csdn.net/uploads/201309/01/1378037151_7904.jpg",
  18. "http://img.my.csdn.net/uploads/201309/01/1378037148_7104.jpg",
  19. "http://img.my.csdn.net/uploads/201309/01/1378037129_8825.jpg",
  20. "http://img.my.csdn.net/uploads/201309/01/1378037128_5291.jpg",
  21. "http://img.my.csdn.net/uploads/201309/01/1378037128_3531.jpg",
  22. "http://img.my.csdn.net/uploads/201309/01/1378037127_1085.jpg",
  23. "http://img.my.csdn.net/uploads/201309/01/1378037095_7515.jpg",
  24. "http://img.my.csdn.net/uploads/201309/01/1378037094_8001.jpg",
  25. "http://img.my.csdn.net/uploads/201309/01/1378037093_7168.jpg",
  26. "http://img.my.csdn.net/uploads/201309/01/1378037091_4950.jpg",
  27. "http://img.my.csdn.net/uploads/201308/31/1377949643_6410.jpg",
  28. "http://img.my.csdn.net/uploads/201308/31/1377949642_6939.jpg",
  29. "http://img.my.csdn.net/uploads/201308/31/1377949630_4505.jpg",
  30. "http://img.my.csdn.net/uploads/201308/31/1377949630_4593.jpg",
  31. "http://img.my.csdn.net/uploads/201308/31/1377949629_7309.jpg",
  32. "http://img.my.csdn.net/uploads/201308/31/1377949629_8247.jpg",
  33. "http://img.my.csdn.net/uploads/201308/31/1377949615_1986.jpg",
  34. "http://img.my.csdn.net/uploads/201308/31/1377949614_8482.jpg",
  35. "http://img.my.csdn.net/uploads/201308/31/1377949614_3743.jpg",
  36. "http://img.my.csdn.net/uploads/201308/31/1377949614_4199.jpg",
  37. "http://img.my.csdn.net/uploads/201308/31/1377949599_3416.jpg",
  38. "http://img.my.csdn.net/uploads/201308/31/1377949599_5269.jpg",
  39. "http://img.my.csdn.net/uploads/201308/31/1377949598_7858.jpg",
  40. "http://img.my.csdn.net/uploads/201308/31/1377949598_9982.jpg",
  41. "http://img.my.csdn.net/uploads/201308/31/1377949578_2770.jpg",
  42. "http://img.my.csdn.net/uploads/201308/31/1377949578_8744.jpg",
  43. "http://img.my.csdn.net/uploads/201308/31/1377949577_5210.jpg",
  44. "http://img.my.csdn.net/uploads/201308/31/1377949577_1998.jpg",
  45. "http://img.my.csdn.net/uploads/201308/31/1377949482_8813.jpg",
  46. "http://img.my.csdn.net/uploads/201308/31/1377949481_6577.jpg",
  47. "http://img.my.csdn.net/uploads/201308/31/1377949480_4490.jpg",
  48. "http://img.my.csdn.net/uploads/201308/31/1377949455_6792.jpg",
  49. "http://img.my.csdn.net/uploads/201308/31/1377949455_6345.jpg",
  50. "http://img.my.csdn.net/uploads/201308/31/1377949442_4553.jpg",
  51. "http://img.my.csdn.net/uploads/201308/31/1377949441_8987.jpg",
  52. "http://img.my.csdn.net/uploads/201308/31/1377949441_5454.jpg",
  53. "http://img.my.csdn.net/uploads/201308/31/1377949454_6367.jpg",
  54. "http://img.my.csdn.net/uploads/201308/31/1377949442_4562.jpg" };
  55. }

然后新建一个ImageLoader类，用于方便对图片进行管理，代码如下所示：

[java] view plaincopy

  1. public class ImageLoader {
  2. /**
  3. * 图片缓存技术的核心类，用于缓存所有下载好的图片，在程序内存达到设定值时会将最少最近使用的图片移除掉。
  4. */
  5. private static LruCache<String, Bitmap> mMemoryCache;
  6. /**
  7. * ImageLoader的实例。
  8. */
  9. private static ImageLoader mImageLoader;
  10. private ImageLoader() {
  11. // 获取应用程序最大可用内存
  12. int maxMemory = (int) Runtime.getRuntime().maxMemory();
  13. int cacheSize = maxMemory / 8;
  14. // 设置图片缓存大小为程序最大可用内存的1/8
  15. mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
  16. @Override
  17. protected int sizeOf(String key, Bitmap bitmap) {
  18. return bitmap.getByteCount();
  19. }
  20. };
  21. }
  22. /**
  23. * 获取ImageLoader的实例。
  24. *
  25. * @return ImageLoader的实例。
  26. */
  27. public static ImageLoader getInstance() {
  28. if (mImageLoader == null) {
  29. mImageLoader = new ImageLoader();
  30. }
  31. return mImageLoader;
  32. }
  33. /**
  34. * 将一张图片存储到LruCache中。
  35. *
  36. * @param key
  37. *            LruCache的键，这里传入图片的URL地址。
  38. * @param bitmap
  39. *            LruCache的键，这里传入从网络上下载的Bitmap对象。
  40. */
  41. public void addBitmapToMemoryCache(String key, Bitmap bitmap) {
  42. if (getBitmapFromMemoryCache(key) == null) {
  43. mMemoryCache.put(key, bitmap);
  44. }
  45. }
  46. /**
  47. * 从LruCache中获取一张图片，如果不存在就返回null。
  48. *
  49. * @param key
  50. *            LruCache的键，这里传入图片的URL地址。
  51. * @return 对应传入键的Bitmap对象，或者null。
  52. */
  53. public Bitmap getBitmapFromMemoryCache(String key) {
  54. return mMemoryCache.get(key);
  55. }
  56. public static int calculateInSampleSize(BitmapFactory.Options options,
  57. int reqWidth) {
  58. // 源图片的宽度
  59. final int width = options.outWidth;
  60. int inSampleSize = 1;
  61. if (width > reqWidth) {
  62. // 计算出实际宽度和目标宽度的比率
  63. final int widthRatio = Math.round((float) width / (float) reqWidth);
  64. inSampleSize = widthRatio;
  65. }
  66. return inSampleSize;
  67. }
  68. public static Bitmap decodeSampledBitmapFromResource(String pathName,
  69. int reqWidth) {
  70. // 第一次解析将inJustDecodeBounds设置为true，来获取图片大小
  71. final BitmapFactory.Options options = new BitmapFactory.Options();
  72. options.inJustDecodeBounds = true;
  73. BitmapFactory.decodeFile(pathName, options);
  74. // 调用上面定义的方法计算inSampleSize值
  75. options.inSampleSize = calculateInSampleSize(options, reqWidth);
  76. // 使用获取到的inSampleSize值再次解析图片
  77. options.inJustDecodeBounds = false;
  78. return BitmapFactory.decodeFile(pathName, options);
  79. }
  80. }

这里我们将ImageLoader类设成单例，并在构造函数中初始化了LruCache类，把它的最大缓存容量设为最大可用内存的1/8。然后又提供了其它几个方法可以操作LruCache，以及对图片进行压缩和读取。

接下来新建MyScrollView继承自ScrollView，代码如下所示：

[java] view plaincopy

  1. public class MyScrollView extends ScrollView implements OnTouchListener {
  2. /**
  3. * 每页要加载的图片数量
  4. */
  5. public static final int PAGE_SIZE = 15;
  6. /**
  7. * 记录当前已加载到第几页
  8. */
  9. private int page;
  10. /**
  11. * 每一列的宽度
  12. */
  13. private int columnWidth;
  14. /**
  15. * 当前第一列的高度
  16. */
  17. private int firstColumnHeight;
  18. /**
  19. * 当前第二列的高度
  20. */
  21. private int secondColumnHeight;
  22. /**
  23. * 当前第三列的高度
  24. */
  25. private int thirdColumnHeight;
  26. /**
  27. * 是否已加载过一次layout，这里onLayout中的初始化只需加载一次
  28. */
  29. private boolean loadOnce;
  30. /**
  31. * 对图片进行管理的工具类
  32. */
  33. private ImageLoader imageLoader;
  34. /**
  35. * 第一列的布局
  36. */
  37. private LinearLayout firstColumn;
  38. /**
  39. * 第二列的布局
  40. */
  41. private LinearLayout secondColumn;
  42. /**
  43. * 第三列的布局
  44. */
  45. private LinearLayout thirdColumn;
  46. /**
  47. * 记录所有正在下载或等待下载的任务。
  48. */
  49. private static Set<LoadImageTask> taskCollection;
  50. /**
  51. * MyScrollView下的直接子布局。
  52. */
  53. private static View scrollLayout;
  54. /**
  55. * MyScrollView布局的高度。
  56. */
  57. private static int scrollViewHeight;
  58. /**
  59. * 记录上垂直方向的滚动距离。
  60. */
  61. private static int lastScrollY = -1;
  62. /**
  63. * 记录所有界面上的图片，用以可以随时控制对图片的释放。
  64. */
  65. private List<ImageView> imageViewList = new ArrayList<ImageView>();
  66. /**
  67. * 在Handler中进行图片可见性检查的判断，以及加载更多图片的操作。
  68. */
  69. private static Handler handler = new Handler() {
  70. public void handleMessage(android.os.Message msg) {
  71. MyScrollView myScrollView = (MyScrollView) msg.obj;
  72. int scrollY = myScrollView.getScrollY();
  73. // 如果当前的滚动位置和上次相同，表示已停止滚动
  74. if (scrollY == lastScrollY) {
  75. // 当滚动的最底部，并且当前没有正在下载的任务时，开始加载下一页的图片
  76. if (scrollViewHeight + scrollY >= scrollLayout.getHeight()
  77. && taskCollection.isEmpty()) {
  78. myScrollView.loadMoreImages();
  79. }
  80. myScrollView.checkVisibility();
  81. } else {
  82. lastScrollY = scrollY;
  83. Message message = new Message();
  84. message.obj = myScrollView;
  85. // 5毫秒后再次对滚动位置进行判断
  86. handler.sendMessageDelayed(message, 5);
  87. }
  88. };
  89. };
  90. /**
  91. * MyScrollView的构造函数。
  92. *
  93. * @param context
  94. * @param attrs
  95. */
  96. public MyScrollView(Context context, AttributeSet attrs) {
  97. super(context, attrs);
  98. imageLoader = ImageLoader.getInstance();
  99. taskCollection = new HashSet<LoadImageTask>();
  100. setOnTouchListener(this);
  101. }
  102. /**
  103. * 进行一些关键性的初始化操作，获取MyScrollView的高度，以及得到第一列的宽度值。并在这里开始加载第一页的图片。
  104. */
  105. @Override
  106. protected void onLayout(boolean changed, int l, int t, int r, int b) {
  107. super.onLayout(changed, l, t, r, b);
  108. if (changed && !loadOnce) {
  109. scrollViewHeight = getHeight();
  110. scrollLayout = getChildAt(0);
  111. firstColumn = (LinearLayout) findViewById(R.id.first_column);
  112. secondColumn = (LinearLayout) findViewById(R.id.second_column);
  113. thirdColumn = (LinearLayout) findViewById(R.id.third_column);
  114. columnWidth = firstColumn.getWidth();
  115. loadOnce = true;
  116. loadMoreImages();
  117. }
  118. }
  119. /**
  120. * 监听用户的触屏事件，如果用户手指离开屏幕则开始进行滚动检测。
  121. */
  122. @Override
  123. public boolean onTouch(View v, MotionEvent event) {
  124. if (event.getAction() == MotionEvent.ACTION_UP) {
  125. Message message = new Message();
  126. message.obj = this;
  127. handler.sendMessageDelayed(message, 5);
  128. }
  129. return false;
  130. }
  131. /**
  132. * 开始加载下一页的图片，每张图片都会开启一个异步线程去下载。
  133. */
  134. public void loadMoreImages() {
  135. if (hasSDCard()) {
  136. int startIndex = page * PAGE_SIZE;
  137. int endIndex = page * PAGE_SIZE + PAGE_SIZE;
  138. if (startIndex < Images.imageUrls.length) {
  139. Toast.makeText(getContext(), "正在加载...", Toast.LENGTH_SHORT)
  140. .show();
  141. if (endIndex > Images.imageUrls.length) {
  142. endIndex = Images.imageUrls.length;
  143. }
  144. for (int i = startIndex; i < endIndex; i++) {
  145. LoadImageTask task = new LoadImageTask();
  146. taskCollection.add(task);
  147. task.execute(Images.imageUrls[i]);
  148. }
  149. page++;
  150. } else {
  151. Toast.makeText(getContext(), "已没有更多图片", Toast.LENGTH_SHORT)
  152. .show();
  153. }
  154. } else {
  155. Toast.makeText(getContext(), "未发现SD卡", Toast.LENGTH_SHORT).show();
  156. }
  157. }
  158. /**
  159. * 遍历imageViewList中的每张图片，对图片的可见性进行检查，如果图片已经离开屏幕可见范围，则将图片替换成一张空图。
  160. */
  161. public void checkVisibility() {
  162. for (int i = 0; i < imageViewList.size(); i++) {
  163. ImageView imageView = imageViewList.get(i);
  164. int borderTop = (Integer) imageView.getTag(R.string.border_top);
  165. int borderBottom = (Integer) imageView
  166. .getTag(R.string.border_bottom);
  167. if (borderBottom > getScrollY()
  168. && borderTop < getScrollY() + scrollViewHeight) {
  169. String imageUrl = (String) imageView.getTag(R.string.image_url);
  170. Bitmap bitmap = imageLoader.getBitmapFromMemoryCache(imageUrl);
  171. if (bitmap != null) {
  172. imageView.setImageBitmap(bitmap);
  173. } else {
  174. LoadImageTask task = new LoadImageTask(imageView);
  175. task.execute(imageUrl);
  176. }
  177. } else {
  178. imageView.setImageResource(R.drawable.empty_photo);
  179. }
  180. }
  181. }
  182. /**
  183. * 判断手机是否有SD卡。
  184. *
  185. * @return 有SD卡返回true，没有返回false。
  186. */
  187. private boolean hasSDCard() {
  188. return Environment.MEDIA_MOUNTED.equals(Environment
  189. .getExternalStorageState());
  190. }
  191. /**
  192. * 异步下载图片的任务。
  193. *
  194. * @author guolin
  195. */
  196. class LoadImageTask extends AsyncTask<String, Void, Bitmap> {
  197. /**
  198. * 图片的URL地址
  199. */
  200. private String mImageUrl;
  201. /**
  202. * 可重复使用的ImageView
  203. */
  204. private ImageView mImageView;
  205. public LoadImageTask() {
  206. }
  207. /**
  208. * 将可重复使用的ImageView传入
  209. *
  210. * @param imageView
  211. */
  212. public LoadImageTask(ImageView imageView) {
  213. mImageView = imageView;
  214. }
  215. @Override
  216. protected Bitmap doInBackground(String... params) {
  217. mImageUrl = params[0];
  218. Bitmap imageBitmap = imageLoader
  219. .getBitmapFromMemoryCache(mImageUrl);
  220. if (imageBitmap == null) {
  221. imageBitmap = loadImage(mImageUrl);
  222. }
  223. return imageBitmap;
  224. }
  225. @Override
  226. protected void onPostExecute(Bitmap bitmap) {
  227. if (bitmap != null) {
  228. double ratio = bitmap.getWidth() / (columnWidth * 1.0);
  229. int scaledHeight = (int) (bitmap.getHeight() / ratio);
  230. addImage(bitmap, columnWidth, scaledHeight);
  231. }
  232. taskCollection.remove(this);
  233. }
  234. /**
  235. * 根据传入的URL，对图片进行加载。如果这张图片已经存在于SD卡中，则直接从SD卡里读取，否则就从网络上下载。
  236. *
  237. * @param imageUrl
  238. *            图片的URL地址
  239. * @return 加载到内存的图片。
  240. */
  241. private Bitmap loadImage(String imageUrl) {
  242. File imageFile = new File(getImagePath(imageUrl));
  243. if (!imageFile.exists()) {
  244. downloadImage(imageUrl);
  245. }
  246. if (imageUrl != null) {
  247. Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(
  248. imageFile.getPath(), columnWidth);
  249. if (bitmap != null) {
  250. imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);
  251. return bitmap;
  252. }
  253. }
  254. return null;
  255. }
  256. /**
  257. * 向ImageView中添加一张图片
  258. *
  259. * @param bitmap
  260. *            待添加的图片
  261. * @param imageWidth
  262. *            图片的宽度
  263. * @param imageHeight
  264. *            图片的高度
  265. */
  266. private void addImage(Bitmap bitmap, int imageWidth, int imageHeight) {
  267. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  268. imageWidth, imageHeight);
  269. if (mImageView != null) {
  270. mImageView.setImageBitmap(bitmap);
  271. } else {
  272. ImageView imageView = new ImageView(getContext());
  273. imageView.setLayoutParams(params);
  274. imageView.setImageBitmap(bitmap);
  275. imageView.setScaleType(ScaleType.FIT_XY);
  276. imageView.setPadding(5, 5, 5, 5);
  277. imageView.setTag(R.string.image_url, mImageUrl);
  278. findColumnToAdd(imageView, imageHeight).addView(imageView);
  279. imageViewList.add(imageView);
  280. }
  281. }
  282. /**
  283. * 找到此时应该添加图片的一列。原则就是对三列的高度进行判断，当前高度最小的一列就是应该添加的一列。
  284. *
  285. * @param imageView
  286. * @param imageHeight
  287. * @return 应该添加图片的一列
  288. */
  289. private LinearLayout findColumnToAdd(ImageView imageView,
  290. int imageHeight) {
  291. if (firstColumnHeight <= secondColumnHeight) {
  292. if (firstColumnHeight <= thirdColumnHeight) {
  293. imageView.setTag(R.string.border_top, firstColumnHeight);
  294. firstColumnHeight += imageHeight;
  295. imageView.setTag(R.string.border_bottom, firstColumnHeight);
  296. return firstColumn;
  297. }
  298. imageView.setTag(R.string.border_top, thirdColumnHeight);
  299. thirdColumnHeight += imageHeight;
  300. imageView.setTag(R.string.border_bottom, thirdColumnHeight);
  301. return thirdColumn;
  302. } else {
  303. if (secondColumnHeight <= thirdColumnHeight) {
  304. imageView.setTag(R.string.border_top, secondColumnHeight);
  305. secondColumnHeight += imageHeight;
  306. imageView
  307. .setTag(R.string.border_bottom, secondColumnHeight);
  308. return secondColumn;
  309. }
  310. imageView.setTag(R.string.border_top, thirdColumnHeight);
  311. thirdColumnHeight += imageHeight;
  312. imageView.setTag(R.string.border_bottom, thirdColumnHeight);
  313. return thirdColumn;
  314. }
  315. }
  316. /**
  317. * 将图片下载到SD卡缓存起来。
  318. *
  319. * @param imageUrl
  320. *            图片的URL地址。
  321. */
  322. private void downloadImage(String imageUrl) {
  323. HttpURLConnection con = null;
  324. FileOutputStream fos = null;
  325. BufferedOutputStream bos = null;
  326. BufferedInputStream bis = null;
  327. File imageFile = null;
  328. try {
  329. URL url = new URL(imageUrl);
  330. con = (HttpURLConnection) url.openConnection();
  331. con.setConnectTimeout(5 * 1000);
  332. con.setReadTimeout(15 * 1000);
  333. con.setDoInput(true);
  334. con.setDoOutput(true);
  335. bis = new BufferedInputStream(con.getInputStream());
  336. imageFile = new File(getImagePath(imageUrl));
  337. fos = new FileOutputStream(imageFile);
  338. bos = new BufferedOutputStream(fos);
  339. byte[] b = new byte[1024];
  340. int length;
  341. while ((length = bis.read(b)) != -1) {
  342. bos.write(b, 0, length);
  343. bos.flush();
  344. }
  345. } catch (Exception e) {
  346. e.printStackTrace();
  347. } finally {
  348. try {
  349. if (bis != null) {
  350. bis.close();
  351. }
  352. if (bos != null) {
  353. bos.close();
  354. }
  355. if (con != null) {
  356. con.disconnect();
  357. }
  358. } catch (IOException e) {
  359. e.printStackTrace();
  360. }
  361. }
  362. if (imageFile != null) {
  363. Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(
  364. imageFile.getPath(), columnWidth);
  365. if (bitmap != null) {
  366. imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);
  367. }
  368. }
  369. }
  370. /**
  371. * 获取图片的本地存储路径。
  372. *
  373. * @param imageUrl
  374. *            图片的URL地址。
  375. * @return 图片的本地存储路径。
  376. */
  377. private String getImagePath(String imageUrl) {
  378. int lastSlashIndex = imageUrl.lastIndexOf("/");
  379. String imageName = imageUrl.substring(lastSlashIndex + 1);
  380. String imageDir = Environment.getExternalStorageDirectory()
  381. .getPath() + "/PhotoWallFalls/";
  382. File file = new File(imageDir);
  383. if (!file.exists()) {
  384. file.mkdirs();
  385. }
  386. String imagePath = imageDir + imageName;
  387. return imagePath;
  388. }
  389. }
  390. }

MyScrollView是实现瀑布流照片墙的核心类，这里我来重点给大家介绍一下。首先它是继承自ScrollView的，这样就允许用户可以通过滚动的方式来浏览更多的图片。这里提供了一个loadMoreImages()方法，是专门用于加载下一页的图片的，因此在onLayout()方法中我们要先调用一次这个方法，以初始化第一页的图片。然后在onTouch方法中每当监听到手指离开屏幕的事件，就会通过一个handler来对当前ScrollView的滚动状态进行判断，如果发现已经滚动到了最底部，就会再次调用loadMoreImages()方法去加载下一页的图片。

那我们就要来看一看loadMoreImages()方法的内部细节了。在这个方法中，使用了一个循环来加载这一页中的每一张图片，每次都会开启一个LoadImageTask，用于对图片进行异步加载。然后在LoadImageTask中，首先会先检查一下这张图片是不是已经存在于SD卡中了，如果还没存在，就从网络上下载，然后把这张图片存放在LruCache中。接着将这张图按照一定的比例进行压缩，并找出当前高度最小的一列，把压缩后的图片添加进去就可以了。

另外，为了保证照片墙上的图片都能够合适地被回收，这里还加入了一个可见性检查的方法，即checkVisibility()方法。这个方法的核心思想就是检查目前照片墙上的所有图片，判断出哪些是可见的，哪些是不可见。然后将那些不可见的图片都替换成一张空图，这样就可以保证程序始终不会占用过高的内存。当这些图片又重新变为可见的时候，只需要再从LruCache中将这些图片重新取出即可。如果某张图片已经从LruCache中被移除了，就会开启一个LoadImageTask，将这张图片重新加载到内存中。

然后打开或新建activity_main.xml，在里面设置好瀑布流的布局方式，如下所示：

[html] view plaincopy

  1. <com.example.photowallfallsdemo.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/my_scroll_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5. <LinearLayout
  6. android:layout_width="match_parent"
  7. android:layout_height="wrap_content"
  8. android:orientation="horizontal" >
  9. <LinearLayout
  10. android:id="@+id/first_column"
  11. android:layout_width="0dp"
  12. android:layout_height="wrap_content"
  13. android:layout_weight="1"
  14. android:orientation="vertical" >
  15. </LinearLayout>
  16. <LinearLayout
  17. android:id="@+id/second_column"
  18. android:layout_width="0dp"
  19. android:layout_height="wrap_content"
  20. android:layout_weight="1"
  21. android:orientation="vertical" >
  22. </LinearLayout>
  23. <LinearLayout
  24. android:id="@+id/third_column"
  25. android:layout_width="0dp"
  26. android:layout_height="wrap_content"
  27. android:layout_weight="1"
  28. android:orientation="vertical" >
  29. </LinearLayout>
  30. </LinearLayout>
  31. </com.example.photowallfallsdemo.MyScrollView>

可以看到，这里我们使用了刚才编写好的MyScrollView作为根布局，然后在里面放入了一个直接子布局LinearLayout用于统计当前滑动布局的高度，然后在这个布局下又添加了三个等宽的LinearLayout分别作为第一列、第二列和第三列的布局，这样在MyScrollView中就可以动态地向这三个LinearLayout里添加图片了。

最后，由于我们使用到了网络和SD卡存储的功能，因此还需要在AndroidManifest.xml中添加以下权限：

[html] view plaincopy

  1. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  2. <uses-permission android:name="android.permission.INTERNET" />

这样我们所有的编码工作就已经完成了，现在可以尝试运行一下，效果如下图所示：

瀑布流模式的照片墙果真非常美观吧，而且由于我们有非常完善的资源释放机制，不管你在照片墙上添加了多少图片，程序占用内存始终都会保持在一个合理的范围内。

瀑布流照片墙与图片缓存的完美结合

时间： 2024-10-08 08:42:28

瀑布流照片墙与图片缓存的完美结合的相关文章

Android瀑布流照片墙实现，体验不规则排列的美感

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10470797 传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个

Android瀑布流照片墙实现，体验不规则排列的美感Demo

Android瀑布流照片墙实现,体验不规则排列的美感Demo.略有逼格~ 下载地址:http://www.devstore.cn/code/info/637.html

Android不规则瀑布流照片墙的实现+LruCache算法

可以想象的出,不规则的瀑布照片墙是ScrollView内嵌一个横向的LinearLayout再内嵌三个纵向的LinearLayout. 如果不停地往LinearLayout里添加图片,程序很快就会OOM.因此我们还需要一个合理的方案来对图片资源进行释放,这里仍然是准备使用LruCache算法 TravlesFragment: package com.francis.changtravels.fragment; import android.os.Bundle; import android.su

android瀑布流照片墙实现代码详解

照片墙的实现,是需要往手机里面添加很多图片的,如果没有对资源进行合理的释放,程序很快就会出现OOM.所以需要用到LruCache算法来缓存图片. 1,首先是图片资源类,这个类中包含了很多图片链接. public class AllImages { public final static String[] imageUrls = new String[] { "http://img.my.csdn.net/uploads/201309/01/1378037235_3453.jpg", &

js实现瀑布流加载图片效果

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1.设定一行中的列数:2.取第一行中每一个div的高度并把每一个高度放进一个数组中:3.算出数组中最小高度的index值:4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值:5.以此类推实现多栏布局的瀑布流效果:6.如果最后一张div的高度

PHP+jquery 瀑布流+LightBox图片盒子特效

最近在做一个网站,要对很多图片排版,想到了瀑布流,不过瀑布流是实现了,但是需要查看大图片,于是将瀑布流和LightBox图片盒子很好的结合了起来,可在当前页使用Lightbox放大瀑布流中的缩略图,有需要的可下载使用. 完整代码下载:waterwall_lightbox.rar 效果在线显示:http://www.codesc.net/other/waterwall_lightbox/index.php

图片瀑布流

前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明FineUI旺盛的生命力!).在这 5 年七年,FineUI总共发布了 100 多个版本!也积攒了大量的典型案例. 然而一直以来,FineUI的典型案例都是在论坛上以帖子的形式进行展示,没有一个集中展示的地方.今天我们就使用前段时间比较流行的瀑布流来解决FineUI典型案例的展示问题.最终的显示效果如下图所

安卓中的瀑布流

过年没回家,宅在家里看了很多博客,顺手写一下自己的一些收货.. android中的瀑布流的实现原理,来自郭大神的CSDN 转载注明出处http://blog.csdn.net/guolin_blog/article/details/10470797 实现原理:瀑布流的布局方式虽然看起来好像排列的很随意,其实它是有很科学的排列规则的.整个界面会根据屏幕的宽度划分成等宽的若干列,由于手机的屏幕不是很大,这里我们就分成三列.每当需要添加一张图片时,会将这张图片的宽度压缩成和列一样宽,再按照同样的压缩比

Android瀑布流照片

http://blog.csdn.net/guolin_blog/article/details/10470797 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于“墙”上的每张图片大小都相同的情况,如果图片的大小参差不齐,在GridView中显示就会非常的难看.而使用瀑布流的布局方式就可以很好地解决这个问题,因此今天我们也来赶一下潮流,看看如何在Android上实现瀑布流照片墙的功能. 首先还是讲一下