美文网首页
Masonry多行多列布局

Masonry多行多列布局

作者: 王煜仁 | 来源:发表于2021-03-16 17:34 被阅读0次
    for (UIView *view in self.containerView.subviews) {
        [view removeFromSuperview];
    }
    UIView *firstView;/// 记录每行第一个view
    UIView *lastView;/// 记录当前view
    CGFloat space = 25.f;/// 这个间距设置的是子控件距离父视图上下左右以及子视图之间的间距,请根据需要设置相关参数
    int col = 3;/// 定义列数
    for (int i = 0; i < 控件数量数组.count; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = UIColor.redColor;
        [self.containerView addSubview:view];
        if (i % col == 0) {
            firstView = view;
        }
        if (lastView) {
            if (i % col == 0) {
                [view mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.top.equalTo(lastView.mas_bottom).offset(space);
                    make.left.equalTo(self.containerView).offset(space);
                    make.width.equalTo(lastView);
                }];
            } else {
                [view mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.left.equalTo(lastView.mas_right).offset(space);
                    make.top.width.equalTo(lastView);
                    if (i % col == col - 1) {///这边是设置每行最后一个view的约束
                        make.right.equalTo(self.containerView).offset(-space);
                    }
                }];
            }
        } else {
            [view mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(self.containerView).offset(12);
                make.left.equalTo(self.containerView).offset(space);
            }];
        }
        lastView = view;
    }
  /// 添加最后一个view的bottom约束,这样就可以撑开整个containerView了,可以做到根据控件数量自适应高度
    [lastView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.containerView).offset(-25);
    }];

这是我写在自定义视图中的布局,请根据需要做相应调整,核心代码已贴出

相关文章

  • Masonry多行多列布局

    这是我写在自定义视图中的布局,请根据需要做相应调整,核心代码已贴出

  • CSS Grid和Flexbox

    Flexbox(弹性盒)用于一维布局 —— 也就是行或者列. 网格用于二维布局 —— 也就是多行多列.https:...

  • css

    一:布局 浮动:做文字环绕效果 弹性盒:单行或单列布局 网格:多行多列布局 1、弹性盒 详细文档见MDN[http...

  • iOS masonry九宫格 单行 多行布局

    iOS masonry九宫格 单行 多行布局 Masonry是个好东西,在当前尺寸各异的iOS开发适配中发挥着至关...

  • UITableView autolayout的tableHead

    使用masonry给tableHeadView 添加各种子View,并做好布局 对子View中多行的UILabel...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • flex布局--语法篇

    flex简介 当我们需要多行多列自适应,任意行对齐时。便可用flex布局实现。Flex是Flexible Box的...

  • Python 调节子图大小

    1,subplot子图位置 2,不规则多行多列 3 ,子图布局 传入四元参数[x, y, width, heigh...

  • iOS局部圆角

    注意 Masonry布局时,要在Masonry布局后调用

网友评论

      本文标题:Masonry多行多列布局

      本文链接:https://www.haomeiwen.com/subject/lzbdcltx.html