iOS
UIScrollView AutoLayout

ScrollableController

Autolayout을 UIScrollView 와 함께 사용하면 내용이나 하위 뷰의 크기에 따라 제대로 크기가 조정되지 않습니다.

UIScrollView 의 내용이 너무 커서 표시 영역에 맞지 않을 때 자동으로 스크롤하려면 ContentView 와 UIScrollView 가 내용의 크기와 부모의 너비와 높이를 결정할 수 있도록 몇 가지 제약 조건을 추가해야합니다 전망.

import Foundation
import UIKit

class ScrollableController : UIViewController {
    
    private var scrollView: UIScrollView!
    private var contentView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //Setup
        self.initControls()
        self.setTheme()
        self.layoutScrollView()
        self.layoutContentView()
        
        //Add child views
        self.addChildViews()
    }
    
    func initControls() {
        self.scrollView = UIScrollView()
        self.contentView = UIView()
    }
    
    func setTheme() {
        self.scrollView.backgroundColor = UIColor.blue()
        self.contentView.backgroundColor = UIColor.orange()
    }
    
    func layoutScrollView() {
        self.view.addSubview(self.scrollView)
        
        let views: NSDictionary = ["scrollView": self.scrollView]
        var constraints = Array<String>()
        
        //Constrain the scrollView to our controller's self.view.
        constraints.append("H:|-0-[scrollView]-0-|")
        constraints.append("V:|-0-[scrollView]-0-|")
        
        for constraint in constraints {
            self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func layoutContentView() {
        self.scrollView.addSubview(self.contentView)
        
        let views: NSDictionary = ["contentView": self.contentView, "view": self.view]
        var constraints = Array<String>()
        
        //Constrain the contentView to the scrollView.
        constraints.append("H:|-0-[contentView]-0-|")
        constraints.append("V:|-0-[contentView]-0-|")
        
        for constraint in constraints {
            self.scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        //Disable Horizontal Scrolling by making the contentView EqualWidth with our controller's self.view (ScrollView's parentView).
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[contentView(==view)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func addChildViews() {
        //Init
        let greenView = UIView()
        let whiteView = UIView()
        
        //Theme
        greenView.backgroundColor = UIColor.green()
        whiteView.backgroundColor = UIColor.orange()
        
        //Layout -- Child views are added to the 'ContentView'
        self.contentView.addSubview(greenView)
        self.contentView.addSubview(whiteView)
        
        let views: NSDictionary = ["greenView": greenView, "whiteView": whiteView];
        var constraints = Array<String>()
        
        //Constrain the greenView to the contentView with a height of 400 and 15 spacing all around.
        constraints.append("H:|-15-[greenView]-15-|")
        constraints.append("V:|-15-[greenView(400)]")
        
        //Constrain the whiteView below the greenView with 15 spacing all around and a height of 500.
        constraints.append("H:|-15-[whiteView]-15-|")
        constraints.append("V:[greenView]-15-[whiteView(500)]-15-|")
        
        for constraint in constraints {
            self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        greenView.translatesAutoresizingMaskIntoConstraints = false
        whiteView.translatesAutoresizingMaskIntoConstraints = false
    }
}

이제 greenView (400 높이) + whiteView (500 높이)가 화면보다 큽니다. 이렇게하면 ScrollView의 contentSize가 두 뷰에 모두 맞게 확장되어 세로로 스크롤 할 수있게됩니다.

contentView 와 self.view 에서 EqualWidth 제약 조건을 사용하여 가로 스크롤을 사용하지 않도록 설정했습니다.

Storyboard를 통해 UIScrollView 동적 콘텐츠 크기

스토리 보드에서 스크롤 뷰를 사용하는 동안 프로그래밍 방식으로 정적 값을 제공하는 것보다는 스크롤 뷰에있는 뷰 수에 따라 콘텐츠 크기를 계산하는 것이 좋습니다.

다음은 콘텐츠 크기를 동적으로 가져 오는 단계입니다.

1 단계 :

스토리 보드에서보기 위해 스크롤보기를 추가하고 선행, 후행, 위 및 아래 제약 조건을 추가합니다 (모든 값은 0입니다).

2 단계 :

직접 스크롤보기에 필요한보기를 직접 추가하지 마십시오. 먼저 모든보기 요소에 대한 콘텐츠보기가 될 scrollview에 하나의보기를 추가하십시오. 이 뷰에 제약 조건을 추가하십시오.

1. 선행, 후행, 상한 및 하한 제약 조건 (모든 값은 0 임).

2. 같은 높이, 같은 너비를 기본보기 (즉, scrollview 포함) 추가하십시오. 같은 높이의 경우 우선 순위를 낮게 설정하십시오. (이것은 콘텐츠 크기를 설정하는 중요한 단계입니다).

3. 이 콘텐츠보기의 높이는보기에 추가 된보기 수에 따라 달라집니다. 마지막보기를 추가 한 레이블이 하나이고 Y 위치가 420이고 높이가 20이면 콘텐츠보기가 440이됩니다.

3 단계 : 요구 사항에 따라 컨텐츠보기에서 추가 한 모든보기에 제한 조건을 추가하십시오.