SwiftUI 탐방기 004

안녕하세요. 밀쿄 입니다.

스위프트 UI 때문에 포스팅이 핫하네요...

자 오늘은 챕터 2를 끝내봅시다.

https://developer.apple.com/tutorials/swiftui/tutorials

Apple Developer Documentation

기억을 되짚어 봅시다.

우린 지난 시간에 List를 동적으로 만들었습니다.

그러면 그 안에 상세보기도 동적으로 만들어보겠습니다.

먼저 이미지를 보여주는 뷰부터 동적으로 만들어보겠습니다.

이렇게 소스코드를 변경해줍니다.

image를 받아서 그 이미지를 출력해주는 느낌인 것이죠.

그 다음 맵뷰를 보니까..

CLLocationCoordinate2D 데이터 부분이 문제네요.

이 부분은 Codable를 상속받은

우리가 만든 구조체인

Landmark에서 해결해봅시다.

본문의 변수명을 살려서

'locationCoordinate'란 변수를 만들어 줍시다,

그 뒤에 맵뷰에서는

UpdateView의

CLLocationCoordinate2D 부분을 삭제해주고

CLLocationCoordinate2D 를 받아오게끔 바꿔줍시다.

이제,

LandmarkDetail 부분의 소스코드도 바꿔줘야 하는데요

이렇게 바꿔주면 됩니다

Landmark란 우리가 만든 구조체를 넘겨받아서

그 데이터 안에 있는

MapView와 CirecleImage로 출력해야할 값들을 넘겨주고

이 뷰 자체로도 출력해야할 텍스트들을 출력해주게끔 바꿔줍니다.

 

이제 네비게이션을 추가해서 리스트 뷰와 이 뷰를 연결해봅시다.

이렇게 NavigationView로 감싸주고

navigationBarTitle를 이용하여 간단하게 만들 수 있습니다.

이 함수네요 

눌렀을 때 네비게이션 프레젠트하는  버튼...

init하는 방법은 몇 개 되는 것 같지만

둘 다 클릭해보시면 아시겠지만

destination과 label 빼곤 전부 다 기본값이 있습니다.

그러므로 이런느낌으로 작성해주시면 됩니다(?)

다시 Detail에도 타이틀을 추가해주시고,,

모드 세 가지에 대해서 살펴보면..

이전 네비게이션 아이템에서 상속 받는 automatic

표준 범위 내에 제목을 표시하는 inline

확장된 네비바안에 큰 타이틀을 출력하는 large

가 있습니다.

 

마지막으로 씬 델리게이트에서

UIHostingController에 rootView를 

LandmarkList()로 바꿔주면 챕터2는 끝 입니다.

 

이제 실행시켜 확인해봅시다,

 

짜잔 버그가 나타났습니다.

도망가겠습ㄴ....

버그1. 지도랑 네비가 겹친다

버그2. 이미지가 너무크다

 

버그1의 Fix 방법

일단 이걸 삭제 해줍니다.

 

버그 2의 Fix 방법..

저도 모릅ㄴ..

아까 Row 구성하면서 크기 조정했던거 기억나시죠?

그거대로하시면 됩니다.

이렇게 말이죠.

 

이렇게하면 정말로 챕터2는 끝납니다.

 

챕터1, 챕터2 소스 파일입니다.

참고하세요

https://github.com/dp221125/ExploreSwiftUI/tree/Chapter1%2C2

dp221125/ExploreSwiftUI