圖文詳解ScrollView子控件約束添加

時間 2019-11-21

標籤圖文詳解 scrollview 控件約束添加简体版

原文原文鏈接

前言
在iOS開發中，隨着iOS設備的屏幕尺寸不斷更新，對於控件約束的添加極爲重要。一些經常使用控件的約束添加在這裏不在贅述，本文主要詳細講解UIScrollView的約束添加。在本文中將以兩種方式進行實現，一種爲系統的AutoLayout，另外一種爲藉助Masonry庫文件。git

首先咱們在storyboard或xib文件中拖入一個ScrollView，爲其添加距邊緣均爲0的約束，即便其充滿屏幕。
github

對於ScrollView的使用，咱們可知的是須要爲其設置兩大重要屬性，一爲frame二爲contentSize。frame用於肯定其座標位置，contentSize用於肯定其可滾動的區域。bash

上一步咱們已經爲ScrollView肯定好了其座標位置即frame，接下來咱們設置其可滾動的區域。但ScrollView在storyboard或xib中並不能夠設置其contentSize，所以咱們繼續拖入一個View做爲ScrollView的子視圖，你們可認爲此View爲ScrollView的contentView，使用其來控制ScrollView的滾動區域
spa

contentView做爲ScrollView的子視圖，設置其約束爲距ScrollView邊緣爲0，約束添加好後發現出現了約束報錯，下步咱們加以解決。
3d

在解決約束報錯以前咱們須要考慮當前ScrollView的滾動方式
若但願ScrollView橫向滾動，咱們勾線如圖Vertically in Container選項，即豎直居中；若但願豎向滾動，咱們勾選如圖Horizontally in Container選項；若但願ScrollView橫向豎向都可滾動，則無需勾選任何選項，跳過此部便可。
code

以橫向滾動爲例，高度無須操做，須要限制contentView的寬度，例如將其設置爲當前屏幕寬的兩倍
cdn

簡單爲contentView設置個顏色，運行項目，咱們便可發現咱們生成了一個可滾動的ScrollView，其frame爲（0，0，self.view.bounds.size.width，self.view.bounds.size.height），contentSize爲（self.view.bounds.size.width*2，self.view.bounds.size.height）blog

對於contentSize咱們也能夠手動設置，可將contentView的寬度約束拖入代碼進行更改圖片

例如咱們在代碼中從新設置其約束開發

_widthLayout.constant = [UIScreen mainScreen].bounds.size.width * 5;複製代碼

當前ScrollView可滾動區域橫向即變成了5倍屏幕的大小。

接下來咱們爲ScrollView設置子視圖。

爲了顯示效果較好，咱們設置UIImageView做爲ScrollView子視圖，首先放置第一個ImageView，設置約束爲左上下邊緣約束均爲0。

繼續放置第二個ImageView，這隻約束爲上下左右約束均爲0

最後咱們選中兩個ImageView，設置其等寬等高。

運行當前項目，便可實現以下效果

最後放下層級關係方便你們理解

使用系統的AutoLayout爲UIScrollView添加約束就告一段落，在真實的開發中，使用ScrollView一般是製做廣告展現位。而廣告位的圖片個數是動態不固定的，所以經過storyboard或xib沒法實現需求中的動態添加。咱們一般是For循環建立指定數量的圖片（子視圖），這就須要咱們經過代碼手動爲子視圖添加約束。

具體實現原理與AutoLayout的約束添加一致，詳細見代碼，這裏使用Masonry庫文件添加約束，摘取部分約束代碼以下：

[_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self);
}];
[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(_scrollView);
    make.centerY.equalTo(_scrollView.mas_centerY).offset(0);
    make.width.equalTo(@(self.bounds.size.width * _imageArr.count));
}];

CGFloat space = 0;
//用於接收上一控件
UIImageView *lastImageView;
for (NSInteger i = 0; i < _imageArr.count; i++) {
    UIImageView *imageView = [self viewWithTag:1000 + i];
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_contentView.mas_top).offset(space);
        make.bottom.equalTo(_contentView.mas_bottom).offset(space);
        if (lastImageView) {
            //若是存在上一控件，設置與上一控件右邊緣約束，設置等寬
            make.left.equalTo(lastImageView.mas_right).offset(space);
            make.width.equalTo(lastImageView.mas_width);
        } else {
            //不存在上一控件，設置與父視圖左邊緣約束，設置寬度爲當前視圖寬度
            make.left.equalTo(_contentView.mas_left).offset(space);
            make.width.equalTo(@(self.bounds.size.width));
        }
        if (i == _imageArr.count - 1) {
            //若爲最後一個控件，設置與父視圖右邊緣約束
            make.right.equalTo(_contentView.mas_right).offset(space);
        }
    }];
    //接收上一控件
    lastImageView = imageView;
}複製代碼

調用方式以下

SureAutoLayoutScrollView *scrollView = [[SureAutoLayoutScrollView alloc]init];
scrollView.imageArr = @[@"IMG_1018.JPG",@"IMG_0857.JPG",@"IMG_0856.JPG"];
[self.view addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self.view);
}];複製代碼

具體邏輯已註釋標明，完整代碼已上傳GitHub
Masonry版：github.com/LSure/SureA…
AutoLayout版：github.com/LSure/SureS…

簡書地址：www.jianshu.com/u/57d9688d4…