masonry实现不规则图片布局【图】

版权声明：原创文章，未经博主允许禁止转载。欢迎点击头像上方“郭晓东的专栏”查看专栏 https://blog.csdn.net/hherima/article/details/78412323

直接上代码，思路是：将那一推图片分为四列，每一列是上下对齐的，每列通过循环调用masonry实现。不要使用按钮，因为button的setImage跟title的同时显示比较难搞。索性用UIImageView+UILabel时间。其中self.screenSize是用于4s，5s，6s及以上适配用的

- (void)viewDidLoad {
    [super viewDidLoad];
    UIWindow* window = [UIApplication sharedApplication].keyWindow;
    if(window.height < (480 + 1)){/*4s*/
        self.screenSize = .7;
    }else if(window.height < 568 +1){/*5s*/
        self.screenSize = .8;
    }else{
        self.screenSize = 1.0;
    }
    self.hobbyScroller2 = [[UIView alloc]initWithFrame:self.view.bounds];
    self.hobbyScroller2.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.hobbyScroller2]
}
    -(void) layoutHobbyView{
    UIImageView* headerView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bg_top"]];/*不能缩放*/
    headerView.contentMode = UIViewContentModeScaleAspectFill;
    [self.hobbyScroller2 addSubview:headerView];
    headerView.width = self.view.width;
    headerView.height = self.view.width * headerView.image.size.height/headerView.image.size.width;
    [headerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.hobbyScroller2);
    }];
    
    UIButton *closeGender = [[UIButton alloc] init];
    [closeGender setImage:[UIImage imageNamed:@"icon_close.png"] forState:UIControlStateNormal];
    closeGender.backgroundColor = [UIColor clearColor];
    [closeGender addTarget:self action:@selector(close:) forControlEvents:UIControlEventTouchUpInside];
    [self.hobbyScroller2 addSubview:closeGender];
    [closeGender mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.hobbyScroller2).offset(14 + iPhoneX?44:0.0);
        make.left.equalTo(self.hobbyScroller2.mas_left).offset(6);
    }];
    
    self.hobbyAvatarView = [[UIImageView alloc]initWithImage:[[UIImage imageNamed:@"avatar_boy"]imageByZooming:self.screenSize]];
    [self.hobbyScroller2 addSubview:self.hobbyAvatarView];
    [self.hobbyAvatarView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(headerView.mas_bottom).offset(-65 +(iPhoneX?10:0.0));
        make.centerX.equalTo(self.hobbyScroller2.mas_centerX);
    }];
    
    UILabel* genderTitle = [[UILabel alloc]init];
    genderTitle.textColor = UIColorV6_585858;
    genderTitle.text = @"选择你的兴趣";
    genderTitle.font = [UIFont boldSystemFontOfSize:22*self.screenSize];
    genderTitle.textAlignment = NSTextAlignmentCenter;
    [self.hobbyScroller2 addSubview:genderTitle];
    [genderTitle mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.hobbyAvatarView.mas_bottom).offset(10*self.screenSize);
        make.centerX.equalTo(self.hobbyScroller2.mas_centerX);
    }];
    
    UILabel* genderDes = [[UILabel alloc]init];
    genderDes.textColor = UIColorV6_585858;
    genderDes.text = @"让推荐更懂你所爱";
    genderDes.font = [UIFont systemFontOfSize:14*self.screenSize];
    genderDes.textAlignment = NSTextAlignmentCenter;
    [self.hobbyScroller2 addSubview:genderDes];
    [genderDes mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(genderTitle.mas_bottom).offset(5);
        make.centerX.equalTo(genderTitle.mas_centerX);
    }];
    
    
    UIView* preView;
    CGFloat columnWidth = (self.view.width - 24)/4.0;
    for (int i=0; i<12; i++) {
        UIImage* name = [UIImage imageWithNameIdentifier:@"circle_male"  scale:self.screenSize];
        UIImageView* hobby = [[UIImageView alloc]initWithImage:name];
        hobby.tag = i;
        hobby.userInteractionEnabled = YES;
        hobby.contentMode = UIViewContentModeScaleAspectFit;
        [self.hobbyScroller2 addSubview:hobby];
        
        /*gesture*/
        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hobbyGretureRecognizer:)];
        [hobby addGestureRecognizer:tapGestureRecognizer];
        
        /*layout*/
        [hobby mas_makeConstraints:^(MASConstraintMaker *make) {
            if (i%columnRowNum == 0) {
                make.centerX.equalTo(self.hobbyScroller2.mas_left).offset(12 + columnWidth/2.0 + (i/columnRowNum*columnWidth));
                make.centerY.equalTo(genderDes.mas_bottom).offset(70*self.screenSize+ (i/columnRowNum%2 ? 80*self.screenSize - (i/columnRowNum*10):0));
            }else {
                make.centerX.equalTo(preView.mas_centerX);
                make.centerY.equalTo(preView.mas_centerY).offset(100*self.screenSize);
            }
        }];
        /*title*/
        UILabel* hobbyTtile = [[UILabel alloc]init];
        hobbyTtile.textColor = UIColorV6_5C5F5D;
        hobbyTtile.text = [self.hobbyData objectOrNilAtIndex:i];
        hobbyTtile.numberOfLines = 0;
        hobbyTtile.font = [UIFont systemFontOfSize:14*self.screenSize];/*默认值*/
        hobbyTtile.textAlignment = NSTextAlignmentCenter;
        hobbyTtile.lineBreakMode = NSLineBreakByTruncatingTail|NSLineBreakByWordWrapping;
        hobbyTtile.tag = 1000 + hobby.tag;
        [self.hobbyScroller2 addSubview:hobbyTtile];
        /*这里将title加到hobbyScroller2上，因为加载hobby上，其masonry在动画时候不起作用*/
        [hobbyTtile mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(smallTitleWidth*self.screenSize);/*默认是small Title Width*/
            make.height.mas_equalTo(smallTitleWidth*self.screenSize);
            make.centerY.equalTo(hobby.mas_centerY);
            make.centerX.equalTo(hobby.mas_centerX);
        }];
        /*save previe*/
        preView = hobby;
    }
    
    
    UIButton* preButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 48*self.screenSize, 22)];
    [preButton setTitle:@"上一步" forState:UIControlStateNormal];
    [preButton.titleLabel setFont:[UIFont boldSystemFontOfSize:16*self.screenSize]];
    [preButton setTitleColor:UIColorV5_969696 forState:UIControlStateNormal];
    [preButton addTarget:self action:@selector(preStep) forControlEvents:UIControlEventTouchUpInside];
    [self.hobbyScroller2 addSubview:preButton];
    [preButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.hobbyScroller2.mas_left).offset(36);
        CGFloat offset = iPhoneX ? 34:0.0;
        make.bottom.equalTo(self.hobbyScroller2.mas_bottom).offset(-27*self.screenSize-offset);
    }];
    
    
    self.hobbyStartBtn = [[UIButton alloc] init];
    [self.hobbyStartBtn setImage:[[UIImage imageNamed:@"btn_start_dis"]imageByZooming:self.screenSize] forState:UIControlStateNormal];
    [self.hobbyStartBtn setImage:[[UIImage imageNamed:@"btn_start_pre"]imageByZooming:self.screenSize] forState:UIControlStateSelected|UIControlStateHighlighted];
    self.hobbyStartBtn.backgroundColor = [UIColor clearColor];
    [self.hobbyStartBtn addTarget:self action:@selector(hobbyStart) forControlEvents:UIControlEventTouchUpInside];
    [self.hobbyScroller2 addSubview:self.hobbyStartBtn];
    
    [self.hobbyStartBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(preButton.mas_right).offset(20);
        make.centerY.equalTo(preButton.mas_centerY);
    }];
}

-(void) close:(id)btn{
    self.view.backgroundColor = [UIColor clearColor];
    [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.scrollView.top = self.view.bottom;
    } completion:^(BOOL finished) {
        [self willMoveToParentViewController:nil];
        [self.view removeFromSuperview];
        [self removeFromParentViewController];
        
        if (self.finishBlock) {
            self.finishBlock(btn==nil && self.hobbyStartBtn.tag > 0 );
        }
    }];
}
-(void)hobbyStart{
    if (self.hobbyStartBtn.tag > 0) {
        
        [self close:nil];
    }
}