SwiftUI 튜토리얼 4편 — List와 Navigation
지난 편에까지 연재를 하고 레퍼런스 찾기가 다소 까다로워서 한동안 연재를 안 하고 있었는데 최근 정말 많은 레퍼런스들이 나오면서 다시 연재하게 되었습니다.
리스트와 네비게이션은 앱 개발에 있어 물과 소금 같은 존재입니다. 이번 편에는 기본 내비게이션 이동에 대해 다루고 차후에 API와 같은 원격 데이터를 이용한 처리를 다루어보겠습니다.
이미지 리소스 다운받기
이미지는 저작권 문제가 없는 https://pixabay.com/ 사이트의 이미지를 이용했습니다. 아무 이미지나 이용을 해도 상관은 없습니다. 만약 위 사이트에서 다운로드하여 사용한다면 제일 작은 사이즈로만 다운로드하셔도 충분합니다.
이미지를 다운로드한 후 Assets/xcassets에 추가했습니다. 이름은 car1, car2, car3로 지정하였습니다.
리스트뷰 만들기
먼저 프로젝트를 만들고 모델을 위한 Swift 파일을 만들어주세요. 프로젝트 생성 옵션에서 인터페이스는 이전과 같이 SwiftUI로 선택해주세요.
다시 ContentView로 돌아가 더미 데이터를 이용해 리스트를 만들 차례입니다.
위 코드의 9번째줄에서 Text(carMakers.name)와 같이 리턴해주었기때문에 텍스트뷰만 출력됩니다. 너무 심심해보여 조금 더 꾸며주겠습니다.
Stack과 Image, Text에 대한 내용은 이전에 다루었던 내용들이라 넘어가겠습니다. 다음으로 각 각 Row를 선택했을 때 다른 화면으로 이동하는 네비게이션을 구현할 차례입니다.
크게 두 가지 변화가 생겼습니다. 첫 번째를 navigationBarTitle 옵션으로 인하여 타이틀이 생겼습니다. 두 번째는 각 row들의 오른쪽에 화살 괄호가 생기며 클릭하게 되면 화면이 내비게이션 됨을 알 수 있습니다.
이번에도 Destination으로 Text뷰만 주었기때문에 텍스트 라벨 하나입니다. 별도의 파일을 생성하여 조금 더 꾸며보겠습니다.
CarMarkerDetail 파일을 생성하고 생성할 땐 꼭 SwiftUI View 타입으로 선택해주셔야 타이핑 해야 할 량이 상당히 줄어듭니다
CarMarkerDetail 뷰는 carMaker를 인자로 받습니다. Xcode의 Preview 화면에서는 인자가 정의되어있지 않기때문에 PreviewProvider를 정의하지 않으면 렌더링할 데이터가 없어 미리보기를 할 수 없습니다. 미리보기를 위해 코드를 수정하겠습니다.
previewProvider까지 정의해주고 나면 Canvas 화면의 미리보기에서도 확인할 수 있습니다. 미리보기까지 잘 나오는걸 확인했으면 루트뷰의 Destination을 우리가 만든 Detail뷰로 수정할 차례입니다. ContentView로 이동합니다.
CarMarkerDetail로 수정하고 Preview를 통해 잘 동작하는걸 확인합니다.
이전 3편에서 버튼을 이용한 Alert 사용을 한다고 하였다가 갑자기 내비게이션으로 선회하여… 😓 보답하고자 이미지 뷰에 간단히 Alert도 하나 넣어보겠습니다.
이미지를 더블 탭 하면 다이얼로그가 보입니다. 다음편에는 다양한 바인딩 방법에 대해 알아보겠습니다.
