[SwiftUI] View 위치 조정해보기

July 25, 2022

튜토리얼 페이지는 여기 !!

Compose the Detail View

앞에서 사진과 textView, mapkit을 사용해보았으니 이제 이 화면들을 하나로 모아 재구성을 해볼 시간이다.

VStack - VStack - 텍스트뷰들 이런 구조가 된다.

MapView를 추가할 때 width를 따로 지정해주지 않고 height만 지정해주면 view는 자동으로 content의 사이즈에 맞게 width를 지정한다고 한다. MapView는 height를 설정해주니 자동으로 width가 꽉 차도록 설정됐다.

MapView 아래에 CircleImage를 추가하면 아래와 같이 설정된다.

CircleImageView에 차례대로 offset과 패딩을 주면 다음과 같이 변경된다.

offset으로 이미지뷰의 위치를 올리고 padding을 주어 상하 공백이 넓어지는 걸 확인할 수 있다.

이번에 추가한 VStack의 가장 하단에 Spacer()를 넣어 VStack의 컨텐츠들을 전체적으로 위로 올려준다.

확실히 쑥 올라갔다..!!

MapView가 위로 끝까지 올라가지 않고 공간이 남아있는 것이 safeArea를 지키기 위함인 것 같다. .ignoresSafeArea(edges:) 로 top의 safeArea를 무시하도록 설정해주면 아래와 같이 여백 없이 딱 붙는 화면을 확인할 수 있다.

랜드마크 이름 아래에 두개의 TextView를 더 넣어주는데 랜드마크 이름과 구분이 될 수 있도록 Devider()를 넣어 구분선을 추가해준다.

VStack 내부에 있어서 그런가 Text들이 TableView처럼 굉장히 깔끔하게 들어가는 게 신기하다… tableview를 쓸 필요가 없어지는 것일까..?

HStack 내부에서 사용하는 font style이 중복되므로 HStack 전체에 적용할 수 있도록 변경해주었다.

뭔가… 뚝딱뚝딱 하니까 순식간에 깔끔한 화면 하나가 완성되는게 신기하다. 기존에 저런 화면을 만들거라면 storyboard에 이것저것 추가해줄 게 많았을 것 같은데, SwiftUI가 알아서 다 해주는 느낌?

물론 알아야할 게 더 많겠지만 실제로 복잡한 화면을 구성할 수 있도록 화면 그려보는 연습이 많이 필요할 것 같다.