굿캘린더 아이폰 버전 개발을 Swift2로 시작했는데 아직 출시도 하기 전에 Swift4로 업데이트 되었음 -_- 니미럴. Swift3로 올라갔을 때도 UI가 다 어그러져서 고생께나 했기 때문에 이번 업데이트 소식에 동공 지진- 끄읍. 그래도 지난 번 업데이트에 비해서는 비교적 변경된 내용이 많지 않....은 듯 하지만 여전히. UI에서 수정되어야 할 부분이 있어서 스토리보드와 xib 파일을 모두 검토하며 수정함.
Apple 개발자 사이트에 가서 Building Apps for iPhone X라는 동영상을 보며 달라진 내용을 접했다. 보이는 면에서 iPhone X에서의 가장 큰 변화는 화면 사용 크기가 변경되었고, 소프트 홈키 방식이 적용된다는 점. 이로 인해 View 주변의 Margin을 다루는 방식에 변경이 필요하다.
동영상의 내용을 보면 iPhoneX를 위한 App의 UI 체크 사항으로 크게 4가지 정도가 나온다.
1. Bottom Margin의 조정 : 예시 - Page Control
2. Top Margin의 조정 : 예시 - Search Control
3. Table View의 Search Control 위치 조정
4. Table Cell의 Width 조정
동영상에 있는 내용은 보고 따라하면 되는데, 문제는 체크한다고 체크하고 났는데도 단말에서 화면이 이상한 것이다. 좀 더 자세히 말하자면, 시뮬에서 다 조정하고 나서 다 되었겠거니 했는데, 아직 IOS 10.3 인 <단말>에 올려보니 화면이 어그러졌다. Top에 있는 Title Bar가 다 화면 저 끝으로 올라 붙어 보인다.
이렇게...
IOS 11이 발표되면서 Safe area 라는 것이 생겼다. 이 아래의 그림은 Apple공식 안내 페이지 내에 있는 것인데, 보이는 것 처럼 이제 화면 영역이 전면 렌즈 부위의 양쪽 영역까지 올라가다보니, App에서 Top으로 안전하게 보여 줄 수 있는 영역을 Safe area라는 이름으로 OS 단에서 관리해 주는 것이다.
해서 앱에서 보여줄 내용의 Top을 Safe area로 셋팅하라고 안내하고 있다. 그래서 그렇게 했지. 그랬더니 10.3 단말에서 저로코롬 보여부리는 것이다. 나참.... 기존에 했던대로 Super view의 Top을 사용하면 IOS 11에서 올라 붙고, Safe area의 Top을 사용하면 IOS 11 미만 단말에서 올라 붙는다...
ViewController 화면의 경우 기존에 있던 Top Layout Guide를 Top Anchor로 사용하면 해결된다. 하지만 문제는 Custom ViewController를 만들기 위해 생성된 xib 파일들.... xib 파일들은 기본적으로 최 상단에 View를 보여주는데, 이 경우 Top Layout Guide는 나타나지 않는다. (Top Layout Guide는 ViewController에만 보여진다.)
으아아아아!!!!! 하다가 진정하고 다시 검색질을 시작했더니 벌써 스택오버플로우의 용자님들이 해결법을 적어 주셨네. 아이고 감사해라.
참고한 링크 : https://stackoverflow.com/questions/46298427/safe-area-layout-guides-in-xib-files-ios-10
사실 근본적으로는 OS 사에서 배포한 컴파일러에서 컴파일 시 Safe area 에 대해 하위 호환성을 맞춰줘야 한다고 생각하지만, 어디 애플이 내 뜻대로 움직이는 그룹이더냐... 용자님이 안내해주신 힌트대로 수정을 진행한다.
해서 xib의 view Top 이상 수정을 위한 단계는 다음과 같았다.
1. 먼저 최상위 View에서 'Use Safe area Layout Guide...'를 체크한다.
2. 체크를 하면 아래와 같이 뷰 레이아웃 아래로 Safe area 가이드가 보인다.
3. 가장 위에 위치할 View(나의 경우 Mv Title Bar)의 Top을 Super View의 Top을 이용해 위치 조정한다.
이것은 기존의 OS 버전을 위한 Top 위치 조정이다. 주의 할 것은 우선순위(Priority)에 1000을 줬고, 상수 값(Constant)을 20 이상(Greater Than or Equal)로 줬다는 점이다. 이렇게 되면 기존 버전의 단말들에서는 Super view의 Top으로 부터 20 떨어진 지점에 Mv Title Bar를 위치 시킬 것이다. 위쪽 20 높이 내에는 밧데리 상태, 시간 등의 Status를 나타내는 Status Bar 영역이 잡히기 때문에 적당한 위치에 나의 앱 메뉴가 보이게 된다.
4. 방금 Top을 조정한 나의 View (Mv Title Bar)에 Top Constraint를 하나 더 준다. 이번에는 Safe area의 Top에 딱 붙도록 준다.
이 Constraint는 IOS 11 이상의 버전을 위한 것이다. 주의할 점은 여기에는 우선 순위(Priority)에 750을 주는 것이다. 기존 버전에는 Safe area가 0이기 때문에 우선순위가 더 높은 Super view top >= 20 를 따라 Super view에서 20 떨어진 지점에 원하는 뷰가 위치할 것이고, 11 버전 이상에서는 Safe area의 Top이 20보다 더 떨어진 곳에 있고, 우선순위가 높은 top >= 20도 만족하므로 그 곳에 원하는 뷰가 위치하게 될 것이다.
이렇게....
아아... 적당하다. 적당하도다. ㅠㅠ
Safe area로 인한 화면 문제가 계속된다면 스토리 보드를 OS 버전 별로 2개로 구분해야 한다는 말도 있지만...(워메 귀찮은거) 어쨌든 현재는 위의 내용을 참고하여 굿캘린더의 UI를 다 체크했다. 가뜩이나 여러 일로 출시가 미뤄졌는데, 출시하려는데 자꾸 버그가 보임... 허허허. 출시하기 전에 보이는게 낫긴 하다만. 어쨌든 이번주에는 정말 출시 리뷰에 밀어넣을 예정이다. 제발 그 사이에 다른 일 좀 생기지 마라!!!! ㅠㅠㅠ
ARKit라던지, 얼굴 인식 API가 추가되었다고 하는데 이 부분은 차차 공부해 볼 예정이다. 앱에 AR기능을 원하는 경우가 많아서...하아... 하기 싫으네? ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
힘내야쥐.
from giphy.com
'관계, Networking 그리고 Programming' 카테고리의 다른 글
| 나는 현재 몹시 화가 나쒀 (0) | 2020.09.17 |
|---|---|
| SWIFT - 앱 동작 시 터치 표현 보여주기 (0) | 2017.10.30 |
| 다시 살펴보는 매니페스트 속성들 (0) | 2015.10.22 |
| Calendar millitime에 대한 나의 편견(?) (0) | 2015.03.31 |
| 종종 헷갈리는 프로젝트 Import 방법 (0) | 2015.01.17 |