ios - 如何用 masonry 根据传进来的个数动态的布局子视图

Question

我现在想自定义一个控件, 该控件初始化的时候会传入一个数组,我需要根据数组的个数创建若干个UIButton

button的宽度是根据控件的宽度和各button的间距算出来的, button之间等间距..

请问这种情况如何用masonry来布局这些button? (这个控件也需要用Masonry进行约束, 所以不会给它的frame赋值)

我将我使用masonry前后的代码贴了出来, 关键点height和width我用问好代替了,希望大神们能够赐教!

不使用masonry是这样布局 :

- (instancetype)initWithFrame:(CGRect)frame items:(NSArray<NSString *> *)items
{
    if (self = [super initWithFrame:frame]) {
        
        self.backgroundColor = YZ_WhiteColor;
        
        NSInteger count = items.count;
        
        for (int i = 0; i < count; i++) {
            
            NSInteger width  = (self.bounds.size.width - margin * 2 - (count - 1) * gap) / count;
            NSInteger height = btnHeight;
            NSInteger x = margin + i * (gap + width);
            NSInteger y = 10;
            
            UIButton *btn = [self buttonForToolBarWithTitle:items[i]];
            btn.frame = CGRectMake(x, y, width, height);
            btn.tag = 100 + i;
            btn.layer.cornerRadius = 5;
        }
    }
    return self;
}

使用masonry布局 :

- (instancetype)initWithFrame:(CGRect)frame items:(NSArray<NSString *> *)items
{
    if (self = [super initWithFrame:frame]) {
        
        self.backgroundColor = YZ_WhiteColor;
        
        NSInteger count = items.count;
        
        for (int i = 0; i < count; i++) {
            
            UIButton *btn = [self buttonForToolBarWithTitle:items[i]];
            btn.tag = 100 + i;
            btn.layer.cornerRadius = 5;
            
            [btn mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.equalTo(self);
                make.height.mas_equalTo(btnHeight);
                make.width.equalTo(???);
                make.left.equalTo(???);
            }];
        }
    }
    return self;
}

Answer 1

I got the answer by referring to Masonry给出的Demo

- (instancetype)initWithItems:(NSArray <NSString *>*)items
{
    if (self = [super initWithFrame:CGRectZero]) {
        
        self.backgroundColor = YZ_WhiteColor;
        
        NSInteger count = items.count;
        NSMutableArray *arr = @[].mutableCopy;
        
        for (int i = 0; i < count; i++) {
            
            UIButton *btn = [self buttonForToolBarWithTitle:items[i]];
            btn.tag = 100 + i;
            btn.layer.cornerRadius = 5;
            [arr addObject:btn];
        }
        
        if (count > 1) {
            [arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:gap leadSpacing:margin tailSpacing:margin];
            [arr mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.equalTo(self);
                make.height.mas_equalTo(btnHeight);
            }];
        }
        else {
            [self.subviews.firstObject mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.equalTo(self);
                make.height.mas_equalTo(btnHeight);
                make.left.equalTo(self).offset(margin);
                make.right.equalTo(self).offset(-margin);
            }];
        }
    }
    return self;
}

Answer 2

大概是这样：
- (instancetype)initWithFrame:(CGRect)frame items:(NSArray<NSString *> *)items
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = YZ_WhiteColor;
        NSInteger count = items.count;
        
        UIButton *lastButton = nil;
        for (int i = 0; i < count; i++) {
            UIButton *btn = [self buttonForToolBarWithTitle:items[i]];
            btn.tag = 100 + i;
            btn.layer.cornerRadius = 5;
            NSInteger width  = (self.bounds.size.width - margin * 2 - (count - 1) * gap) / count;
            [btn mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.equalTo(self);
                make.height.mas_equalTo(btnHeight);
                make.width.equalTo(width);
                
                if (lastButton) {
                    make.left.equalTo(lastButton.mas_right).offset(margin);
                }else{
                    make.left.equalTo(self).offset(margin);
                }
            }];
            lastButton = btn;
        }
    }
    return self;
}

Answer 3

Wouldn’t it be better to set the width of all buttons to be equal