사는 이야기

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: ..

struct StickyTopSearchBar: View { @State private var searchQuery = "" @State private var offset: CGFloat = 0 @State private var startOffset: CGFloat = 0 @State private var titleOffset: CGFloat = 0 @State private var titleBarHeight: CGFloat = 0 var body: some View { ZStack(alignment: .top) { VStack { if searchQuery == "" { HStack { Button { } label: { Image(systemName: "person") .font(.title2) .f..

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..

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는 드래그하는 동안 전달되는 데이..

아래 구현은 하단 화면을 스와이프하거나 커스텀 상단 탭 버튼을 클릭하여 탭 화면 이동한다. 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..

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("..