iOS瀑布流(UIScrollView或UITableView)和解决运行不流畅的问题

一般来说瀑布流主要有两种实现方式。方法一：使用UITableView。方法二：使用UIScrollView。

先介绍方法一（也是官方推荐的方式）

1. 总先做成几列是事先要清楚，有多少条记录。

2. 假设要做成3列，就用三个uitableview，宽度平均，高度动态，页面高度取uitableview中最高的。

3. 三个uitableview初始化的时候用到tag（我越来越觉得tag在ios中的用处很大，就像js中读取html控件中的id一样），然后 showsVerticalScrollIndicator和scrollEnabled设为no，separatorStyle设为 UITableViewCellSeparatorStyleNone，添加到UIview中。

获取高度

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 


{ 


return 当行记录数/列;


}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 


int arrIndex= 当前indexPath.row * 列(3)＋当前indexPath.column;| 


return [[XML/JSON objectAtIndex:arrIndex] objectForKey:@"高度"]; 
} 


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 


//从数据源中得到当前数组对应的数据，然后再用uitableviewcell填充


｝

方法一实现起来相对比较简单。但是也有些弊端：1，要操作三个UITableView，定位当前点中的cell比较麻烦。2.cell中的图片都是等高。在现实中图片大小是不一样的，有高有低。这个也是方法一很多的局限性 。所以推荐方法二。

方法二：

原理：在 UIScrollView上根据图片大小放置图片。这里就有两个问题：1.如何计算每张图片的起始位置。2.从性能考虑如何节省内存？这就需要一个cell的重用机制。

如果自己从头写，有如下的一些步骤：

1.基类是一个UIScrollView. 都是在此基础上操作。

2. 有些是直接使用cell(此cell非UITableVie中的cell，这里类似一个UIView)；有些再加一层UITableView（此步骤其实有点多余）。

3. 从网络中或配置文件获取图片的相关信息（title，width，height ,url等）。

4.根据图片相关信息，计算好UIView的起始位置并保存内存中（注意边界）。

5.reloadData,开始绘制cell(有网络请求，就使用SDWebImag库获取图片)。

6.若触发手势（轻扫，上下拖动）再绘制时是否有重用的cell（这些都是保存在内存中的）。

呵呵，上述6步是大概。没有什么实际作用（自己觉得）。就当我费话说了。

下面利用一个开源的库。提供个有效的demo（不然自己心里都过不去）

原地址：https://github.com/1000Memories/TMQuiltView

我在他基础上修改了下。

建立一个TestQuiltView工程。

拷贝以下文件并加入工程。

TMPhotoQuiltViewCell.h

TMPhotoQuiltViewCell.m

TMQuiltView.h

TMQuiltView.m

TMQuiltViewCell.h

TMQuiltViewCell.m

调用文件
//myTMQuiltViewController.h

#import <UIKit/UIKit.h>

#import "TMQuiltView.h"

#import "TMPhotoQuiltViewCell.h"

@interface myTMQuiltViewController : UIViewController <TMQuiltViewDataSource,TMQuiltViewDelegate> {

}

@property(strong,nonatomic)TMQuiltView *quiltView;

@property(strong,nonatomic)NSArray *images;

@end

//myTmQuiltViewController.m

#import "myTMQuiltViewController.h"

@interface myTMQuiltViewController ()

@end

#define kNumberOfCells 1000

@implementation myTMQuiltViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

if (self) {

// Custom initialization

}

return self;

}

- (void)dealloc {

[_quiltView release];

_quiltView = nil;

[_images release];

_images = nil;

[super dealloc];

}

- (void)viewDidLoad

