201116 - TIL

iOS

 

오늘은 Auto Layout에 대해서 공부를 했다.

 

• Size와 Position을 계산할 수 없으면 Error가 발생한다.
• 같은 제약을 다른값으로 두 번 이상 설정해도 Error가 발생한다. 단, Priority를 설정하면 괜찮다.
• Intrinsic Size가 가능한 View는 Position만 설정해도 괜찮다.
• 노치가 있는 iPhone은 safe area가 있다.
• Code로 Auto Layout 추가하는 방법 3가지
• NSLayoutConstraint
• NSLayoutAnchor
• Visual Format Language
• Content Hugging(CH)와 Content Compression Resistance(CR)
• Adapted Layout - w와 h에 따라서 속성을 추가할 수 있는 것들
• Shadow 설정하는 방법
• View의 종류에 따른 제약들

 

코드로 Auto Layout을 추가하는 세가지 방법 중에서 두 번째 NSLayoutAnchor를 이용한 방법이 그나마 제일 쉬웠다.

그런데..... 4개의 뷰의 제약을 추가하는 것만해도 엄청난 코드가 들어갔다.

막상 만들어보니 storyboard를 놔두고 굳이 코드로 짜야할 이유를 못 느꼈다.

 

 

 

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let targetView = UIView(frame: CGRect.zero)
        targetView.backgroundColor = .systemBlue
        
        let rightTopView = UIView(frame: CGRect.zero)
        rightTopView.backgroundColor = targetView.backgroundColor
        
        let leftBottomView = UIView(frame: CGRect.zero)
        leftBottomView.backgroundColor = targetView.backgroundColor
        
        let rightBottomView = UIView(frame: CGRect.zero)
        rightBottomView.backgroundColor = targetView.backgroundColor
        
        targetView.translatesAutoresizingMaskIntoConstraints = false
        rightTopView.translatesAutoresizingMaskIntoConstraints = false
        leftBottomView.translatesAutoresizingMaskIntoConstraints = false
        rightBottomView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(targetView)
        view.addSubview(rightTopView)
        view.addSubview(leftBottomView)
        view.addSubview(rightBottomView)
        
        let leading = targetView.leadingAnchor.constraint(equalTo: view.leadingAnchor)
        leading.isActive = true
        
        let top = targetView.topAnchor.constraint(equalTo: view.topAnchor)
        top.isActive = true
        
        let width = targetView.widthAnchor.constraint(equalToConstant: 200)
        width.isActive = true
        
        let height = targetView.heightAnchor.constraint(equalToConstant: 200)
        height.isActive = true
        
        
        let rightTopViewTrailing = rightTopView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        rightTopViewTrailing.isActive = true
        
        let rightTopViewTop = rightTopView.topAnchor.constraint(equalTo: view.topAnchor)
        rightTopViewTop.isActive = true
        
        let rightTopWidth = rightTopView.widthAnchor.constraint(equalTo: targetView.widthAnchor)
        rightTopWidth.isActive = true
        
        let rightTopHeight = rightTopView.heightAnchor.constraint(equalTo: targetView.heightAnchor)
        rightTopHeight.isActive = true
        
        
        let leftBottomViewLeading = leftBottomView.leadingAnchor.constraint(equalTo: view.leadingAnchor)
        leftBottomViewLeading.isActive = true
        
        let leftBottomViewBottom = leftBottomView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        leftBottomViewBottom.isActive = true
        
        let leftBottomViewWidth = leftBottomView.widthAnchor.constraint(equalTo: targetView.widthAnchor)
        leftBottomViewWidth.isActive = true
        
        let leftBottomViewHeight = leftBottomView.heightAnchor.constraint(equalTo: targetView.heightAnchor)
        leftBottomViewHeight.isActive = true
        
        
        let rightBottomViewTrailing = rightBottomView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        rightBottomViewTrailing.isActive = true
        
        let rightBottomViewBottom = rightBottomView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        rightBottomViewBottom.isActive = true
        
        let rightBottomViewWidth = rightBottomView.widthAnchor.constraint(equalTo: targetView.widthAnchor)
        rightBottomViewWidth.isActive = true
        
        let rightBottomViewHeight = rightBottomView.heightAnchor.constraint(equalTo: targetView.heightAnchor)
        rightBottomViewHeight.isActive = true
}

4개의 View를 만드는데만 이렇게 많은 코드가 들어갔다.

거의 같은 코드가 반복이 되고 있어서 줄일 수 있겠지만 단순하게 이 정도 코드가 들어가야 하는데 storyboard에서 만들면 간단하게 만들 수 있다.