瀑布流就是把圖片顯示在屏幕上，感覺像是瀑布一樣。
我們知道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