iOS - Masonry与ScrollView使用注意

先上图

说明

在咱们在APP开发的过程当中,不免想要使用 UIScrollView 结合 Masonry 的布局方式, 如何让系统帮咱们自动计算高度呢?

咱们先上代码

//
//  ViewController.m
//  Log
//
//  Created by xxzx on 2018/11/23.
//  Copyright © 2018 xxzx. All rights reserved.
//

#import "ViewController.h"
#import <Masonry.h>

@interface ViewController ()

// scrollView
@property (nonatomic, strong) UIScrollView *scrollView;
// 约束参照视图,也是容器视图
@property (nonatomic, strong) UIView *contentView;
// 第一个测试view
@property (nonatomic, strong) UIView *oneView;
// 第二个测试view
@property (nonatomic, strong) UIView *twoView;
// 第三个测试view
@property (nonatomic, strong) UIView *threeView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1. 添加scrollView
    [self.view addSubview:self.scrollView];
    // 2. 添加参照视图
    [self.scrollView addSubview:self.contentView];
    // 3. 添加第一个测试view
    [self.contentView addSubview:self.oneView];
    // 4. 添加第二个测试view
    [self.contentView addSubview:self.twoView];
    // 5. 添加第三个测试view
    [self.contentView addSubview:self.threeView];
}

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // 布局子控件
    // 设置scrollView约束
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    // 设置参照视图的约束
    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
//        make.height.greaterThanOrEqualTo(@0.0f);
    }];
    // 第一个测试view的约束
    [self.oneView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView).offset(30);
        make.left.equalTo(self.contentView);
        make.width.mas_equalTo(200);
        make.height.mas_equalTo(300);
    }];
    // 第二个测试view的约束
    [self.twoView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.oneView.mas_bottom).offset(50);
        make.right.equalTo(self.contentView);
        make.width.mas_equalTo(400);
        make.height.mas_equalTo(500);
    }];
    // 第三个测试view的约束
    [self.threeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.twoView.mas_bottom).offset(70);
        make.left.right.equalTo(self.contentView);
        make.height.mas_equalTo(300);
    }];
    // 最后设置最后一个view的与参照容器view的约束
    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.threeView.mas_bottom).offset(-10);
    }];
}

#pragma mark - getters
// scrollView
- (UIScrollView *)scrollView {
    if (_scrollView == nil) {
        _scrollView = [[UIScrollView alloc] init];
        _scrollView.backgroundColor = [UIColor grayColor];
    }
    return _scrollView;
}
// 约束参照视图
- (UIView *)contentView {
    if (_contentView == nil) {
        _contentView = [[UIView alloc] init];
        _contentView.backgroundColor = [UIColor yellowColor];
    }
    return _contentView;
}
// 第一个测试view
- (UIView *)oneView {
    if (_oneView == nil) {
        _oneView = [[UIView alloc] init];
        _oneView.backgroundColor = [UIColor redColor];
    }
    return _oneView;
}
// 第二个测试view
- (UIView *)twoView {
    if (_twoView == nil) {
        _twoView = [[UIView alloc] init];
        _twoView.backgroundColor = [UIColor blueColor];
    }
    return _twoView;
}
// 第三个测试view
- (UIView *)threeView {
    if (_threeView == nil) {
        _threeView = [[UIView alloc] init];
        _threeView.backgroundColor = [UIColor greenColor];
    }
    return _threeView;
}

@end

复制代码

注意点

咱们须要注意的有几点

• 想要保证可以使用一个View的布局咱们须要知足上下左右四个约束, 或者说是位置和大小
• 咱们须要一个参照View, 用来做容器视图, scrollView添加这个容器视图, 以后全部的view都要参照这个容器视图做约束
• 咱们约束通常有两种方式 1 .经过父视图约束子视图 2. 子视图撑开父视图. 总之, 咱们对于这个参照容器视图要有一个上下左右的约束

咱们要么就得知道父视图的最大宽度和最大高度约束子视图或者知道子视图的大小撑开父视图. 代码中只列举了知道子视图去撑开父视图的状况. 有问题下方留言便可!