iOS 自定义瀑布流相册控件详解手机开发

该控件为自定义的实现瀑布流效果的控件，功能较为简单，并提供自定义delegate以供使用 功能会一步步完善起来 注意内存问题：不显示的image设成nil

控件分为.h 和 .m文件

效果图

控件分为3列来显示

1. .h文件包含协议声明和控件声明

@protocol UIPhotosViewDelegate <NSObject> 
  
// 当点击某个图片时，返回该图片所在的UIImageView,参数即返回的imageview 
- (void)clickedWithView:(UIImageView *)view; 
  
@end 
  
  
@interface UIPhotosView : UIView <UIPhotosViewDelegate> { 
      
} 
  
@property (nonatomic, assign) id<UIPhotosViewDelegate> delegate;  // 自定义协议 
  
@property (nonatomic, retain) UIView *leftView;                   // 左侧视图框 
@property (nonatomic, retain) UIView *midView;                    // 中间视图框 
@property (nonatomic, retain) UIView *rightView;                  // 右侧视图框 
  
@property (nonatomic, assign) CGFloat subWidth;                   // 视图框的宽度，即1/3 
  
- (void)addImage:(UIImage *)image;                                // 向控件加入一张图片 
  
@end

2. .m文件包含控件实现

@implementation UIPhotosView 
  
// 初始化 
- (id)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 
        _subWidth = frame.size.width / 3.0; 
          
        _leftView = [[UIView alloc] init]; 
        _leftView.frame = CGRectMake(0, 0, _subWidth, 1); 
        [self addSubview:_leftView]; 
          
        _midView = [[UIView alloc] init]; 
        _midView.frame = CGRectMake(_subWidth, 0, _subWidth, 1); 
        [self addSubview:_midView]; 
          
        _rightView = [[UIView alloc] init]; 
        _rightView.frame = CGRectMake(_subWidth*2, 0, _subWidth, 1); 
        [self addSubview:_rightView]; 
    } 
    return self; 
} 
  
// 加入图片 
- (void)addImage:(UIImage *)image { 
    CGFloat leftHeight = _leftView.frame.size.height; 
    CGFloat midHeight = _midView.frame.size.height; 
    CGFloat rightHeight = _rightView.frame.size.height; 
      
    UIImageView *view = [self createImageView:image];  // 创建imageview 
      
    CGFloat wid = _subWidth; 
    CGFloat hei = image.size.height / (image.size.width / _subWidth); 
      
    // 判断加入最短的view内 
    if (leftHeight <= midHeight && leftHeight <= rightHeight) { 
        [_leftView addSubview:view]; 
        view.frame = CGRectMake(0, leftHeight, wid, hei); 
        leftHeight = leftHeight + hei; 
        _leftView.frame = CGRectMake(0, 0, wid, leftHeight); 
    } 
    else if (midHeight <= rightHeight) { 
        [_midView addSubview:view]; 
        view.frame = CGRectMake(0, midHeight, wid, hei); 
        midHeight = midHeight + hei; 
        _midView.frame = CGRectMake(_subWidth, 0, wid, midHeight); 
    } 
    else { 
        [_rightView addSubview:view]; 
        view.frame = CGRectMake(0, rightHeight, wid, hei); 
        rightHeight = rightHeight + hei; 
        _rightView.frame = CGRectMake(_subWidth*2, 0, wid, rightHeight); 
    } 
      
    // 调整当前控件的frame 
    CGFloat maxnum = [self max:leftHeight and:midHeight and:rightHeight]; 
    self.frame = CGRectMake(0, 0, self.frame.size.width, maxnum); 
} 
  
// 创建imageview   并绑定事件 
- (UIImageView *)createImageView:(UIImage *)image { 
    UIImageView *view = [[UIImageView alloc] initWithImage:image]; 
    view.layer.borderWidth = 1.0; 
    view.layer.borderColor = [UIColor redColor].CGColor; 
      
    view.userInteractionEnabled = YES; 
    UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] init]; 
    [recognizer addTarget:self action:@selector(handleClicked:)]; 
    [view addGestureRecognizer:recognizer]; 
      
    return view; 
} 
  
// 点击view时获取imageview，传给delegate 
- (void)handleClicked:(UITapGestureRecognizer *)recognizer { 
    UIImageView *view = recognizer.view; 
    [self.delegate clickedWithView:view]; 
} 
  
- (CGFloat)max:(CGFloat)n1 and:(CGFloat)n2 and:(CGFloat)n3 { 
    CGFloat maxnum = n1 > n2 ? n1 : n2; 
    maxnum = maxnum > n3 ? maxnum : n3; 
    return maxnum; 
} 
  
@end