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

 

https://calliek.tistory.com/62

[SwiftUI] TabView + DragGesture로 무한 스크롤 타이머 조절하기

 

문제점:

 

- 불과 일주일 전 같은 맥락의 게시글을 작성했었는데, 해당 방식대로 구현하면 타이머가 작동 될 때 index 변경 시 애니메이션 적용이 안 되는 문제가 있었다.

- 그래서 해당 글에 추가해두었던 블로그글로 전면 수정을 해보았으나, 드래그를 할 때 해당 인덱스의 화면이 드래그 되는 모습이 보이지 않고 액션이 다 끝나고 슬라이드 애니메이션으로 화면이 전환되었다.

 

해결:

 

- 다른 사람들 코드를 커스텀하는 대신 그냥 내가 커스텀하기로 했다^^...

 

 

 

구현 (타이머 X, 오직 infinite Carousel):

 

 

 

 

1. 페이크 아이템을 추가해준다. 

 

/// 페이크 아이템 추가
  private func configureCircularItemList() {
    // 시작과 끝에 마지막, 첫 번째 색상 추가
    colors.insert(colors[colors.count - 1], at: 0)
    colors.append(colors[1])
  }

 

- UIKit으로 무한 스크롤을 구현한 사람들을 보니까, 순환 돌 배열의 0번째와 마지막 인덱스의 앞 뒤로 마지막, 0번째 아이템을 추가해주고 각각 무한스크롤이 되어야 하는 인덱스에 도달하면 보여줘야하는 인덱스를 달리 하는 작은(?) 눈속임 방식을 택했다.

 

 

2.  무한 스크롤을 위한 페이크 인덱스 계산하기

 

/// 무한 스크롤 구현
  private func getInfiniteScrollIndex(newValue: Int) {
    
    if newValue == 0 {
      // 처음으로 갔을 때 끝쪽으로 이동
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        currentIndex = colors.count - 2
      }
    } else if newValue == colors.count - 1 {
      // 마지막으로 갔을 때 첫쪽으로 이동
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        currentIndex = 1
      }
    }
    
  }

 

3. 메인 구현 (전체 코드)

 

import SwiftUI

struct CustomCarouselSlides3: View {
  
  /// 순환배열
  @State var colors: [Color] = [.red, .orange, .yellow, .green, .blue]
  /// 현재 인덱스
  @State private var currentIndex: Int = 1
  
  var body: some View {
    TabView(selection: $currentIndex) {
      
      // 순환 리스트에서 첫 번째와 마지막 색을 추가
      ForEach(0..<colors.count, id: \.self) { index in
        
        Rectangle()
          .fill(colors[index])
          .frame(width: UIScreen.main.bounds.width)
          .tag(index) // 현재 인덱스를 구분하기 위한 태그
        
      } //: ForEach
      .ignoresSafeArea()
      
    } //: Tabview
    .ignoresSafeArea()
    
    // MARK: - 인디케이터
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    /// Custom Indicator
    .overlay(alignment:.bottom) { }
    
    // MARK: - LifeCycle
    .onAppear {
      configureCircularItemList() // 앞뒤 배열에 추가
      currentIndex = 1
    }
    
    // MARK: - Action
    .onChange(of: currentIndex) { newValue in
      getInfiniteScrollIndex(newValue: newValue) // 무한 스크롤 구현

    } //: onChange
    
  } //: Body
} //: View

extension CustomCarouselSlides3 {
  
  /// 무한 스크롤 구현
  private func getInfiniteScrollIndex(newValue: Int) {
    
    if newValue == 0 {
      // 처음으로 갔을 때 끝쪽으로 이동
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        currentIndex = colors.count - 2
      }
    } else if newValue == colors.count - 1 {
      // 마지막으로 갔을 때 첫쪽으로 이동
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        currentIndex = 1
      }
    }
    
  }
  
  /// 페이크 아이템 추가
  private func configureCircularItemList() {
    // 시작과 끝에 마지막, 첫 번째 색상 추가
    colors.insert(colors[colors.count - 1], at: 0)
    colors.append(colors[1])
  }
  
  /// 찐 인덱스 구하기
  /// - 인디케이터와 현재 인덱스 맞추기 위함
  private func getRealIndex() -> Int { }

}

 

