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);
    }];