iOS 两种方式实现瀑布流效果剑客篇(欢迎提建议和分享经验)

来源:互联网 发布:java回文数算法 编辑:程序博客网 时间:2024/05/23 13:46
一般来说瀑布流主要有两种实现方式。方法一:使用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填充 


}

详细实现请参照:http://www.oschina.net/code/snippet_730880_16275

方法一实现起来相对比较简单。但是也有些弊端: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



以上两种方法都是有点旧了,但是效果还算可以,大家有什么更好的可以推荐,有什么问题和建议直接评论

0 0
原创粉丝点击