iOS 自定义瀑布流相册控件

标签：

控件分为.h 和 .m文件

效果图

控件分为3列来显示

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

@protocol UIPhotosViewDelegate <NSObject>

// 当点击某个图片时，返回该图片所在的UIImageView,参数即返回的imageview
- (void)clickedWithView:(UIImageView *)view;

@end


@interface UIPhotosView : UIView <UIPhotosViewDelegate> {
    
}

@property (nonatomic, retain) 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

iOS 自定义瀑布流相册控件

标签：

原文地址：http://my.oschina.net/littleDog/blog/466172