iOSmasonry实现流水布局指南

一、什么是iOSmasonry

在开发iOS应用时，为了实现各种布局效果，我们经常需要手动设置控件的frame和约束。这不仅费时费力，而且还容易出现各种问题，比如屏幕旋转、不同设备屏幕尺寸等导致的布局异常。而iOSmasonry是一个轻量级的第三方库，它能够方便快捷地实现各种布局效果。

二、iOSmasonry实现流水布局

流水布局是一种灵活的布局方式，它根据控件的内容自适应宽度，实现像报纸、杂志等页面的自由排版效果。下面我们将从以下几个方面介绍如何使用iOSmasonry实现流水布局。

三、基础概念

iOSmasonry使用的是一种类似于自然语言的链式语法，因此需要我们先了解一些基础概念。

1. 约束：一个UIView的约束是指其在父视图中的位置、大小和间距等方面的限制条件。在iOSmasonry中，可以通过添加约束来实现各种布局效果。

2. MASViewAttribute：是一个用于描述UIView属性的具体对象。比如，可以通过MASViewAttribute.left来获取UIView的左边距。

3. MASConstraintMaker：是iOSmasonry中的一个全局对象，用于添加约束条件。

四、流水布局实现步骤

1. 添加UIScrollView

    UIScrollView *scrollView = [[UIScrollView alloc] init];
    [self.view addSubview:scrollView];
    [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

2. 添加容器UIView

流水布局需要将所有子控件添加到一个容器视图中，然后对这个容器视图添加约束条件。

    UIView *containerView = [[UIView alloc] init];
    [scrollView addSubview:containerView];
    [containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(scrollView);
        // 可以设置容器视图的宽度，也可以在后面添加子控件时设置宽度
        make.width.equalTo(scrollView);
    }];

3. 添加子控件

添加子控件时，需要注意设置好控件的顺序，以及控件之间的间距。这里以UILabel作为例子。

    NSArray *titles = @[ @"title1", @"title2", @"title3", @"title4", @"title5", @"title6", @"title7", @"title8", @"title9" ];
    UILabel *lastLabel = nil;
    for (NSString *title in titles) {
        UILabel *label = [[UILabel alloc] init];
        label.text = title;
        label.backgroundColor = [UIColor lightGrayColor];
        label.textAlignment = NSTextAlignmentCenter;
        [containerView addSubview:label];
        if (!lastLabel) {
            // 第一个控件的约束条件
            [label mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.left.bottom.equalTo(containerView);
                make.width.equalTo(@(100));
            }];
        } else {
            // 其他控件的约束条件
            [label mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(lastLabel);
                make.left.equalTo(lastLabel.mas_right).offset(10);
                make.width.equalTo(@(100));
            }];
        }
        lastLabel = label;
    }
    // 最后一个控件的约束条件
    [lastLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.right.equalTo(containerView);
    }];

五、完整代码示例

    UIScrollView *scrollView = [[UIScrollView alloc] init];
    [self.view addSubview:scrollView];
    [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

    UIView *containerView = [[UIView alloc] init];
    [scrollView addSubview:containerView];
    [containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(scrollView);
        make.width.equalTo(scrollView);
    }];

    NSArray *titles = @[ @"title1", @"title2", @"title3", @"title4", @"title5", @"title6", @"title7", @"title8", @"title9" ];
    UILabel *lastLabel = nil;
    for (NSString *title in titles) {
        UILabel *label = [[UILabel alloc] init];
        label.text = title;
        label.backgroundColor = [UIColor lightGrayColor];
        label.textAlignment = NSTextAlignmentCenter;
        [containerView addSubview:label];
        if (!lastLabel) {
            [label mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.left.bottom.equalTo(containerView);
                make.width.equalTo(@(100));
            }];
        } else {
            [label mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(lastLabel);
                make.left.equalTo(lastLabel.mas_right).offset(10);
                make.width.equalTo(@(100));
            }];
        }
        lastLabel = label;
    }
    [lastLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.right.equalTo(containerView);
    }];