[SwiftUI] Infinite Carousel 구현하기 1 (feat. Timer)

 

 

프로모션 팝업 화면을 담당해서 만들었는데, 무한 스크롤(이미지 배열 순환) + 타이머 작동이 가능토록 구현을 해야했다.

 

- 내가 구현하고자 한 것:

 

1. 첫번째 인덱스 이미지에서 왼쪽으로 스와이프 하면 마지막 인덱스 이미지가 나오고, 마지막 인덱스에서 오른쪽으로 스와이프하면 첫번째 인덱스 이미지가 나오는 무한 순환 구조의 스크롤

2. 별도의 제스처가 없으면 3초마다 이미지 변경 + 이미지 배열 순환

3. 유저가 수동으로 스와이프 시 배열 순서에 맞게 이미지 변경 + 인디케이터 변경

 

- 내가 겪은 것:

 

1. 타이머 조절이 되지 않아서 이미지를 반만 스와이프 했을 때 반씩 나온 이미지들이 이전/다음 이미지로 변경 + 타이머 작동

2. 수동으로 스와이프 해서 타이머 멈추게 했을 시 다시 작동이 되지 않는 이슈 --> DragGesture의 onEnded가 인식 되지 않음

3. 이미지의 인덱스가 바뀌지 않으면 타이머 미작동

 

 

2번의 문제 같은 경우 애플에서 구체적으로 설명해준 걸 찾을 수 없었는데, stack overflow에서 비슷~한 문제를 겪는 글 중 위와 같은 추측 답변을 발견했다. 나는 tabview로 무한 스크롤을 구현 했기 때문에 어라? 싶었으나, tabview도 스크롤 기능을 가지고 있기 때문에 동일한 문제인 것 같았다.

 

드래그 액션과 스크롤 액션이 충돌 나서 onEnded는 인식이 불가한게 아닐까 아무래도 SwiftUI로 몇 번 액션과 관련한 일을 해결하다보니 스크롤 액션과 드래그 제스처의 우선순위를 굳이 따지자면 스크롤뷰/탭뷰의 드래그 제스처 > 제스처의 드래그 제스처인 모양이었다.

 

 

- 해결방안:

 

무한 스크롤을 scroll이 가능한 view를 사용 안 하면 되겠지만 (실제로 바로 아래에 추가한 다른 분의 velog 게시글을 참고하면 될 것 같다) 이미 tabview로 구현하기도 했고, 다시 코드를 짜기엔 시간이 부족해서 원래 구현해놓은 view에서 dragGesture와 인덱스 추적으로 해결하기로 했다.

 

SwiftUI로 네이버웹툰 상단 배너 만들기

 

 

 

 

구현

 

 

 

 

 

 

- 무한 스크롤을 보조할 커스텀 뷰:

 

import SwiftUI

struct InfinitePageView<C, T>: View where C: View, T: Hashable {
  @Binding var selection: T
  
  // 이전 항목을 계산함
  let before: (T) -> T
  // 다음 항목을 계산함
  let after: (T) -> T
  
  // 뷰 생성
  @ViewBuilder let view: (T) -> C
  
  // 현재 탭 인덱스 저장
  @State private var currentTab: Int = 0
  
  var body: some View {
    
    // 이전 및 다음 아이템 계산
    let previousIndex = before(selection)
    let nextIndex = after(selection)
    
    TabView(selection: $currentTab) {
      
      // 이전 항목 표시 뷰
      view(previousIndex)
        .tag(-1)
      
      // 현재 뷰
      view(selection)
        .onDisappear() {
          if currentTab != 0 {
            selection = currentTab < 0 ? previousIndex : nextIndex
            currentTab = 0
          }
        }
        .tag(0)
      
      // 다음 항목을 표시하는 뷰
      view(nextIndex)
        .tag(1)
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
    
    .onChange(of: selection) { _, newValue in
      selection = newValue
    }
    
    // FIXME: workaround to avoid glitch when swiping twice very quickly
    // 탭이 0이 아닐 때 스와이프를 비활성화하여 빠른 스와이프 시 발생하는 글리치 방지
    .disabled(currentTab != 0)
    
  }
}

 

위 코드는 아래 references 항목을 더 참고하면 좋을 것 같다.

거기서 찾은 코드의 자세한 설명을 보고 내 상황에 맞게 살짝 변경했기 때문에 각자 상황에 맞게 변경하면 될 것 같다.

 

 

 

 

- 타이머 및 액션 구현:

 

extension TimerSlides {
  
