안녕하세요. 개발하는 정주입니다.
오늘은 WeatherToday 화면 구성에 대해 포스팅하려고 합니다.
목차
전체 스토리보드
전체 스토리보드 모습입니다.
화면 이동을 위해 내비게이션 컨트롤러를 추가하였습니다.
Navigation Bar
내비게이션 바부터 설정하였습니다.
내비게이션 바를 구현하며 힘들었던 점은 버전별로 동작이 다르다는 것이었습니다.
iOS 15 이상에서 UIKit의 scrollEdgeAppearance에는 약간의 변화가 생겼습니다.
바로 기본적으로 투명한 배경을 가진다는 것인데요.
따라서 scrollEdgeAppearance 색을 따로 지정하지 않는다면 윗부분에는 색이 적용이 되지 않습니다.
이것을 해결하는 방법은 비교적 간단합니다.
바로 scrollEdgeAppearance을 설정해주면 되는 것입니다.
이번에는 스토리보드를 이용해 설정을 해주었습니다.
Standard와 Scroll Edge에 체크를 해줍니다.
코드로는 각각 UINavigationBar.appearance().standardAppearance와 UINavigationBar.appearance().scrollEdgeAppearance를 설정하면 됩니다.
이제 각각의 Appearance에서 Background와 Title Color를 동일하게 설정해주시면
Navigation Bar의 설정은 완료됩니다.
윗 부분까지 모두 같은 색으로 채워졌습니다.
화면 1
화면 1의 완성 모습과 스토리보드 모습입니다.
내비게이션 바 아래에 Table View가 위치해 있습니다.
Table View Cell에는 이미지, 타이틀, 액세서리 뷰가 순서대로 존재합니다.
여기에서 액세서리 뷰는 Cell을 눌러 다음 화면으로 진입할 수 있다는 것을 유저에게 표시하는 역할입니다.
Table View의 오토 레이아웃입니다.
Bottom Space는 코드 리뷰어의 조언을 따라 Superview와 맞췄습니다.
처음에는 Safe Area와 맞췄지만 부자연스러운 모습에 질문을 남겼고
그 결과 Superview와 맞추는 게 더 일반적이라고 하네요.
화면 2
화면 2의 완성 모습과 스토리보드 모습입니다.
Navigation Bar의 Back 버튼 색은 흰색입니다.
이 색은 하나하나 설정할 수도 있지만 내비게이션 바의 Tint를 설정해주면
한 번에 변경이 가능합니다. 즉 default 색을 지정할 수 있습니다.
화면 전체에 Table View가 있으며 오토 레이아웃은 화면 1과 동일합니다.
다만 Cell을 직접 커스텀해야 했습니다.
왜냐하면 세 개의 Label들이 모두 스타일이 달랐기 때문입니다.
날씨 이미지
상하좌우 여백은 20씩 주었고 비율은 1:1 정사각형으로 설정했습니다.
중앙의 Label 영역이 여백을 꽉 채워야 하므로 Content Hugging Priority를 251로 설정했습니다.
Label 영역은 250이겠죠?
도시, 날씨 정보 Label
이미지와 붙어 있는 곳은 5 point를 주고 나머지는 20을 주었습니다.
위에 말한 대로 좌우 남은 공간을 꽉 채워야 하므로 Content Hugging Priority를 250으로 주었습니다.
중앙의 Label들은 Vertical Stack View로 구성하였습니다.
세 개의 Label이 동일한 높이를 가지기 위해 Distribution을 Fill Equally로 설정했습니다.
각 Font 설정은 적절히 설정하면 되기 때문에 따로 적진 않겠습니다.
화면 3
화면 3의 완성 모습과 스토리보드 모습입니다.
Image View 아래에 세 개의 Label이 있습니다.
이 Label은 화면 2d의 Cell 구성과 동일합니다.
날씨 Image View
X축 중앙에 위치시켰고 Width는 120으로 고정하였습니다.
비율을 1:1로 주어서 Height는 따로 주진 않았습니다.
마무리 잡담
이렇게 화면 구성을 완료했습니다.
iOS 15 이상부터 scrollEdgeAppearance의 색을 따로 지정해야 한다는 것을 새로 배웠네요.
다음 포스팅에서는 기능 구현을 해보겠습니다.
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.
