아이폰X 레이아웃에서 눈에 띄는 3가지

투박하다.구체적인 대응 방법 더 좋은 방법 있으면 알려주세요

카탈로그

  • 우선
  • LaunchImage에 아이폰neX용 이미지 추가
  • StartusBar의 높이가 바뀌었다
  • 화면 하단에 SafeAreaInset
  • 추가
  • 경품
  • ※ 위 외에도 많은 것이 있으니 위의 내용만 알고 있으면 됩니다.

    먼저


    Storyboard의 Bottom Layout Guide와 Top Layout Guide는 UIView입니다.safeAreaLayoutGuide라서 deprecated가 아닌 것 같아요.
    https://forums.developer.apple.com/thread/79400
    솔직히 스토리보드의 탑LayoutGuide, BottomLayoutGuide, 슈퍼뷰.top,SuperView.bottom을 사용할 수 있다면 아이폰X의 대응이 수월할 것이다.Qita에 아주 좋은 기사가 있었는데 못 찾아서 찾아서 붙여서...

    LaunchImage에 아이폰X용 이미지 추가



    아이폰X용 이미지를 설정하면 전체 화면으로 바뀌어 아이폰X와 대응하게 된다.
    아이폰X용 LaunchImage를 준비하지 않으면 위아래로 검은색 공백이 생기고 이전 터미널과 같은 영역만 사용할 수 있다.
    하지만 Storyboard에 LaunchScreen이 설정되어 있다면 신경 쓰지 않아도 된다.(자동적으로 AutoLayout이 기분이 좋다)

    스타스바의 높이가 바뀌었어요.


    before
    after


    지금까지 기본적으로 20pt였던 StatausBar는'00pt'로 바뀌었다.
    따라서 20pt를 고정 또는 NavigationBar와 함께 64pt를 고정 값으로 사용할 경우 디스플레이가 충돌합니다.(NavigationBar의 높이는 44pt로 변화가 없는 것 같다)
    코드는 고정 값이 아니라 다음 Property에 따라 수정됩니다.
    UIApplication.shared.statusBarFrame.height
    
    Storyboard(IB)의 경우 다음과 같이 StartusBar의 높이 조정은 코드를 통해 할 수 있다.
    그러나 지금까지 Statubar+NavigationBar 높이의 64pt로 높이를 지정한 경우에는 Statubar 높이를 빼고 44pt로 재지정해야 한다.(Storyboard의 외관은 붕괴될 수 있지만 방법이 없다.)
    @IBOutlet weak var NavigationBarViewHeightConstraint: NSLayoutConstraint! {
        willSet {
            newValue.constant += UIApplication.shared.statusBarFrame.height
            //      44        +=     20  or 44
        }
    }
    
    상술한 방법으로 자작한 NavigationBar의 경우 다음과 같은 방식으로 NavigationBar의 HeightConstraint의 Constant에 변화를 일으켜 대응할 수 있다.
    NavigationBar의 요소가 아래에 있는 위치를 제한하십시오.

    화면 아래쪽에 SafeAreaInset이 추가되었습니다.


    before
    after


    iOS 11부터 SafeAreaInset이 등장합니다.SafeArea 주변의 공백입니다.너는 이 부분은 Gesture가 될 수 없다고 생각하는 것이 좋겠다.하지만 이 부분을 숨길 수는 없다. 결국 화면 전체가 보일 수 있도록 하는 것이다.
    아이폰X의 경우 SafeAreaInsets입니다.34pt의bottom이 있고 기존 단말기는 0pt입니다.
    따라서 다음 방법을 준비하는 것이 편리할 것이다.
    static let safeAreaBottomInset: CGFloat = {
        if #available(iOS 11.0, *) {
            return UIApplication.shared.keyWindow?.rootViewController?.view.safeAreaInsets.bottom ?? 0
        } else {
            return 0
        }
    }()
    
    다음은 상술한 방법을 사용하는 구체적인 대응 방법이다.

    예를 들어, 화면 아래쪽까지 TableView인 경우


    다음은 tableFooter View의 safeAreaInsets입니다.bottom 섹션의 빈 뷰만 추가하고 마지막 셀은 SafeAreaInset에 끼지 마십시오.
    class TableViewRespondIphoneX: UITableView {
    
        override init(frame: CGRect, style: UITableViewStyle) {
            super.init(frame: frame, style: style)<img width="545" alt="スクリーンショット 2017-10-23 21.51.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/70276/2e7d0ef9-353b-c5fe-f0c2-bf3548479da3.png">
    
    
            self.commonInit()
        }
    
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
    
            self.commonInit()
        }
    
        private func commonInit() {
            // 1回しか呼ばれない&viewDidLoadの後に実行したいのでasyncしてます
            DispatchQueue.main.async {
                self.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: safeAreaBottomInset))
            }
        }
    }
    

    화면 밑에 버튼을 놓는 경우.



    Storyboard에서 SuperView.Bottom과는 연관이 없고 BottomLayoutGuide입니다.Top에 문의하십시오.
    이렇게 되면 SafeArea의 Bottom과 거리를 두면 Layout이 된다.

    사은품(iPhoneX의 판정)

       static let isIphoneX: Bool = {
           // iPhoneXはiOS11からなのでそれ以外の端末は除外します
           guard #available(iOS 11.0, *),
               UIDevice.current.userInterfaceIdiom == .phone else {
                   return false
           }
           let nativeSize = UIScreen.main.nativeBounds.size
           let (w, h) = (nativeSize.width, nativeSize.height)
           let (d1, d2): (CGFloat, CGFloat) = (1125.0, 2436.0)
    
           return (w == d1 && h == d2) || (w == d2 && h == d1)
       }()
    
    참조: 로컬 해상도로 아이폰X 판정
    https://qiita.com/ShingoFukuyama/items/273ae989442f3d1d11b2

    좋은 웹페이지 즐겨찾기