[iOS - swift] UIScrollView의 contentInset, contentInsetAdjustmentBehavior, adjustedContentInset 사용 방법 (UIScrollView 인셋, 마진)

* 예제에 사용된 UIScrollView+UIStackView 사용한 베이스 코드는  이전 포스팅 글(UIScrollView+UIStackView 구현) 참고

(only code: https://github.com/JK0369/ExScrollView_UIStackView)

Storyboard로 구현한 UIScrollView + UIStackView

• 예제에 앞서, UIScrollView의 background 색상을 blue, UIStackView를 green로 설정

ContentInset

• 스크롤 가장자리로 부터 contentView와의 거리 값
  • 핵심은 inset을 주면 그만큼 UIScrollView의 content 크기도 증가

https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset

• 만약 contentInset값을 top 120을 주게된다면?
  • 120만큼 content의 top으로부터 edge까지 거리가 부여되며, 이 거리만큼 content 사이즈도 증가

scrollView.contentInset = .init(top: 120, left: 0, bottom: 0, right: 0)

• 만약 left 20을 주면?
  • 20만큼 너비가 증가되어 양옆으로 스크롤이 가능

scrollView.contentInset = .init(top: 120, left: 30, bottom: 0, right: 0)

contentInsetAdjustedmentBehavior

https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior

• safeArea를 고려하여 자동으로 contentOffset을 조절해주는 프로퍼티
  • 4가지의 케이스로 존재

extension UIScrollView {
    @available(iOS 11.0, *)
    public enum ContentInsetAdjustmentBehavior {
        case automatic = 0
        case scrollableAxes = 1
        case never = 2
        case always = 3
    }
}

• 1) automatic: scrollView의 safe area를 고려하여 scrollView의 contentOffset을 자동으로 조정
  • (디폴트 값)
  • 스크롤 뷰의 contentOffset.y값이 상단의 safeArea를 고려하여, -값으로 시작
  • contentOffset 크기의 기준은 컨텐츠가 줄어드는 쪽으로 스크롤 되는 경우 음수

scrollView.contentInsetAdjustmentBehavior = .automatic

• 2) scrollableAxes: 스크롤 방향으로만 safeArea inset 적용
  • scroll 방향이 vertical이므로, top, bottom의 safe area만 고려된 형태 (아이폰을 회전하면 leading, trailing에 inset 고려가 안되어 쭉 늘어난 상태)

scrollView.contentInsetAdjustmentBehavior = .scrollableAxes

• 3). never: safeArea inset 고려 x

scrollView.contentInsetAdjustmentBehavior = .never

• 4). always: 항상 safeArea를 고려하여 contentOffset 적용

scrollView.contentInsetAdjustmentBehavior = .always

아이폰을 회전시켜도 적용

adjustedContentInset

https://developer.apple.com/documentation/uikit/uiscrollview/2902259-adjustedcontentinset

• read only property
• contentOffset의 크기를 의미
  • contentOffset.y의 top이 -59이면 아래와 같은 화면이고 이 때의 adjustedContentInset의 top값은 59

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.contentInset = .init(top: 120, left: 30, bottom: 0, right: 0)
        scrollView.contentInsetAdjustmentBehavior = .always
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        print(scrollView.contentOffset) // (-30.0, -179.0)
        print(scrollView.adjustedContentInset) // UIEdgeInsets(top: 179.0, left: 30.0, bottom: 34.0, right: 0.0)
    }
}

 

* 전체 코드: https://github.com/JK0369/ExScrollViewInsets

* 참고

https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior

https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset