SwiftUI 11

[SwiftUI] MapKit - 기본

MapKit 설명SwiftUI는 iOS, macOS, watchOS 및 tvOS에서 사용자 인터페이스를 구축하는 데 사용되는 Map 프레임워크입니다. iOS 기준으로 iOS 14버전 이상부터 사용할 수 있습니다.SwiftUI에서 제공하는 Map 뷰를 사용하면 지도를 표시하고, 마커와 같은 추가 요소를 사용하여 위치 정보를 시각화할 수 있습니다. SwiftUI Map 예시 코드import SwiftUIimport MapKitstruct ContentView: View { @State private var region = MKCoordinateRegion( center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194), ..

Dev-iOS/iOS 2024.09.09

[SwiftUI] 프로퍼티 래퍼 (Property Wrapper)

프로퍼티 래퍼란?프로퍼티 래퍼는 Swift에서 특정한 방식으로 프로퍼티를 동작시키는 구조를 정의하는 기능입니다.SwiftUI에서는 이 프로퍼티 래퍼를 통해 다양한 동작을 캡슐화하고 코드를 깔끔하게 유지하는데 도움이 됩니다. @State, @Binding, @ObservedObject, @EnvironmentObject 등이 대표적인 예입니다. 왜 프로퍼티 래퍼를 사용하는가?프로퍼티 래퍼를 사용하면 복잡한 로직을 래퍼 내부에 숨기고, 코드의 가독성을 향상시키며, 일관된 방식으로 특정 기능을 제공할 수 있습니다. 예를 들어, SwiftUI의 @State 프로퍼티 래퍼를 사용하면, UI의 상태를 안전하게 관리하고 UI가 상태의 변화를 자동으로 반영할 수 있게 만듭니다.struct ContentView: Vie..

Dev-iOS/SwiftUI 2024.09.09

[SwiftUI] QR 코드 만들기

1. QR 코드 생성 뷰 만들기먼저, QRCodeView라는 뷰를 만들고 사용자가 입력한 텍스트를 QR 코드로 변환하는 방법을 살펴보겠습니다. QR 코드를 생성하기 위해 CoreImage 프레임워크를 사용하며, CIFilter를 활용해 QR 코드를 생성합니다.1.1 기본 뷰 구조다음은 기본 뷰 구조입니다. QRCodeView는 사용자가 텍스트를 입력하고, 해당 텍스트를 QR 코드로 변환하여 화면에 보여줍니다.import SwiftUIimport CoreImage.CIFilterBuiltinsstruct QRCodeView: View { @State private var text: String = "" var body: some View { VStack { Tex..

Dev-iOS/SwiftUI 2024.05.29

[UI] Custom Drawer (Side Menu)- (SwiftUI 2.0 - iOS 14 이상)

Drawer (Side Menu)를 커스텀하게 작성하기 위해서는 기본적으로 아래와 같이 작성해서 기본 구조를 잡습니다. struct DrawserWithTabView: View { @State private var showDrawer: Bool = false var body: some View { HStack(spacing: 0) { Drawer(showDrawer: $showDrawer) TabView { Text("Home") } .frame(width: UIScreen.main.bounds.width) } .frame(width: UIScreen.main.bounds.width) .offset(x: 125) } } struct Drawer: View { @Binding var showDrawer: ..

Dev-iOS/UI 2023.07.21

[UI] pull to refresh - (SwiftUI 2.0 - iOS 14 이하)

SwiftUI에서 ScrollView를 Safari와 같이 스크롤을 아래로 내리면 새로고침을 하는 pull to refresh를 구현해보겠습니다. SwiftUI 3.0 - iOS 15 에서는 .refreshable Modifier를 이용해서 ScrollView 간단하게 사용할 수 있지만 iOS 15 미만에서는 SwiftUI에서 해당 기능을 제공하지 않기 때문에 UIKit의 UIScrollView를 이용해서 구현해야 합니다. UIViewRepresentable UIKit의 UIScrollView와 UIRefreshControl을 활용해야 합니다. UIKit의 뷰를 SwiftUI에서 사용할 수 있도록 UIViewRepresentable 프로토콜을 사용합니다. struct RefreshableScrollVie..

Dev-iOS/UI 2023.07.12

[UI] Drag & Drop - (SwiftUI 2.0 - iOS 14 이상)

SwiftUI에서는 .onDrag와 .onDrop을 사용하여 뷰에 Drag & Drop 기능을 추가할 수 있습니다. SwiftUI에서는 Drag & Drop을 구현하려면 .onDrag / .onDrop Modifier와 DropDelegate가 필요합니다. 1. 필수 항목 1.) .onDrag Modifier .onDrag 는 사용자가 뷰를 드래그할 때 발생하는 액션을 정의합니다. 이 Modifier는 드래그 액션이 시작되는 동안 실행되는 클로저를 파라미터로 받습니다. 이 클로저는 NSItemProvider를 반환해야 합니다. NSItemProvider에 대한 간단한 설명은 이곳에서 -> https://lafortune.tistory.com/17 NSItemProvider는 드래그하는 동안 전달되는 데이..

Dev-iOS/UI 2023.07.12

[UI] 상단 탭 화면 with Animation (SwiftUI 2.0 - iOS 14 이상)

아래 구현은 하단 화면을 스와이프하거나 커스텀 상단 탭 버튼을 클릭하여 탭 화면 이동한다. 1. 상탭 탭 화면 with Animation 1) 구현 UI 2) 구현 코드 // 메인 View struct TabView_SwipeGesture: View { @State private var selectedTab = 0 private let tabs = [TabData(id: 0, name: "아침"), TabData(id: 1, name: "점심"), TabData(id: 2, name: "저녁")] var body: some View { VStack { HStack(spacing: 0) { ForEach(tabs, id: \.id) { tab in TabBarItem(selectedTab: $selecte..

Dev-iOS/UI 2023.07.11

[UI] Carousel (SwiftUI 2.0 - iOS 14 이상)

iOS 14 이상인 SDK에서 TabView를 이용하여 구현한 Carousel List는 아래와 같이 구현해볼 수 있다. TabView는 iOS 13 에서 나온 View이지만 Carousel List 형태로 표시하기 위해 사용되는 tabViewStyle modifier는 iOS 14 이상에서 사용할 수 있다. 1. 단순 Carousel List 1) 영화 이미지 파일 2) 구현 UI 3) 구현 소스 struct CarouselList_TabView: View { @State private var selectedTab = 1 var body: some View { TabView(selection: $selectedTab) { ForEach(1...5, id: \.self) { index in Image("..

Dev-iOS/UI 2023.07.11