ios瀑布流

通常來講瀑布流主要有兩種實現方式。方法一:使用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;}

相關文章
相關標籤/搜索