  // MARK: - Slides
  /// 다음 아이템으로 이동
  private func moveToNextIndex() {
    let nextIndex = (currentIndex + 1) % colors.count
    withAnimation() {
      currentIndex = nextIndex
    }
  }
  
  // MARK: - Timer
  /// 타이머 작동 (시작)
  private func startTimer() {
    /// 기존 타이머가 있으면 중지
    stopTimer()
    /// 3초마다 반복되는 타이머 설정
    timer = Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { _ in
      moveToNextIndex()
    }
  }
  
  /// 타이머 작동 멈춤
  private func stopTimer() {
    /// 타이머 무효화 + nil로 설정
    timer?.invalidate()
    timer = nil
  }
  
  /// 사용자가 수동으로 슬라이드 넘기려고 할 때 DragGesture
  /// - 인덱스가 바뀌지 않으면 타이머가 계속 가동
  /// - 인덱스가 바뀌면 타이머가 멈추고 다시 가동
  private func manageTimerWithIndex() -> some Gesture {
    /// 커스텀 제스처
    var userDragGesture: some Gesture {
      /// gaurd 조건: 드래그 동작 중 인덱스가 변경되었는지 확인
      guard currentIndex == currentIndex else {
        /// 인덱스가 바뀌면 타이머 멈춤 O
        return DragGesture(coordinateSpace: .global)
          .onChanged { _ in
            stopTimer()
          }
      } // guard
      
      /// 인덱스가 바뀌지 않으면 타이머 멈춤 X
      return DragGesture(coordinateSpace: .global)
        .onChanged { _ in
          DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            startTimer()
          }
        }
    }
    /// 커스텀한 제스처 반환
    return userDragGesture
  }
  
   // MARK: - Indicator
  /// 이미지 커스텀 인디케이터
  private func imageCustomIndicator() -> some View {
    ZStack {
      if colors.count > 1 {
        HStack(spacing: 4) {
          ForEach(colors.indices, id: \.self) { index in
            Capsule()
              .stroke(.white, lineWidth: 1)
              .frame(width: currentIndex == index ? 16 : 6, height: 6)
              .opacity(currentIndex == index ? 1 : 0.5)
              .background(currentIndex == index ? .white : Color.clear)
          }
        } // H
        .padding(.bottom, 24)
      } // if
    } // Z
  }

}

 

이 게시글에서 가장 중요한 부분은 타이머와 드래그 제스처를 구현한 위 부분이다.

 

- moveToNextIndex: 함수 이름에서 알 수 있듯이 현재 인덱스에서 +1 한 인덱스, 즉 다음 인덱스 값을 계산하는 함수다. 이 함수는 타이머가 작동하면 자동으로 다음 컬러가 나오도록 해줄 때 사용된다.

 

- startTimer: 타이머 설정과 더불어 설정한 타임이 지나면 컬러를 자동으로 넘겨주는 역할을 한다. 타이머를 리셋하는 stopTimer()를 포함한 건, 기존 타이머를 리셋해주지 않으면 액션이나 시간이 충돌날 수 있기 때문이다.

 

- stopTimer: 타이머를 리셋 및 정지 해주는 역할을 한다.

 

- manageTimerWithIndex: 드래그 제스처에서 onEnded가 디버깅을 타지 않아서, 내 상황에선 해당 기능이 적용이 되지 않는 걸 알게 되어서 구현하지 않았다.

 

대신 우회적인 방법으로 드래그를 시작했을 때,

 

1. dragGesture의 onChanged 감지

2. 드래그 액션이 감지 되었기 때문에 충돌 방지를 위해 타이머를 멈춘다 (stopTimer 실행)

3. 인덱스가 바뀌었다 -> 사용자의 드래그 액션이 멈췄다 -> 타이머를 실행해서 다시 컬러를 자동으로 순환한다 (startTimer 실행)

