[Feat] 온보딩 ~ 앨범선택 뷰 UI 구현

[yungu0010]

온보딩부터 앨범선택뷰로 이어지는 구간을 구현했습니다.

구현 부분

알게 된 점

scaleToFit vs scaleToFill

scaleToFit	scaleToFill
가로 세로 비율을 유지하면서 부모 뷰에 맞춰 뷰의 크기를 조정	뷰의 비율을 유지하면서 부모 뷰에 맞게 채우는 뷰

출처: 공식문서

ForEach

A structure that computes views on demand from an underlying collection of identified data.

struct ForEach<Data, ID, Content> where Data : RandomAccessCollection, ID: Hashable

Collection 데이터를 기반으로 View를 계산하는 구조체
여기서 구조체는 View Container 역할을 하는 다른 구조체와 같은 뜻 -> ForEach가 다른 반복문과 다른 점이 바로 이 뷰 컨테이너 역할을 한다는 점이다!!!

• 범위로 Range<Int>는 사용 가능하지만 ClosedRange<Int>는 사용 불가
• ForEach문이 요구하는 Data는 반드시 RandomAccessCollection이어야 함
• 또한 상술한 것처럼 Identifiable을 만족해야 함. 만약 데이터가 Identifiable을 만족하지 않으면 .self를 사용하여 item의 각 id를 지정해줄 수 있음

ForEach(array, id: \.self) { str in
    Text(str)
}

• .self로 사용한 ID의 경우 Hashable을 만족해야 함. Hashable은 func hash(into:)메서드를 가지고 있어야 충족하지만 우리가 사용하는 Int, String, Float, Boolean 등의 타입은 Hashable을 만족하고 있음

참고

Gesture

구현시 사용하지 않지는 않았음 ! -> TabView로 대체

func gesture

뷰에 정의된 제스처보다 낮은 우선순위로 제스처를 뷰에 연결

nonisolated
func gesture<T>(
    _ gesture: T,
    including mask: GestureMask = .all
) -> some View where T : Gesture

• gesture :뷰에 첨부하는 제스처
• mask: 이 제스처를 뷰에 추가하는 것이 뷰와 하위 뷰에서 인식하는 다른 제스처에 어떤 영향을 미치는지 제어하는 값. 기본값은 all

gesture 종류는 TapGesture, SpatialTapGesture, LongPressGesture, SpatialEventGesture, DragGesture, WindowDragGesture, MagnifyGesture, RotateGesture, RotateGesture3D, SequenceGesture, SimultaneousGesture, ExclusiveGesture가 있음..
그 중에서 DragGesture만 살펴봄

DragGesture

| 드래그 이벤트 시퀀스가 변경되면서 동작을 호출하는 제스처

init(
    minimumDistance: CGFloat = 10,
    coordinateSpace: some CoordinateSpaceProtocol = .local
)

• minimumDistance: 제스처를 하기 위한 드래그 최소 거리
• coordinateSpace: 드래그하는 위치의 좌표 공간

Gesture Function

모든 제스처에서는 세 가지 func을 사용할 수 있음
1️⃣ updating(_:body:) : 제스처 값이 변경될 때 제공된 제스처의 상태값 변경
2️⃣ onChanged(_:) : 제스처의 값이 변화할 때 액션 추가
3️⃣ onEnded(_:) : 제스처가 끝났을 때 액션 추가

GestureState

** 사용 예시 **

.gesture(
    DragGesture()
        .updating($dragAmount) { current, gestureState, transaction in
            gestureState.width = current.translation.width
        }
        .onEnded({ value in
            let increment = Int((-value.translation.width / UIScreen.main.bounds.width).rounded())
            selectedIndex = max(min(selectedIndex + increment, 3), 0)
        })
    )

이렇게 하면 실제 자연스러운 carousel이 나오진 않음!!!
updating 내부에서는 현재 상태인 current.translation.width 값을 gestureState에 업데이트 해줌.

참고
참고

TabView

NavigationStack + NavigationLink

ButtonStyle

LazyGrid