Masonry裏UIScrollView的坑

時間 2019-11-11

標籤 masonry uiscrollview 简体版

原文原文鏈接

自從寫了介紹Masonry那篇文章之後就一直有人對UIScrollView的那個例子不是很理解 git

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

爲何要用一個container包含其餘subview?
爲何指定了edges 還要指定width? 不是畫蛇添足嗎?

那麼今天我就按照個人理解來講明一下這個問題github

梳理

直入主題要解釋以前的問題最重要的一個概念就是app

UIScrollView依靠與其subviews之間的約束來肯定ContentSize的大小iphone

換成代碼是這個樣子佈局

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.left.equalTo(v1.mas_left);
 make.right.equalTo(v1.mas_right);
 make.top.equalTo(v1.mas_top);
 make.bottom.equalTo(v1.mas_bottom);
}];

這是由於UIScrollView是個很是特殊的view UIScrollView與其subview之間相對位置的約束 並不會直接用於frame的計算而是會轉化爲對ContentSize的計算ui

換句話說當UIScrollView知道了上下左右的約束分別指向subview什麼位置以後只要subview的位置固定下來了 ContentSize的大小就肯定下來了 spa

下面來個簡單的例子 強烈建議配合demo來理解下面的例子(demo的連接在文尾)
請點擊->在線演示 (爲了方便理解我將ContentSize用紅線框了出來另外爲了查看ContentSize 我把UIScrollView的clipTobounds關閉了能夠經過左上角的開關來切換實際的效果)code

示例1

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.edges.equalTo(scrollView);
 make.width.equalTo(scrollView);
 make.height.equalTo(scrollView).multipliedBy(1.5);
}];

效果blog

這裏我創建了一個寬等於scrollview 高等於scrollview高度1.5倍的view 而後scrollview成功的計算出了ContentSizeip

關鍵就在於

1	make.edges.equalTo(scrollView);

這句話其實等同與以前我提到的

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.left.equalTo(v1.mas_left);
 make.right.equalTo(v1.mas_right);
 make.top.equalTo(v1.mas_top);
 make.bottom.equalTo(v1.mas_bottom);
}];

scrollview由於上面的約束會以v1的大小來計算ContentSize

示例2

若是嘗試改變v1的大小會怎麼樣呢?

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.edges.equalTo(scrollView);
 
 make.size.equalTo(scrollView).sizeOffset(CGSizeMake(80, 80));
}];

效果

能看到當我僅改變v1的大小而不變其餘的東西的狀況下 scrollview的ContentSize也是隨着v1的大小變化而變化的

示例3

接下來示例就會稍微複雜點若是同時有兩個view 會如何呢?

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
 
 make.left.top.right.equalTo(scrollView).insets(UIEdgeInsetsMake(10, 10, 0, 10));
 
 make.width.equalTo(scrollView).multipliedBy(1.1);
 make.bottom.equalTo(v2.mas_top).offset(-50);
 make.height.equalTo(@200);
}];

[v2 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.bottom.equalTo(scrollView);
 
 make.left.right.equalTo(v1).insets(UIEdgeInsetsMake(0, 50, 0, 50));
 make.height.equalTo(@250);
}];

效果

這個例子中 scrollview的四個方向的約束並無放在同一個subview上而是分別指向了兩個view 因此scrollview的ContentSize會根據兩個view之間的約束來肯定

示例4

若是將四個方向的約束分別放到四個不一樣的view上面會怎麼樣呢?

CGSize size = CGSizeMake(200, 200);

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.centerY.equalTo(scrollView.mas_top);
 
 make.size.mas_equalTo(size);
}];

[v2 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.centerX.equalTo(scrollView.mas_left);
 
 make.size.mas_equalTo(size);
 make.right.equalTo(v1.mas_left);
 make.top.equalTo(v1.mas_bottom);
}];

[v3 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.centerX.equalTo(scrollView.mas_right);
 
 make.size.mas_equalTo(size);
 make.left.equalTo(v1.mas_right);
 make.top.equalTo(v1.mas_bottom);
}];

[v4 mas_makeConstraints:^(MASConstraintMaker *make) {
 make.centerY.equalTo(scrollView.mas_bottom);
 
 make.size.mas_equalTo(size);
 make.left.equalTo(v1.mas_left);
 make.top.equalTo(v2.mas_bottom);
}];