iOS - SwiftUI 튜토리얼 : Building Lists and Navigation Part 1

Index of SwiftUI 

- Creating and Combining Views : https://atelier-chez-moi.tistory.com/60

- Building Lists and Navigation : (Now)

- Handling User Input : https://atelier-chez-moi.tistory.com/63

 

Apple's SwiftUI Tutorials 번역

원문 : https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

 

 

 

SwiftUI Essentials 2번째 편

Building Lists and Navigation

기본이 되는 랜드마크 디테일 뷰 설정과 함께, 여러분은 유저들에게 각 위치에 대한 디테일들을 보여주기 위한, 그리고 모든 랜드마크 리스트를 보기 위한 방법을 제공해야만 합니다. 

 

여러분은 뷰를 만들 것입니다. 그것도 어느 랜드마크에 대한 정보를 보여줄 수 있으며, 하나의 랜드마크에 대해 디테일 뷰를 보기 위해 유저가 탭(tap)할 수 있는 스크롤링 리스트를 동적(dynamically)으로 만들어낼 수 있는 뷰를 만들어볼거에요. UI를 미세하게 조절하기 위해서, 여러분은 Xcode 의 캔버스(Canvas) 를 서로 다른 디바이스 사이즈에 대해 다양한 프리뷰를 렌더링하기 위해 사용할 거구요.

 

상단의 원문 링크에서 필요한 프로젝트 파일을 다운로드 받고, 다시 시작해봅시다 :)

 

 

Section 1 - 샘플 데이터 확인하기

 

 

첫 튜토리얼(그 뷰 결합하기 뭐시기)에서, 여러분은 자신의 모든 커스텀 뷰안에 정보를 하드 코딩 했었지요. 여기서 여러분은 자신의 커스텀 뷰에 표시(display)를 위해 데이터를 전달하는 법을 배울 거에요.

 

starter 프로젝트 다운받고 샘플 데이터와 친해져 봅시다 !!

 

 

시작해볼까요?

 

 

 

Step 1.

 - 프로젝트 네비게이터에서 'Models > Landmark.swift' 순으로 선택합니다.

 - 'Landmark.swift' 는 랜드마크의 구조(structure, 아이디, 이름, 주, 공원 등을 선언해 둔 파일이죠)를 선언하고 있어요. 이 구조는 앱이 표시를 위해 필요로 하는 모든 랜드마크 정보를 저장하고 있지요. 그리고 'LandmarkData.json' 파일로부터 랜드마크 데이터 배열을 불러오는(import) 역할도 합니다.

 

 

Step 2.

 - 프로젝트 네비게이터에서 Resources > landmarkData.json 순으로 선택하세요.

 - 이 샘플 데이터는 이 튜토리얼 뿐 아니라 다음 튜토리얼에서도 사용할 거에요.

 

 

 

Step 3.

 - 이전 튜토리얼에서의 ContentView 의 타입(type)이 이제 'LandmarkDetail' 이라 이름이 붙은 것에 주목하세요. (타입 말고 이름 아닌가..?)

 - 다음의 튜토리얼들과 이번 튜토리얼에서 몇 개의 추가적인 뷰 타입(view types) 들을 만들어 볼거에요. (아...)

 

 

 

---

 

Section 2 - 행 뷰(Row View) 생성하기

 

  이번 튜토리얼에서 만들어 볼 첫번째 뷰는 각 랜드마크에 대한 세부 내용들을 보여주기 위한 행(a row) 입니다. 이러한 행 뷰(Row view)는 뷰가 표시하는 랜드마크를 위해 프로퍼티 내에 정보(infomation)를 저장합니다. 그렇기 때문에 하나의 뷰는 어떤 랜드마크이든지 표시할 수 있게 됩니다. 후에 랜드마크들의 리스트로 다수의 행(multiple rows)을 결합시키는 것도 해볼거에요.

 

 

 

 

Step 1. 

 - 새로운 SwiftUI View 를 만드세요. 이름은 'LandmarkRow.swift' 입니다.

 

 

Step 2.

 - 만약 미리보기(preview)가 보이지 않을 경우, 'Editor > Editor and Canvas' 를 선택하여 캔버스를 보여줍니다. 

 - 그리고 나서 'Get Started' 를 클릭해주세요.

 

 

Step 3.

 - landmark 를 LandmarkRow 의 저장 프로퍼티로 추가해주세요. (이 프로퍼티의 타입이 Landmark 임에 주의하세요!)

 - landmark 프로퍼티를 추가할 때, 미리보기(preview)는 작업을 멈추게 되는데, LandmarkRow 타입이 초기화 동안 landmark 인스턴스를 필요로 하기 때문입니다. (어떻게 보면 당연한 거네요..!)

 

 

 

미리보기(preview)를 올바르게 만들기 위해, 미리보기 프로바이더(preview provider) 를 수정해야 합니다.

Step 4 를 따라가세요.

 

 

Step 4.

 - 아래의 LandmarkRow_Previews 의 정적(static) 프로퍼티인 'previews' 내부에 LandmarkRow 이니셜라이저로 landmark 파라미터(parameter)를 아래 사진과 같이 추가합니다. 이 이니셜라이저는 landmarkData 배열의 첫 번째 요소를 특정짓고 있어요([0] 부분).

 - 미리보기를 보면 'Hello World' 라는 텍스트를 표시한 것을 볼 수 있구요. (당연한 사실이죠. 이제 이 부분을 건드릴거에요)

 

 

이것을 수정하면, 여러분은 행에 대한 레이아웃을 만들어 낼 수 있어요.

 

Step 5.

 - HStack 내에 기존의 텍스트 뷰를 넣어주세요. (음 근데 생각해보니 ! 가 없네요.. 애플의 실수인가)

 

Step 6.

 - 'landmark.name' 을 사용하기 위해서 텍스트 뷰를 다음과 같이 수정해주세요.

 

 

참고 : (Section 1 > Step 2 에서 보았던 landmarkData.json 파일의 일부입니다 !)

 

 

 Step 7.

 - 텍스트 뷰 전에 이미지를 다음과 같이 추가함으로서 행을 완성하세요.

 

 

 

중간에 포스팅이 날아가주는(?) 현상으로 인해 다시 작성하느라 힘들었네요.. 임시 저장을 생활화 하도록 해야겠어요.

다음 포스팅에서는 Section 3 부터 알아보도록 하겠습니다. 고생하셨습니다.