在使用scrollView進行自動布局時發現,scrollView的自動布局是相對來說比較復雜的,在設置完上下左右的約束后發現仍然會報錯,查找發現這是因為contentSize無法確定,導致爆紅.
網友給出了一些答案.但是好像需要設置contentView的高度約束,覺得不方便,嘗試后發現可以通過下面的方法在scrollView中使用autolayout,同時實現自適應contentSize,做下記錄.
只使用xib的方法實現下面界面的自適應.
先看效果
使用scrollView時分以下幾步
1.在控制器View中拖入scrollView,設置上下左右約束距super為0
2.在scrollView中拖入一個view作為contentView,方便之后在contentView中進行布局,設置contentView上下左右約束距scrollView為0.這樣完成后,會報錯,就是因為contentSize沒有確定.
3.設置contentView和scrollView水平居中對齊,確定x方向上scrollView的位置
設置完成仍然報錯(先不管),但是出現水平方向上對齊的標示
4.開始在scrollView上面進行自由布局
5.要實現自動布局,重點在于contentView中的子控件能夠上下左右撐開contentView,此時效果如下
可以看出,沒寫一句代碼,已經實現了scrollView 中的自動布局(contentsize自適應子控件高度,可滾動).
接下來再實現在下一個視圖中再添加一個label,使scrollView 自適應label文字高度
1.首先取消下方紅色View的bottom約束
2.添加一個有很多文字的label
3.添加label之后
4.大招,可以看到把label的底部約束拖到與contentView的約束相等后,不再爆紅,完成,運行起來,就是開始時的效果
*************************************
總結:可以看到從上到下,所有的控件撐起了整個contentView,實現自適應最關鍵的一點是,最下面的一個控件作為參考控件,把它的底部約束拖到contentView的底部相等.這樣contentView就被正確的撐起來了.
希望這個小總結能給看到的朋友在開發中帶來靈感.
不專業分割線**************************************純代碼部分
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView * scrollView = [[UIScrollView alloc]init];
[self.view addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
UIView * container = [UIView new];
[scrollView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
make.width.equalTo(scrollView);
}];
UIView * redView = [UIView new];
redView.backgroundColor = [UIColor redColor];
[scrollView addSubview:redView];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.top.equalTo(scrollView);
make.height.mas_equalTo(600);
}];
UIView * blueView = [UIView new];
blueView.backgroundColor = [UIColor blueColor];
[scrollView addSubview:blueView];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(redView.mas_bottom);
make.left.right.equalTo(scrollView);
make.height.mas_equalTo(400);
make.bottom.equalTo(container);
}];
}
要注意的是，一定要用一個container，在container中進行布局，container的上下左右和scrollView相同，通過設置height或者width和scrollView相同，控制scrollView水平還是垂直滾動。在container中，從上往下布局，最后一個控件一定要和container的bottom設置相同，這樣才能撐開container，使得scrollView可以滾動。
