swift autoresizingMask

autoresizingMask

Apple Developer 공식문서에 따르면 

특정뷰의 superview의  bound가 변경되었을떄, 해당 뷰(sub view)가 자체 크기를 어떻게 할지 정하는 integer bit mask 이다.

 

상세 설명은

view의 bounds가 변경되었을때, 해당 뷰는 자동적으로 서브뷰들을 각 서브슈의 autoresizing mask에 따라 크기를 재설정한다. (resize) 이때 C언어의 비트 연산자  OR을 사용하여 UIView.AutoresizingMask에 설명된 constant값을 결합하여 이 마스크 값을 지정한다.

constants 값을 결합한다는 것은 뷰의 차원이 superview에 비해 늘어나야하는지 또는 줄어들어야 하는지를 특정할 수 있도록 해준다.

이 프로퍼티의 기본값은 none이고, 이는 뷰는 사이즈가 재설정되어야 하지 않음을 의미한다.

 

같은 axis를 따라 하나 이상의 옵션이 설정되었을때, 기본적으로는 flexible portion을 따라 부분적으로 크기를 분배한다. (뭔말?)

다른 flexible portion 비해 상대적으로 더 유연한 부분일 수록 늘어나기 쉽다는 것이다. (더 유연하다는 말이 무슨말인지 모르겠음)

 

예를 들어 어떠한 뷰가 이 프로퍼티의 flexibleWidth 와 flexibleRightMargin constants를 포함하고있고, flexibleLeftMargin을 포함하지 않는다고 가정해보자, 이는  view의 왼쪽 마진은 고정되어 있지만 view의 width와 오른쪽 마진은 변경될수 있음을 나타낸다. 

 

따라서 해당 뷰는 슈퍼뷰의 크기가 변경된다면 width와 오른쪽 간격이 증가하는 동안, 슈퍼뷰의 왼쪽에 고정되어 있는것 처럼 보이는 결과를 가져온다.

 

 

Autoresizing Example

우선 공식문서에 따른 예시를 들어 autoresizing을 적용해본다.

예시에는 ViewController에 SuperView와 해당 뷰의 SubView만 있다. 앱이 로드되면 Superview는 사이즈가 100*100에서 300*300으로 크기가 늘어난다. 이때 AutoresizingMask 옵션에 따라 subview가 어떻게 늘어나는지를 확인한다.

 

초기 각 뷰의 위치, 크기는 아래 그림과 같다.

회색 뷰가 슈퍼뷰고, 노란색 뷰가 서브뷰이다.

공식 문서의 예시에 따르면 flexibleWidth 와 flexibleRightMargin 옵션을 포함하지만 flexibleLeftMargin옵션을 포함하지 않는다면 왼쪽 마진은 고정되어있지만, 너비와 오른쪽 마진은 늘어날 것 이다.

 

예시코드는 다음과 같다.

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(superView)
        superView.center = self.view.center
        superView.addSubview(subView)
        let flexibleRightMargin: UIView.AutoresizingMask = .flexibleBottomMargin
        print("rawValue is \(flexibleRightMargin.rawValue)")
    }
    
    lazy var superView: UIView = {
        let view = UIView(frame: CGRect(origin: CGPoint(x: 100, y: 100), size: CGSize(width: 100, height: 100)))
        view.backgroundColor = .darkGray
        return view
    }()
    
    lazy var subView: UIView = {
        let view = UIView(frame: CGRect(x: 30, y: 50, width: 50,  height: 50))
        view.autoresizingMask = [.flexibleWidth, .flexibleRightMargin]
        view.backgroundColor = .systemYellow
        return view
    }()

    override func viewDidAppear(_ animated: Bool) {
        UIView.animate(withDuration: 2.0) {
            self.superView.bounds.size = CGSize(width: 300, height: 300)
            
            let subViewX = self.subView.frame.origin.x
            let subViewWidth = self.subView.frame.size.width
            let rightMarginConstant = 300 - subViewX - subViewWidth
            print("left margin constant is \(subViewX)")
            print("subView's width is \(subViewWidth)")
            print("right margin constant is \(rightMarginConstant)")
        }
    }

}

 

수퍼뷰가 늘어나는것을 확인하기 위해 애니메이션으로 늘린 후 확인하였다.

 

실행결과

viewcontroller

print로 찍은 왼쪽마진, 너비, 오른쪽 마진

문서에 나온대로 왼쪽 마진은 30그대로 고정되어있는걸 확인할 수 있고, 오른쪽 마진과 너비는 superview가 늘어남에 따라 같이 늘어난것을 확인할 수 있다.

그렇다면 이번에 반대로 left옵션만 남겨두고, right,width 옵션을 없앤다면 어떻게 될까?

Apple 공식문서에 따르면 autoresizingMask 옵션을 설정하지 않는다면 해당 값은 슈퍼뷰가 늘어남,줄어듬에 상관없이 고정일것이고, 설정된 옵션은 수퍼뷰에 따라 늘어날 것이다.

따라서 flexibleLeftMargin 옵션만 설정한다면 width와 right 마진값은 고정되고 left 마진값만 늘어날 것이다.

 

view.autoresizingMask = [.flexibleLeftMargin]

실행 결과

 

실행결과 왼쪽 마진만 늘어난 것을 확인할 수 있다.

 

정리하자면 autoresizingMask는 특정 UIView의 사이즈가 변경이 될때, 해당 뷰의 subView들의 마진, 너비 높이 등의 크기를 수퍼뷰 따라 변경할것인지에 대한 옵션이라고 할 수 있다. (autoresizingOption이 더 적절한 이름이 아닐까 생각이 들기도 함)

 

 

 

그럼 이제 수퍼뷰가 늘어남에 따라 30:50:20 비율을 유지하고 싶은데? 라고 한다면 flexibleLeftMargin, flexibleWidth, flexibleRightMargin 옵션을 설정해주면 된다.

view.autoresizingMask = [.flexibleLeftMargin, .flexibleWidth, .flexibleRightMargin]

 

실행결과

 

의도한대로 3:5:2 비율로 늘어난 것을 확인할 수 있다.

 

 

참고 페이지

https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/CreatingViews/CreatingViews.html#//apple_ref/doc/uid/TP40009503-CH5-SW15

Views

https://ios-development.tistory.com/672

[iOS - swift] AutoresizingMask, translatesAutoresizingMaskIntoConstraints 개념