iOS开发之瀑布流

想必大家已经对互联网传统的照片布局方式司空见惯了，这种行列分明的布局虽然对用户来说简洁明了，但是长久的使用难免会产生审美疲劳。现在网上流行一种叫做“瀑布流”的照片布局样式，这种行与列参差不齐的状态着实给用户眼前一亮的感觉，这种不规则的方式也吸引着我，现在我们就来一起实现它吧 ：）
首先我们来看一下这种样式布局是如何体现的，请看示意图：

别看这种界面的布局好像毫无规律，其实它的排列还是很有规则的。我们拿手机屏幕举个例子，我们把屏幕等宽的划分为几个区域，由于手机屏幕比较小，我们就按照网上
最普遍的把屏幕分为等宽的三列，然后将图片加载在每一列中，在加入到列之前，要先判断哪一列的高度最低，然后把图片加到列高度最低的那列中。听起来是不是有些拗口，说简单点就是“哪列高度低就加哪”，这样听我一说是不是觉得原理其实很简单嘛！
下面我们就来用程序去实现他吧！首先看一张效果图。

新建一个Xcode工程，名字随便取吧（或者叫Album都可以）,然后新建三个类，分别是：MainViewController用于控制主界面， MyScrollView继承自UIScrollView用于控制界面滚动，以及图片的管理类ImageLoader。
我们先来看一下ImageLoader类，它是一个图片的处理类，负责对取到的图片进行等比例压缩，以至于加载到UImageView中时不会失真，代码如下：

[objc]  view plain   copy

 

1. #import "ImageLoader.h"  
2.   
3. @interface ImageLoader ()  
4.   
5. @end  
6.   
7. @implementation ImageLoader  
8. @synthesize imagesArray = _imagesArray;  
9.   
10. + (ImageLoader *)shareInstance{  
11.     static ImageLoader *loader = nil;  
12.     static dispatch_once_t onceToken;  
13.     dispatch_once(&onceToken, ^{  
14.         loader = [[ImageLoader alloc] init];  
15.     });  
16.     return loader;  
17. }  
18.   
19. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
20. {  
21.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
22.     if (self) {  
23.         // Custom initialization  
24.     }  
25.     return self;  
26. }  
27.   
28. - (void)viewDidLoad  
29. {  
30.     [super viewDidLoad];  
31.     // Do any additional setup after loading the view.  
32. }  
33.   
34. /*加载图片*/  
35. - (void)loadImage:(NSMutableArray *)array{  
36.     self.imagesArray = array;  
37. }  
38.   
39. /* 
40.  压缩图片，根据图片的大小按比例压缩 
41.  width:每列试图的宽度 
42.  返回一个UIImageView 
43.  */  
44. - (UIImageView *)compressImage:(float)width imageName:(NSString *)name{  
45.     UIImageView *imgView = [[UIImageView alloc] init];  
46.     imgView.image = [UIImage imageNamed:name];  
47.       
48.     float orgi_width = [imgView image].size.width;  
49.     float orgi_height = [imgView image].size.height;  
50.       
51.     //按照每列的宽度，以及图片的宽高来按比例压缩  
52.     float new_width = width - 5;  
53.     float new_height = (width * orgi_height)/orgi_width;  
54.       
55.     //重置imageView的尺寸  
56.     [imgView setFrame:CGRectMake(0, 0, new_width, new_height)];  
57.       
58.     return imgView;  
59. }  
60.   
61. - (void)didReceiveMemoryWarning  
62. {  
63.     [super didReceiveMemoryWarning];  
64.     // Dispose of any resources that can be recreated.  
65. }  
66.   
67. - (void)dealloc{  
68.     [self.imagesArray release];  
69.     [super dealloc];  
70. }  
71.   
72. @end  

这里将ImageLoader类设置成了单例，以便于在MainViewContrioller和MyScrollView中获取。
下面是MyScrollView的代码片段：

[objc]  view plain   copy

 

1. #import "MyScrollView.h"  
2.   
3. #define COORDINATE_X_LEFT 5  
4. #define COORDINATE_X_MIDDLE MY_WIDTH/3 + 5  
5. #define COORDINATE_X_RIGHT MY_WIDTH/3 * 2 + 5  
6. #define PAGESIZE 21  
7.   
8. @interface MyScrollView ()  
9.   
10. @end  
11.   
12. @implementation MyScrollView  
13. @synthesize mainScroll = _mainScroll;  
14. @synthesize isOnce = _isOnce;  
15. @synthesize imagesName = _imagesName;  
16. @synthesize loadedImageDic = _loadedImageDic;  
17. @synthesize leftColumHeight = _leftColumHeight;  
18. @synthesize midColumHeight = _midColumHeight;  
19. @synthesize rightColumHeight = _rightColumHeight;  
20. @synthesize loadedImageArray = _loadedImageArray;  
21. @synthesize imgTag = _imgTag;  
22. @synthesize imgTagDic = _imgTagDic;  
23. @synthesize imageLoad = _imageLoad;