瀑布流教程1

瀑布流就是把图片显示在屏幕上，感觉像是瀑布一样。

我们知道TableViewCell里面自定义的Cell可以放置ImageView,Label,Button,等等。但是，假如我要在一个Cell里面放置三张图片，点击图片的时候，是不能点击到Cell，并且能区分出我点击的是哪个图片。按照这种思路，我可以用自定义的“瀑布流”来装图片了。

我自定义的瀑布流固定列数为3列，行数是不能固定的。

第一步，自定义WaterFlowViewCell，类似于重写Cell的属性

//.h文件

#import <UIKit/UIKit.h>

@class IndexPath; //声明类

@interface WaterFlowViewCell : UIView

{

    int _columnCount; //列数

    IndexPath *_indexPath; //位置

    NSString *_strReuseIndentifier; //重用标识

}

@property (nonatomic,assign)int columnCount; 

@property (nonatomic, retain) IndexPath *indexPath;

@property (nonatomic,retain)NSString *strReuseIndentifier;

-(id)initWithIdentifier:(NSString *)indentifier;

-(void)relayoutViews;

@end

@interface IndexPath : NSObject

{

    int _row;       //行号

    int _column;    //列号

}

@property(nonatomic,assign)int row;

@property(nonatomic,assign)int column;

+(IndexPath *)initWithRow:(int)indexRow withColumn:(int)indexColumn; //类方法

@end

//.m文件

#import "WaterFlowViewCell.h"

@implementation WaterFlowViewCell

@synthesize columnCount = _columnCount;     //列数

@synthesize indexPath = _indexPath;   //位置

@synthesize strReuseIndentifier = _strReuseIndentifier;  //重用标识

-(id)initWithIdentifier:(NSString *)indentifier

{

if(self = [superinit])

{

self.strReuseIndentifier = indentifier;

}

return self;

}

- (void)dealloc

{

self.indexPath =nil;

self.strReuseIndentifier =nil;

[superdealloc];

}

@end

@implementation IndexPath

@synthesize row = _row,column =_column;

+(IndexPath *)initWithRow:(int)indexRow withColumn:(int)indexColumn{

    IndexPath *indexPath = [[IndexPathalloc]init];

    indexPath.row = indexRow;

    indexPath.column = indexColumn;

    return [indexPath autorelease];//autoRelease

}

@end

第二步，我们做一个自定义的ImageViewCell

由于我的图片是URL形式的，下载的图片需要用到解析，所以要加入两个三方库“SBJson”和"SDWebImage"这两个三方库很多地方都可以找到。

包含以下三个进去

#import <QuartzCore/QuartzCore.h>     //自带的，需导入

#import "WaterFlowViewCell.h"      //第一步自定义的

#import "UIImageView+WebCache.h"     //“SDWebImage”里的

//.h文件

#import <UIKit/UIKit.h>

#import <QuartzCore/QuartzCore.h>

#import "WaterFlowViewCell.h"

#import "UIImageView+WebCache.h"

@interface ImageViewCell : WaterFlowViewCell

{

    UIImageView *imageView;

}

-(void)setImageWithURL:(NSURL *)imageUrl;

-(void)setImage:(UIImage *)image;

-(void)relayoutViews;

@end

//.m文件

#import "ImageViewCell.h"

#define TOPMARGIN 8.0f

#define LEFTMARGIN 8.0f

#define IMAGEVIEWBG [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1.0]

@implementation ImageViewCell

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        // Initialization code

    }

    return self;

}

-(id)initWithIdentifier:(NSString *)indentifier

{

if(self = [superinitWithIdentifier:indentifier])

{

        imageView = [[UIImageViewalloc]init];

        imageView.backgroundColor =IMAGEVIEWBG;

        [self addSubview:imageView];

        

        imageView.layer.borderWidth =1;

        imageView.layer.borderColor = [[UIColorcolorWithRed:0.85green:0.85blue:0.85alpha:1.0]CGColor];

}

return self;

}

-(void)setImageWithURL:(NSURL *)imageUrl{

    [imageView setImageWithURL:imageUrl];

    

}

-(void)setImage:(UIImage *)image{

    imageView.image = image;

}

//保持图片上下左右有固定间距

-(void)relayoutViews{

    float originX = 0.0f;

    float originY = 0.0f;

    float width = 0.0f;

    float height = 0.0f;

    

    originY = TOPMARGIN;

    height = CGRectGetHeight(self.frame) -TOPMARGIN;

    if (self.indexPath.column ==0) {

        

        originX = LEFTMARGIN;

        width = CGRectGetWidth(self.frame) -LEFTMARGIN -1/2.0*LEFTMARGIN;

    }

             //位置的列  小于  列数减1

    elseif (self.indexPath.column <self.columnCount -1){

    

        originX = LEFTMARGIN/2.0;

        width = CGRectGetWidth(self.frame) -LEFTMARGIN;

    }else{

    

        originX = LEFTMARGIN/2.0;

        width = CGRectGetWidth(self.frame) -LEFTMARGIN -1/2.0*LEFTMARGIN;

    }

    imageView.frame =CGRectMake( originX, originY,width, height);

    

    [superrelayoutViews];

}

@end