SwiftUI 8

SwiftUI Tutorials_ Image Picker

KavSoft의 튜토리얼 : Image Picker KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.1 iOS 16.1 ** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다. 이번 내용은 SwiftUI에서 Image Picker를 사용하기 위한 방법에 대해 학습합니다. 이 예제에서는 UIViewControllerRepresentable을 통해 이미지 피커를 띄우지만 ImagePicker에 대해 조금 알아본 결과 최근(?) PhotoPicker가 생긴 듯합니다. 그래서 우선 이번 예제를 정리해보고 PhotoPicker를 사용해서 구현해보려고 합니다. (처음 Data와 관련된 부분이..

[공식문서] SwiftUI_ ContextMenu

공식 문서 : contextMenu Declaration func contextMenu(menuItems: () -> MenuItems) -> some View where MenuItems : View Return type context menu를 표현할 수 있는 뷰 Parameters menuItems 메뉴의 내용을 생성하는 클로저. 클로저에서 아무것도 반환하지 않고 컨텍스트 메뉴를 비활성화할 수 있습니다. Discussion 이 modifier를 사용해서 앱의 유저 인터페이스의 뷰에 context menu를 추가합니다. menuItems 클로저에서 버튼, 토글, 피커와 같은 컨트롤을 반환하여 메뉴를 구성할 수 있습니다. 또한 Menu를 사용해서 항목을 그룹화하기 위해 하위 메뉴나 Section을 정의..

SwiftUI Tutorials_ Context Menu

KavSoft의 튜토리얼 : Context Menu KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.1 iOS 16.1 ** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다. 이번 내용은 이미지를 선택하여 Context Menu를 띄워보는 것을 학습합니다. 이미지 하나를 준비하고 추가합니다. 앞에 Image와 관련된 modifier들을 제외하고 Context Menu와 관련된 것은 .contextMenu modifier 부분입니다. 영상 예제는 Image와 Text를 사용하였지만 당연하게도 Label 을 대신 사용할 수 있습니다. struct ContextMenu: View { ..

SwiftUI Tutorials_ Search Bar

KavSoft의 튜토리얼 : Search Bar KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니ㅏㄷ. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.1 iOS 16.1 ** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다. 이번 내용은 SwiftUI에서 SearchBar를 사용하기 위한 방법을 학습합니다. SwiftUI에서 기본적으로 SearchBar를 제공해주지 않기 때문에 직접 SearchBar를 구현하거나 UISearchBar를 사용하여 구현할 수 있습니다. 이 영상에서는 UISearchBar를 사용하여 구현하는 방법을 알려주지만 직접 구현하는 방법도 함께 작성해보려 합니다. 1. UISearchBar 사용하기 UIKit에..

SwiftUI Tutorials_ TopBar Style TabView

KavSoft의 튜토리얼 : TopBar KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.1 iOS 16.1 ** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다. 이번 내용은 Picker를 사용하여 TopBar 스타일의 탭뷰를 만드는 것을 학습합니다. 먼저 탑바 탭뷰에 보여질 세 개의 뷰를 준비합니다. ... 지만! 지난 번에 탭뷰 튜토리얼에서 사용했던 코드를 그대로 쓰겠습니다. struct Page1 : View { var body: some View { Text("Hello from page 1") .fontWeight(.heavy) } } struct Page2 : Vie..

SwiftUI Tutorials_ TabView

KavSoft의 튜토리얼 : Tabbed View KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.0.1 iOS 16.0 ** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다. 이번 내용은 아주 기본적인 탭뷰 사용에 대한 것을 학습합니다. 먼저 탭뷰에 보여질 세 개의 뷰를 준비합니다! 당연히 4개 5개도 준비할 수 있습니다. struct Page1 : View { var body: some View { Text("Hello from page 1") .fontWeight(.heavy) } } struct Page2 : View { var body: some View { Text("..

SwiftUI Tutorials_ Json Parsing

KavSoft의 튜토리얼 : Json Parsing KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.0.1 iOS 16.0 이번 내용은 json 데이터를 읽어 리스트 형태로 보여주는 것을 학습한다. 이번 내용에 사용되는 데이터와 관련 패키지는 다음과 같다. 실습 json 데이터 SCWebImageSwiftUI ** 코드는 일부 수정하여 영상과 조금 다를 수 있다. json 데이터로 부터 받아올 데이터 모델을 먼저 정의한다. ** Identifiable을 사용하는 경우 id 속성이 반드시 필요하며, 이 경우 List에서 id 값을 전달하지 않아도 된다. ** 받아진 데이터 타입을 디코..

SwiftUI Tutorials_ GridView

KavSoft 의 튜토리얼 : Grid View KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다. 따라서 이 글은 위 튜토리얼에 대한 정리 글입니다. Xcode 14.0.1 iOS 16.0 이번 내용은 Stack 을 사용해서 GridView 형태로 이미지를 그리는 것이다. 6장의 이미지를 준비하여 asset에 추가해 둔 뒤 한 행에 하나의 이미지를 column의 개수만큼 보여지도록 구현하였다. ** 코드는 일부 수정하여 영상과 조금 다를 수 있다. 이미지의 사이즈 또한 width와 height가 같도록 size를 두었다. ScrollView의 frame을 설정한 이유는 그냥 없이 구현하니 스크롤 뷰의 width가 컨텐츠의 폭에 맞춰져 추가적으로 설정해..