학습 노트/UIBreaking (2023) (8) 썸네일형 리스트형 ParallaxEffect 구조 구조는 단순하다. ScrollView 내에 상단에 이미지를 표시할 여백과 내용을 표시할 VStack 등의 View가 존재한다. 구현 ContentList struct ContentList: View { var body: some View { VStack(alignment: .leading) { ForEach(0.. 0 Spacer() .frame(height: isScrolled ? 400 + offsetY : 400) .background { Image("sample") .resizable() .scaledToFill() .offset(y: isScrolled ? -offsetY : 0) .blur(radius: isScrolled ? offsetY / 20 : 0) } } .frame(heigh.. AutoScrolling #06 지금 상태로도 매우 좋지만 밝은 사진과 어두운 사진일 때 Indicator가 다소 단조로워 보이는 것이 아쉽다. 이미지의 평균 색상을 추출하기 iOS나 Mac OS의 현행 디자인 코드는 Flat으로 음영과 그림자 등의 그래픽 적인 요소들을 최대한 배제하고, 색과 선, 레이어의 적층으로 깊이와 구분감을 부여하는 것이 특징이다. 개인적으로 이러한 chillog.page 표시되는 이미지의 평균 적인 색상을 추출할 수 있는 방법이 존재하는데, 이미 작성한 포스팅을 기반으로 적용해 조금 더 자연스럽게 만들어 보자. AverageColorModifier.swift // // AverageColorModifier.swift // AutoScrolling // // Created by Martin.Q on 2023/0.. AutoScrolling #05 Tab을 전환하는 방법은 반드시 하나만 있어야 하는 건 아니다. 지금처럼 Tab들을 좌우로 Swipe 하여 이동할 수도 있지만, Tab들의 이름을 직접 선택해 다음 Tab으로 이동하는 방식도 고려해 볼 수 있다. 이번엔 지금까지 구현한 Tab Indicator에 Tap Gesture를 추가해 Tab 간의 이동을 구현해 본다. TabGesture 추가 before func TabIndicatorView() -> some View { GeometryReader { let size = $0.size let tabWidth = size.width / 3 LazyHStack(spacing: 0) { ForEach(Tab.allCases, id: \.rawValue) { tab in Text(tab.rawValue.. AutoScrolling #04 이번에는 계산된 pageOffset을 기반으로 스크롤의 진행도를 계산한다. Home before let pageOffset = minX - (size.width * CGFloat(tab.index)) print(pageOffset) } 계산된 pageOffset를 출력하는 부분에서 이를 진행하면 될 것이다. after let pageOffset = minX - (size.width * CGFloat(tab.index)) let pageProgress = pageOffset / size.width scrollProgress = pageProgress } pageOffset을 다시 화면의 너비(사진의 너비)로 나누어 주면 다음과 같은 형태로 변환이 된다. imageView의 위치값(offset)이 progr.. AutoScrolling #03 이번엔 Tab Indicator에 적절한 animation을 추가하기 위해 필요한 준비를 해 본다. Tab before enum Tab: String, CaseIterable { case dance = "Dance" case fruite = "Fruite" case mirror = "Mirror" case night = "Night" case road = "Road" } after enum Tab: String, CaseIterable { case dance = "Dance" case fruite = "Fruite" case mirror = "Mirror" case night = "Night" case road = "Road" var index: Int { return Tab.allCases.firstI.. AutoScrolling #02 화면 구성에 필요한 기본 인터페이스를 디자인한다. 사진을 표시할 ImageView들로 구성된 TabView와 해당 TabView와 연동되는 Tab Indicator를 구성한다. ImageView extension Home { func TabImageView(_ tab: Tab) -> some View { GeometryReader { let size = $0.size Image(tab.rawValue) .resizable() .aspectRatio(contentMode: .fill) .frame(width: size.width, height: size.height) .clipped() } .ignoresSafeArea(.container, edges: .bottom) } } 표시할 이미지의 크기를 기기의.. AutoScrolling #01 프로젝트는 MV 아키텍처를 사용한다. MVVM이나 MVC 대신 해당 아키텍처를 사용하도록 Apple을 권장하고 있고, 프로젝트의 구성이 조금 더 단순해진다는 장점이 있다. Assets Assets에는 TabView에 표시할 사진들을 추가한다. 원본은 3000 * 4000 크기의 사진들이지만 너무 과한 해상도의 사진은 비효율적이기에 이후에는 퍼포먼스 문제로 853 * 1280 수준으로 다운사이징 진행했다. Tab.swift // // Tab.swift // AutoScrolling // // Created by Martin.Q on 2023/03/14. // import SwiftUI /// Enum Tab Cases /// - rawValue: Asset Image Name enum Tab: String.. AutoScrolling #00 TabView와 Custom Indicator를 가지는 인터페이스를 구현한다. 크기를 조절하는 등의 방식으로 App의 배너에 유용히 사용할 수 있을 것으로 생각된다. 따라 해볼 강의는 TabView와 TabIndicator 까지만 구현하지만 심미성을 위해 약간의 디자인 요소를 추가해 본다. 기능 참고 강의는 아래와 같은 기능을 가지고 있다. 여러 사진을 하나씩 표현하는 TabView TabView와 연동되는 Custom Tab Indicator Tab Indicator의 양 끝에 적용되는 리바운드 효과 Tab Indicator에 적용되는 Animation 효과 추가적으로 구현할 기능은 다음과 같다. 표시되는 사진의 평균적인 색상을 구하기 구해진 평균 색상을 사용해 사진과 조화로운 Tab Indicator.. 이전 1 다음