OnAppear:

- 순환 도는 배열에 아이템을 추가해주었기 때문에 기본 인덱스는 0이 아니라 1로 설정

- 화면에 들어올 때 배열에 각각 마지막, 첫번째 인덱스를 추가 (configureCircularItemList)

 

ForEach:

- TabView의 selection으로 current Index를 추적하고 있기 때문에, 각 아이템의 인덱스는 tag를 사용해서 추적한다.

 

onChange:

- current Index가 바뀔 때의 필요 액션을 추가 했는데, 인위적으로 추가한 페이크 아이템을 통해 무한 스크롤을 구현

- 해당 부분은 getInfiniteScrollIndex

 

 

 

 

구현 (타이머 O):

 

 

 

 

1. 전체코드

 

import SwiftUI

struct CustomCarouselSlides3: View {
  
  /// 순환배열
  @State var colors: [Color] = [.red, .orange, .yellow, .green, .blue]
  /// 타이머
  @State var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
  /// 현재 인덱스
  @State private var currentIndex: Int = 1
  
  var body: some View {
    TabView(selection: $currentIndex) {
      
      // 순환 리스트에서 첫 번째와 마지막 색을 추가
      ForEach(0..<colors.count, id: \.self) { index in
        
        Rectangle()
          .fill(colors[index])
          .frame(width: UIScreen.main.bounds.width)
          .tag(index) // 현재 인덱스를 구분하기 위한 태그
        
      } //: ForEach
      .ignoresSafeArea()
      
    } //: Tabview
    .ignoresSafeArea()
    
    // MARK: - 인디케이터
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    /// Custom Indicator
    .overlay(alignment:.bottom) { }
    
    // MARK: - LifeCycle
    .onAppear {
      configureCircularItemList() // 앞뒤 배열에 추가
      currentIndex = 1
    }
    
    // MARK: - Action
    .gesture(
      DragGesture()
        .onChanged { _ in
          timer.upstream.connect().cancel()
          
          DispatchQueue.main.asyncAfter(deadline: .now() + 3){
            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
          }
        }
    )
    
    .onChange(of: currentIndex) { newValue in
      getInfiniteScrollIndex(newValue: newValue) // 무한 스크롤 구현

    } //: onChange
    
    .onReceive(timer) { _ in
      /// 타이머 가동 시 인덱스 하나씩 옮김
      withAnimation(.easeIn) {
        currentIndex += 1
      }
    }
    
  } //: Body
} //: View

 

 

2. 기존 코드에 추가 된 부분

 

  /// 1.타이머
  @State var timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
  
  -------------------------------
  
  /// 2.타이머 가동
  .onReceive(timer) { _ in
      /// 타이머 가동 시 인덱스 하나씩 옮김
      withAnimation(.easeIn) {
        currentIndex += 1
      }
    }
    
  -------------------------------
  
  /// 3.타이머 초기화 + 재기동
  .gesture(
      DragGesture()
        .onChanged { _ in
          timer.upstream.connect().cancel()
          
          DispatchQueue.main.asyncAfter(deadline: .now() + 3){
            timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
          }
        }
    )

 

1. 3초 타이머 추가

 

2. onReceive

- 타이머가 변경 될 때마다 (3초마다) 인덱스를 변경

- withAnimation을 추가해서 슬라이드 애니메이션 구현

 

3. gesture()로 사용자가 수동으로 화면 이동 시 타이머 관리

...를 안해주면 드래그를 하는 와중에 3초가 지나면 인덱스가 +1이 되어버린다.

- 사용자의 드래그 액션이 감지 되면 타이머를 초기화

- 3초 뒤 타이머 가동

 

 

 

 

 

 

 

 

 

 

References

 

https://ios-development.tistory.com/1197

[iOS - swift] Infinite Carousel (무한 스크롤 뷰) 구현 방법

 

 

 

 

---

 

사실 이게 최선의 방법인지는 모르겠다...

나중에 더 좋은 방법을 알게 되면 시리즈처럼 다시 게시글을 쓰거나 이곳에 추가해야겠다.