4. 드래그 액션이 감지 (stopTimer 실행) 되었는데 인덱스가 안 바뀌었다 ->  멈춘 타이머를 실행시켜 다시 자동으로 순환시킨다 (startTimer 실행)

5. 인덱스가 바뀌지 않았을 때, 타이머가 그대로 돌아가면 컬러 전환 타임이 부자연스러워서 dispatchQueue.main.asyncAfter로 0.5초 정도 늦춰서 작동하도록 했다.

 

..하는 방식으로 순환되도록 해주는 함수다. 즉, 나는 dragGesture의 trigger를 드래그 그 자체로 하면 탭바 액션과 혼돈되기 때문에 currentIndex로 지정하여 내가 구현하고자 한 부분들을 구현했다.

 

사실 베스트인 방법은 아닌 것 같은데(startTimer와 stopTimer가 딱 깔끔히 선언된 게 아니라서), 일단 오류가 나거나 구현 실패한 부분은 확인 되지 않아서 위와 같은 방법을 유지하기로 했다. 계속 리팩토링 하고 있기 때문에 더 나은 방법이 있거나 찾으면 그때 다시 수정하기로.

 

 

- 메인 슬라이드 뷰 구현:

 

import SwiftUI
import Combine

struct TimerSlides: View {
  
  // MARK: - properties
  /// 무한으로 순환할 배열
  var colors: [Color] = [.red, .orange, .yellow, .blue, .green]
  /// 애니메이션 타이머
  @State private var timer: Timer?
  /// 현재 인덱스 저장
  @State private var currentIndex = 0
  
  // MARK: - body
  var body: some View {
    
    // MARK: - Image Slide
    InfinitePageView(
      selection: $currentIndex,
      before: { $0 == 0 ? colors.count - 1 : $0 - 1 },
      after: { $0 == colors.count - 1 ? 0 : $0 + 1 },
      view: { index in
        
        ZStack {
          Rectangle()
            .fill(colors[index])
            .tag(index)
        } // Z
        .ignoresSafeArea()
        
      }) // InfinitePageView
    .ignoresSafeArea()
    
    // 인덱스 변화
    .onChange(of: currentIndex, { _, newIndex in
      currentIndex = newIndex
      startTimer()
    })
    
    // MARK: - 액션
    // 수동 드래그 시 타이머 조정 액션
    .gesture(manageTimerWithIndex())
    
    // MARK: - 인디케이터
    .overlay(
      alignment: .bottom,
      content: { imageCustomIndicator() }
    ) // Overlay
    
    // MARK: - LifeCycle (타이머 작동 관리)
    .onAppear {
      startTimer()
    }
    .onDisappear {
      stopTimer()
    }
    
  } // body
} // view

 

 

- onAppear에서 해당 뷰가 그려지자마자 startTimer를 호출하여 컬러 배열이 3초마다 자동으로 순환하게 한다.

- onChange와 gesture를 통해 상황에 맞게 타이머가 멈췄다가 다시 작동 되도록 한다.

- onDisappear에서 해당 뷰가 사라질 때 stopTimer를 호출하여 타이머를 해제한다.

 

Indicator 부분은 커스텀해서 적용한 거기도 하고, 이전에 쓴 글도 있어서 인디케이터 커스텀은 해당 글을 참고하는 걸 추천한다.

 

https://calliek.tistory.com/45

[SwiftUI] TabView page indicator 커스텀하기

 

스유로 작업을 하게 된 초기에 짠 코드라 수정해야할 게 조금 보여서 조만간 글 수정을 해야할 것 같지만,,,^^,,,,

 

 

 

 

 

 

 

 

References

 

https://sheep1sik.tistory.com/144

[ SwiftUI ] 광고배너 만들기

 

 

https://stackoverflow.com/questions/65457609/bidirectional-infinite-pageview-in-swiftui

Bidirectional infinite PageView in SwiftUI

 

 

https://stackoverflow.com/questions/64424719/draggestures-onended-never-called-if-canceled-by-scrollview

DragGestures onEnded never called if canceled by ScrollView