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

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/10470797

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

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

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

[java] view plaincopy

.relpost{clear:both}

Tag：

Freenovo 发表于2013-10-01 22:06:00 | 编辑 | 分享　0

引用地址：