개발/iOS (8) 썸네일형 리스트형 [SwiftUI Essentials] Handling User Input - 2 지난 포스팅에서는 데이터에 저장된 Favorites 속성을 읽어 LandmarkRow에 별 이미지를 추가하였고, @State 상태 변수를 사용하여 원하는 조건에 따라 리스트에서 원소를 보이도록 하는 기능을 구현하였다. 이번 포스팅에서는 실제로 사용자가 사용할 수 있도록 Toggle을 사용하여 좋아하는 장소만 확인할 수 있도록 하는 기능을 구현하고 사용자가 직접 좋아하는 랜드마크를 표시할 수 있도록 하는 기능을 튜토리얼을 따라가며 구현해보려고한다. Toggle 기능 구현하기 이전에 구현한 기능은 사용자가 코드에서 @State 변수인 `showFavoritesOnly`를 일일히 바꿔줬어야만 가능했다. 하지만 어플리케이션에서 사용자가 직접 코드를 수정할 수 없기 때문에 사용자가 컨트롤 할 수 있도록 만들어줘야.. [SwiftUI Essentials] Handling User Input - 1 지난 튜토리얼들을 통해 이미 작성된 랜드마크 데이터를 활용하여 랜드마크 List view를 만들었고 조회를 원하는 랜드마크를 선택하였을 때 해당 랜드마크의 세부 정보를 볼 수 있는 화면으로 이동하는 Navigation 기능을 구현하였다. 랜드마크의 세부 정보 화면에서는 이전 화면에서 정보를 받아 MapKit을 통해 위도와 경도 좌표로 랜드마크의 위치를 표시하였고(MapView) 이미지를 보여주고(CircleImage)나 랜드마크의 이름, 세부 정보 등을 보여주는 View를 구현하였다. 여태까지 작성한 어플리케이션은 유저의 상호작용이 많이 들어가지는 않는다. 유저는 단순히 리스트를 보다가 원하는 랜드마크를 선택하고 원하는 랜드마크의 세부정보를 보기만 할 뿐이다. 지금부터 시작할 Handling User I.. [SwiftUI Essentials] Building Lists and Navigation - 4 지난 작업에서는 저장된 데이터 베이스를 활용하여 LandmarkList.swift를 구현하였다. 이번 튜토리얼에서는 구성한 list view를 눌렀을 때 세부 정보를 보여주는 LandmarkDetail.swift를 작성하고, 리스트를 눌렀을 때 화면을 연결하는 Navigation에 대한 내용을 다루고 있다. 우선, LandmarkDetail.swift 파일을 새로 생성하고 기존에 ContentView에 있는 내용을 복사-붙여넣기 한다. 그리고 ContentView에는 LandmarkList()를 넣어준다. 이제 우리의 앱은 초기 화면인 LandmarkList와 각 리스트에 있는 랜드마크를 눌렀을 때 각 랜드마크에 해당하는 디테일한 정보를 볼 수 있는 LandmarkDetail의 두 가지 화면으로 구성되게.. [SwiftUI Essentials] Building Lists and Navigation - 3 지난 작업에서는 landmark 리스트를 구성하기 위한 view인 LandmarkRow.swift를 만드는 작업을 했었다. 지난 작업을 통해 만든 view를 토대로 list view를 작성하는 방법을 다룬 튜토리얼을 따라하려고 한다. 우선, SwiftUI에서는 List를 통해 list view를 지원하고 있다. 이 때, 정적(static)으로 구성하는 방법과 동적(dynamic)하게 구성하는 두 가지 방법이 있다. 정적으로 list view 구성하기 정적이라는 말은 일종의 하드코딩을 한다는 뜻으로 생각하면 된다. 불러온 데이터 전체를 사용하는 것이 아닌 불러온 데이터를 일일히 붙여주는 방식을 사용한다. import SwiftUI struct LandmarkList: View { var body: some.. [SwiftUI Essentials] Building Lists and Navigation - 2 지난 작업에서는 랜드마크들의 정보들이 저장되어 있는 json 파일을 앱의 View에서 사용하기 위해서 구조체를 만들고, 파일을 읽어오는 구문을 작성하였다. 오늘의 포스팅은 Section 2. Create the Row View에 해당하는 튜토리얼을 진행하며, 중간 중간 배운 내용을 정리하려고 한다. 이 section에서는 리스트를 구성할 row view를 작성한다. LandmarkRow.swift row view에 해당하는 SwiftUI 파일을 Views 경로 내에 생성한다. 지난 번 작업에서 코드 리팩토링의 일환으로써 model과 view에 해당하는 코드를 경로로 구분하여 저장하였다. 우선, 불러온 데이터 중 하나를 가져와서 화면을 구성하는 작업을 진행한다. 불러온 데이터를 저장하기 위해 멤버 변수로 .. [SwiftUI Essentials] Building Lists and Navigation - 1 지난 튜토리얼에서는 SwiftUI를 활용해서 여러 가지 View를 한 화면에 보이는 방법에 대해서 알아보았다. 이번 튜토리얼은 지난 번 만든 Landmark에서 나아가, 여러 다양한 랜드마크의 정보를 담고 있는 동적인 스크롤 리스트를 만드는 방법에 대해서 알아보는 튜토리얼이다. 또한, 서로 다른 크기를 가진 기기에 대응하는 방법에 대해서도 다룬다. 우선, 이번 포스팅에서는 랜드마크들의 정보가 저장된 json 파일로부터 데이터를 읽어, View에서 보이기 위한 사전 과정에 대해서 할 예정이다. Landmark.swift - 첫 번째 단계에서는 View에서 각 랜드마크의 정보에 대해서 보여줄 정보를 불러온다. 튜토리얼에서 제공하는 Resources 파일을 프로젝트 폴더 내로 복사한다. 이 때, 설정은 아래 .. [SwiftUI Essentials] Creating and Combining View - 2 지난 글에서는 Apple Developer에서 제공하는 SwiftUI 튜토리얼의 첫 번째의 완성된 모습을 살펴보고, SwiftUI에서 배운 내용을 정리하였다. 이번 포스팅에서는 전체를 이루고 있는 MapView와 CircleImage가 어떻게 구성되어 있는지, 어떤 점을 배울 수 있었는지에 대해서 정리해보려고 한다. MapView MapView는 Swift에서 `MapKit`을 import해서 구현한다. 튜토리얼에서는 'Turtle Rock'의 위치를 지도로 표시해주었으나, 나는 익숙한 서울역의 좌표로 대체하여 표현하였다. 우선, MapView를 새롭게 만들어주저야 한다. Xcode 상에서 cmd + n 버튼을 조합하여 새로운 파일을 생성한다. 이때, SwiftUI를 사용하기 위해서는 User Inter.. [SwiftUI Essentials] Creating and Combining View - 1 이 시리즈는 Apple Developer에서 튜토리얼로 제공하는 SwiftUI Tutorials를 연습하며 정리한 글이다. 가장 첫 번째 튜토리얼은 여러개의 View, 즉 화면 구성을 하는 방법을 SwiftUI를 활용하여 작성하는 방법에 대해서 안내하고 있다. 완성된 화면은 다음과 같다. 원본 튜토리얼에서는 Turtle Rock이라는 캘리포니아에 있는 자연물을 했지만, 한국에 맞춰 서울역 정보로 바꾸어 보았다. import SwiftUI struct ContentView: View { var body: some View { VStack { MapView() .ignoresSafeArea(edges: .top) .frame(height: 300) CircleImage() .offset(y: -130) .p.. 이전 1 다음