{

[super viewDidLoad];

_quiltView = [[TMQuiltView alloc] initWithFrame:self.view.bounds];

_quiltView.dataSource = self;

_quiltView.delegate = self;

[self.view addSubview:_quiltView];

[_quiltView reloadData];

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

#pragma mark - QuiltViewControllerDataSource

- (NSArray *)images {

if (!_images) {

NSMutableArray *imageNames = [NSMutableArray array];

for(int i = 0; i < kNumberOfCells; i++) {

[imageNames addObject:[NSString stringWithFormat:@"%d.jpeg", i % 10 + 1]];

}

_images = [imageNames retain];

}

return _images;

}

- (UIImage *)imageAtIndexPath:(NSIndexPath *)indexPath {

return [UIImage imageNamed:[self.images objectAtIndex:indexPath.row]];

}

- (NSInteger)quiltViewNumberOfCells:(TMQuiltView *)TMQuiltView {

return [self.images count];

}

- (TMQuiltViewCell *)quiltView:(TMQuiltView *)quiltView cellAtIndexPath:(NSIndexPath *)indexPath {

TMPhotoQuiltViewCell *cell = (TMPhotoQuiltViewCell *)[quiltView dequeueReusableCellWithReuseIdentifier:@"PhotoCell"];

if (!cell) {

cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier:@"PhotoCell"] autorelease];

}

cell.photoView.image = [self imageAtIndexPath:indexPath];

cell.titleLabel.text = [NSString stringWithFormat:@"%d", indexPath.row + 1];

return cell;

}

#pragma mark - TMQuiltViewDelegate

- (NSInteger)quiltViewNumberOfColumns:(TMQuiltView *)quiltView {

return 2;

}

- (CGFloat)quiltView:(TMQuiltView *)quiltView heightForCellAtIndexPath:(NSIndexPath *)indexPath {

return [self imageAtIndexPath:indexPath].size.height / [self quiltViewNumberOfColumns:quiltView];

}

@end

在main中

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

_mytmquitviewcontroller = [[myTMQuiltViewController alloc] initWithNibName:nil bundle:nil];

[_mytmquitviewcontroller.view setBackgroundColor:[UIColor clearColor]];

[_window.rootViewController ＝_mytmquitviewcontroller;

｝

demo: http://download.csdn.net/detail/nogodoss/5238598
******************************************************************************************************************************************************************

解决运行不流畅的问题:

写的一个程序中用到了瀑布流的展现方式，但是发现当图片数量太大的时候，在iPhone4上会不流畅，这点很不爽。

写代码之初是做了一些优化的，比如cell重用，异步加载，但是还是很卡。

终于后来发现了症结所在，那就是，如果滑动太快，可能同时就发出了比如10个图片请求。这些请求虽然都在后台运行，但是它们可能在同一个时间点返回UI线程。这个时候如果加载图片到UIImageView太频繁，就会造成UI卡得严重。（虽然在new iPad和iPhone4s上看不出来）

在找到这个问题的同时，也发现performSelectorAfterDelay这个方法，会堆积到UI线程空闲的时候执行。而dispatch_after或者dispatch_async都会直接插入UI线程当场执行。所以这个问题其实可以用performSelectorAfterDelay来解决，测试也是非常流畅，感觉不出一点点的卡。但会出现新的问题，那就是在滑动过程中，不会加载任何图片。知道scrollView停止的时候，图片才会出来。当然这不是理想的解决方法了。这个方法也没有解决异步过程集中到达UI线程的问题。然后采用了NSOperationQueue来解决这个问题。

问题本身和UITableView加载不流畅是一样的。

解决办法

主要要做到一下几个方面：
除了UI部分，所有的加载操作都在后台完成。

这一点可以通过dispatch或者performSelectorInBackground或者NSOperationQueue来实现。见：

在iOS开发中利用GCD进行多线程编程

iOS开发中使用NSOperationQueue进行多线程操作
避免后台加载完成多个资源之后集中到达占用UI线程的处理时间太长。

这一点可以通过NSOperationQueue来实现，将资源到UI的展现过程放在队列中逐个执行，且在每个操作完成之后进行强制等待，可以用usleep(int microSeconds)来解决。
重用cell。

创建cell一般是很慢的，一定要重用，甚至为了performance，可以在view创建之初就创建足够多的cell在重用队列中。

转自：http://blog.unieagle.net/2012/08/31/%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3ios%E7%80%91%E5%B8%83%E6%B5%81uiscrollview%E6%88%96uitableview%E8%BF%90%E8%A1%8C%E4%B8%8D%E6%B5%81%E7%95%85/