2018년 3월 8일 목요일

가로 모드에서 특정 뷰가 전체 화면이 되는 앱을 autolayout으로 어떻게 구현 하는가?

세로 모드에서 컨텐츠가 가운데 표시되고 상단과 하단에는 네비게이션 바 부터 정보를 보여주는 Label 하단에는 각종 버튼이 있다고 하자.

이러한 상태에서 가로모드로 전환을 하면 가운데 컨텐츠가 전체 화면으로 변경 되는 앱을 만든다고 하면 어찌 하는가?
아래 그림을 참조






화면 전환을 인지 하는 코드는. willTransition() 메서드로 인지 할 수 있다.

UIDevice.current.orientation.isLandscape 의 값을 확인 하여 현재 landscape 모드인지 확인이 가능 하다.

이럴때 가운데 컨텐츠의 autolayout constraint 값을 (0)으로 변경 하면 쉽게 해결 할 수 있다.
즉 세로모드로 IB에서 디자인을 하고 autolayout constraint를 적용 할때 Video 라는 글이 있는 검정색 뷰의 부모 뷰에 대한 constraint Align top to:와 Align Bottom to:를 IBOutlet으로 연결하여
코드로 값을 조정 하면된다.

나머지 나비게이션콘트롤러의 바나, 레이블, 버튼등도 코드로 isHidden 값을 정해 주면 된다.

하여 완성된  ViewController의 코드는 다음과 같다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var topContraint: NSLayoutConstraint!
    @IBOutlet weak var bottomConstraint: NSLayoutConstraint!
    @IBOutlet weak var infoLabel: UILabel!
    @IBOutlet weak var controlButton: UIButton!
    
    override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
        if UIDevice.current.orientation.isLandscape == true {
            topContraint.constant = 0
            bottomConstraint.constant = 0
            self.navigationController?.isNavigationBarHidden = true
            infoLabel.isHidden = true
            controlButton.isHidden = true
        } else {
            topContraint.constant = 122
            bottomConstraint.constant = 300
            self.navigationController?.isNavigationBarHidden = false
            infoLabel.isHidden = false
            controlButton.isHidden = false
        }
    }


}

댓글 없음: