通常来讲瀑布流主要有两种实现方式。方法一:使用UITableView。方法二:使用UIScrollView。
先介绍方法一(也是官方推荐的方式)
1. 总先作成几列是事先要清楚,有多少条记录。
2. 假设要作成3列,就用三个uitableview,宽度平均,高度动态,页面高度取uitableview中最高的。
3. 三个uitableview初始化的时候用到tag(我愈来愈以为tag在ios中的用处很大,就像js中读取html控件中的id同样),而后 showsVerticalScrollIndicator和scrollEnabled设为no,separatorStyle设为 UITableViewCellSeparatorStyleNone,添加到UIview中。
获取高度html
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section ios
{ git
return 当行记录数/列;github
} 数组
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 网络
int arrIndex= 当前indexPath.row * 列(3)+当前indexPath.column;| app
return [[XML/JSON objectAtIndex:arrIndex] objectForKey:@"高度"]; } 性能
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ ui
//从数据源中获得当前数组对应的数据,而后再用uitableviewcell填充 atom
}
方法一实现起来相对比较简单。可是也有些弊端: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;}