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. 子視圖撐開父視圖. 總之, 咱們對於這個參照容器視圖要有一個上下左右的約束

咱們要麼就得知道父視圖的最大寬度和最大高度約束子視圖或者知道子視圖的大小撐開父視圖. 代碼中只列舉了知道子視圖去撐開父視圖的狀況. 有問題下方留言便可!