아이폰X 레이아웃에서 눈에 띄는 3가지
12113 단어 AutoLayoutSwiftiPhoneXios11iOS
카탈로그
먼저
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
Reference
이 문제에 관하여(아이폰X 레이아웃에서 눈에 띄는 3가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rd0501/items/18fe132d8ddf8ac4b589
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
아이폰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
Reference
이 문제에 관하여(아이폰X 레이아웃에서 눈에 띄는 3가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rd0501/items/18fe132d8ddf8ac4b589
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
UIApplication.shared.statusBarFrame.height
@IBOutlet weak var NavigationBarViewHeightConstraint: NSLayoutConstraint! {
willSet {
newValue.constant += UIApplication.shared.statusBarFrame.height
// 44 += 20 or 44
}
}
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
Reference
이 문제에 관하여(아이폰X 레이아웃에서 눈에 띄는 3가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rd0501/items/18fe132d8ddf8ac4b589
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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)
}()
Reference
이 문제에 관하여(아이폰X 레이아웃에서 눈에 띄는 3가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rd0501/items/18fe132d8ddf8ac4b589텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)