iOS masonry九宫格 单行 多行布局

//九宫格布局单行
-(void)layoutOneLine{
    //单行布局 不需要考虑换行的问题
    CGFloatmarginX =10;  //按钮距离左边和右边的距离
    CGFloatmarginY =10;  //按钮距离布局顶部的距
    CGFloattoTop =50;  //布局区域距离顶部的距离
    CGFloatgap =10;    //按钮与按钮之间的距离
    NSIntegercol =5;    //这里只布局5列
    NSIntegercount =5;  //这里先设置布局5个按钮
    CGFloat viewWidth = self.view.bounds.size.width;  //视图的宽度
    CGFloat viewHeight = self.view.bounds.size.height;  //视图的高度
    CGFloatitemWidth = (viewWidth - marginX *2- (col -1)*gap)/col*1.0f;  //根据列数 和 按钮之间的间距 这些参数基本可以确定要平铺的按钮的宽度
    CGFloatheight = itemWidth;  //按钮的高度可以根据情况设定 这里设置为相等
    UIButton*last =nil;  //上一个按钮
    //准备工作完毕 既可以开始布局了
    for(inti =0; i < count; i++) {
        UIButton*item = [selfbuttonCreat];
        [item setTitle:@(i).stringValue forState:UIControlStateNormal];
        [self.viewaddSubview:item];
        //布局
        [itemmas_makeConstraints:^(MASConstraintMaker*make) {
            //宽高是固定的，前面已经算好了
            make.width.mas_equalTo(itemWidth);
            make.height.mas_equalTo(height);
            //topTop距离顶部的距离，单行不用考虑太多，多行，还需要计算距离顶部的距离
            make.top.mas_offset(toTop+marginY);
            if(!last) {  //last为nil 说明是第一个按钮
                make.left.mas_offset(marginX);
            }else{
                //第二个或者后面的按钮 距离前一个按钮右边的距离都是gap个单位
                make.left.mas_equalTo(last.mas_right).mas_offset(gap);
            }
        }];
        last = item;
    }
}

    //九宫格布局多行 其实跟单行布局差不多，唯一要注意的是要判断换行的问题  为了体现差异，把两种单独写 代码确实有大量重复的
    //多行布局是支持单行的
-(void)layoutMultiLine{
    //多行布局 要考虑换行的问题
    CGFloatmarginX =10;  //按钮距离左边和右边的距离
    CGFloatmarginY =1;  //距离上下边缘距离
    CGFloattoTop =200;  //按钮距离顶部的距离
    CGFloatgapX =10;    //左右按钮之间的距离
    CGFloatgapY =10;    //上下按钮之间的距离
    NSIntegercol =5;    //这里只布局5列
    NSIntegercount =13;  //这里先设置布局任意个按钮
    CGFloat viewWidth = self.view.bounds.size.width;  //视图的宽度
    CGFloat viewHeight = self.view.bounds.size.height;  //视图的高度
    CGFloatitemWidth = (viewWidth - marginX *2- (col -1)*gapX)/col*1.0f;  //根据列数 和 按钮之间的间距 这些参数基本可以确定要平铺的按钮的宽度
    CGFloatitemHeight = itemWidth;  //按钮的高度可以根据情况设定 这里设置为相等
    UIButton*last =nil;  //上一个按钮
    //准备工作完毕 既可以开始布局了
    for(int i =0; i < count; i++) {
        UIButton*item = [selfbuttonCreat];
        [itemsetTitle:@(i).stringValue forState:UIControlStateNormal];
        [self.viewaddSubview:item];
        //布局
        [itemmas_makeConstraints:^(MASConstraintMaker*make) {
            //宽高是固定的，前面已经算好了
            make.width.mas_equalTo(itemWidth);
            make.height.mas_equalTo(itemHeight);
            //topTop距离顶部的距离，单行不用考虑太多，多行，还需要计算距离顶部的距离
            //计算距离顶部的距离 --- 根据换行
            CGFloattop = toTop + marginY + (i/col)*(itemHeight+gapY);
            make.top.mas_offset(top);
            if (!last || (i%col) == 0) {  //last为nil  或者(i%col) == 0 说明换行了 每行的第一个确定它距离左边边缘的距离
                make.left.mas_offset(marginX);
            }else{
                //第二个或者后面的按钮 距离前一个按钮右边的距离都是gap个单位
                make.left.mas_equalTo(last.mas_right).mas_offset(gapX);
            }
        }];
        last = item;
    }
}

内容转发于https://www.jianshu.com/p/8f7a47435e4f