[SwiftUI] TabView page indicator 커스텀하기

 

 

이미지 슬라이드뷰를 만들어야 했는데, 페이지 인디케이터가 애플이 제공해주는 기본 인디케이터가 아니라 커스텀을 해야했다.

 

참고로 인디케이터는

 

위와 같은 뷰가 있다면,

 

이미지의 순서를 나타내주는 부분에 해당한다.

 

피그마에 올라와 있는 인디케이트 디자인이 현재 이미지의 순서일 경우 인디케이터 형태가 바뀌는 디자인이었다. 따라서, 디자인 가이드를 충족시키기 위해서 SwiftUI에서 Tabview가 제공해주는 원형 인디케이터를 사용할 수가 없었고, custom 형식으로 직접 구현해야했다.

 

 

 

 

내가 구현해야 하는 것:

 

1. 이미지 슬라이더

2. 일정시간 간격을 두고 슬라이더의 이미지가 바뀌어야 함

3. 이미지가 바뀔 때, 해당 이미지 순서의 인디케이터 모양이 원형에서 가로로 긴 타원형으로 변경되어야 함

 

 

 

 

 

그래서

 

https://www.youtube.com/watch?v=uo8gj7RT3H8

 

 

SwiftUI로 작업하는 게 거의 처음이었기 때문에 위 영상을 참고하여 코드를 작성했었다. 

iOS 15기준으로 위 영상의 코드로 구현을 하면 index가 0에서 1을 넘어갈 경우 외에는 슬라이더 기능이 되지 않았다.

 

iOS 15이후 부터 발생하는 문제로, 영상 속 코드는 슬라이드가 넘어가면 인덱스가 인식 되지 않고 사라지는 게 기능 불능의 원인이었다.

 

 

 

 

 

 

 

해결 방법:

 

- 슬라이드 배열의 인덱스를 인식하지 못 하고 있는 게 문제였기 때문에, 인덱스를 인식 시켜주고 그 인덱스 기준으로 슬라이드 이미지 교체 + 인디케이터 형태 custom 해주는 식으로 방향을 잡았다.

 

- 종합하자면 (1) currentIndext에 현재 페이지 인덱스를 저장하는 @state 형식으로 선언해주고, (2) currentIndex를 기준으로 오프셋 변경 여부를 구하고, (3) tag로 확실하게 저장하고, (4) 인디케이터 형태를 그에 맞게 바꿔줬다.

 

 

 

---

 

24.04.25 작성

 

아래는 영상을 기반으로 작성한 코드를 개선한 코드이자 내가 원한 UI 및 기능 구현을 한 코드다.

기타 설정 등은 주석 참고.

 

....였는데 리팩토링한 코드는 아래 리팩토링한 날짜(24.09.06)와 함께 있으니 해당 코드 참고를 추천한다.

 

 

 

리팩토링 이전 전체코드: 

import SwiftUI

struct customIndicatorSlides: View {
    
    // 타이머 설정
    private let timer = Timer.publish(
        every: 3,
        on: .main,
        in: .common
    ).autoconnect()
    
    // 이미지 배열
    private let images: [String] = [
        "image1",
        "image2",
        "image3"
    ]
    
    @State var offset: CGFloat = 0 // 현재 슬라이드 오프셋 저장
    @State private var currentIndex = 0 //현재 페이지 인덱스
    
    var body: some View {
        
        ScrollView(.init()){
            
            TabView(selection: $currentIndex){ // 현재 선택 항목 추적용
                
                ForEach(images.indices, id: \.self) { index in
                    
                    if index == 0 {
                        
                        // 오프셋 구하기용
                        Image(images[index])
                            .resizable()
                            .scaledToFill()
                            .overlay(
                                
                                // offset 계산
                                GeometryReader { proxy -> Color in
                                    
                                    let minX = proxy.frame(in: .global).minX
                                    
                                    DispatchQueue.main.async {
                                        withAnimation(.default) {
                                            self.offset = -minX
                                        }
                                    }
                                    
                                    return Color.clear
                                }
                                    .frame(width: 0, height: 0)
                                , alignment: .leading
                            )
                            .tag(index)
                        
                    } else {
                        
                        Image(images[index])
                            .resizable()
                            .scaledToFill()
                            .tag(index)
                        
                    }
                }
                
            }
            .tabViewStyle(
                PageTabViewStyle(
                    indexDisplayMode: .never
                )
            )
            
            // 페이지 인디케이터
            .overlay(
                
                HStack(spacing: 4) {
                    
                    ForEach(images.indices, id: \.self) { index in
                        
                        Capsule()
                        
                        // 캡슐 디자인
                        // 선택된 페이지와 일치하는 경우 채우기 색 설정
                            .stroke(.uiColorGray350, lineWidth: 1)
                            
                            // 선택 인덱스 기준 크기 변경
                            .frame(width: getIndex() == index ? 16 : 6, height: 6)
                            //선택 인덱스 따라 투명도 변경
                            .opacity(getIndex() == index ? 1 : 0.5)
                            
                            .background(getIndex() == index ? .uiColorGray350 : Color.clear)
                            .cornerRadius(3, corners: .allCorners)
                        
                        
                    }
                    
                }
                    .padding(.bottom, 24), alignment: .bottom
                
            )
            
        }
        .ignoresSafeArea()
        
        // 페이지 변경 될 때 오프셋 업데이트
        .onChange(of: currentIndex) { newIndex in
            let newOffset = CGFloat(newIndex) * getWidth()
            withAnimation {
                offset = newOffset
            }
        }
        
        // 타이머 설정
        .onReceive(timer) { _ in
            let newIndex = currentIndex < images.count - 1 ? currentIndex + 1 : 0
            currentIndex = newIndex
        }
    }
    
    /// 현재 페이지의 인덱스를 가져옴
    func getIndex() -> Int {
        
        let index = Int(round(Double(offset / getWidth())))
        return index
        
    }
    
    /// 오프셋 값 가져옴
    func getOffset() -> CGFloat {
        
        let progress = offset / getWidth()
        return 22 * progress
        
    }
    
}


extension View {
    
    /// 화면 너비 가져옴
    func getWidth() -> CGFloat {
        return UIScreen.main.bounds.width
    }
    
}

 

 

---

 

2024.09.06 코드 리팩토링

 

 

리팩토링하게 된 이유:

 

1. 4월에 작성한 코드의 가독성이 굉장히 좋지 않았다

2. 영상을 보고 당장의 "기능구현"에 초점을 맞춰 작성한 코드였기 때문에, swiftUI를 조금 이해하게 된 지금의 내가 코드를 다시 봤을 때 UI나 기능적으로 불필요한 부분이 너무 많았다.

3. 영상 제작이 된 시점과 현재 시점 사이의 SwiftUI 기능의 차이가 있다. deprecated 된 부분을 수정했다.

 

 

 

- CustomIndicator 코드:

 

struct CustomIndicator: View {
  
  let colors: [Color]
  let currentIndex: Int
  
  var body: some View {
    ZStack{
      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)
            .tag(index)
        }
      } // H
    }
    .padding(.bottom, 24)
  }
}

 

인덱스가 현재 인덱스와 동일 할 때만 해당 순서의 인디케이터 형태를 바꿔주도록 하는 코드다.

 

 

- 타이머 작동 없는 코드:

 

import SwiftUI

struct TestSlidesView: View {
    
  @State private var currentIndex = 0
  let colors: [Color] = [.red, .orange, .blue]
    
    var body: some View {
        VStack {
            TabView(selection: $currentIndex) {
              ForEach(colors.indices, id: \.self) { index in
                    colors[index]
                        .tag(index)
                }
            }
            .overlay(alignment: .bottom, content: {
              CustomIndicator(colors: colors, currentIndex: currentIndex)
            })
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)
            )
            .frame(height: 200)
            .cornerRadius(10)
            .padding([.leading, .trailing], 10)
            .onChange(of: currentIndex) { _, newValue in
                currentIndex = newValue
            }

        } // V
    }
    
}

 

- onChange에서 currentIndex의 변화를 감지해서, 바뀐 인덱스로 해당 색상과 그 색상의 인디케이터 순서를 변경해주고 있다.

- 리팩토링 이전 코드의 overlay와 onChange가 일부 deprecated 된 부분이 있어서 해당 부분을 수정해주었다.

 

 

- 타이머 작동 있는 코드:

 

import SwiftUI

struct TestSlidesView: View {
  
  @State private var currentIndex = 0
  let colors: [Color] = [.red, .orange, .blue]
  let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
  
  var body: some View {
    VStack {
      TabView(selection: $currentIndex) {
        ForEach(colors.indices, id: \.self) { index in
          colors[index]
            .tag(index)
        }
      }
      .overlay(alignment: .bottom, content: {
        CustomIndicator(colors: colors, currentIndex: currentIndex)
      })
      .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)
      )
      .frame(height: 200)
      .cornerRadius(10)
      .padding([.leading, .trailing], 10)
      
      .onReceive(timer) { _ in
        withAnimation {
          currentIndex = (currentIndex + 1) % colors.count
        }
      }
      
    } // V
  }
  
}

 

 

- onReceive에서 timer를 trigger로 인덱스를 바꿔주고, 바뀐 인덱스를 받아서 인디케이터 순서와 모양을 바꿔주고 있다.

- 타이머 없는 버전과 동일하게 deprecated된 부분의 코드를 수정했다.

 

 

 

 

구현 영상

 

 

 

 

 

 

 

 

 

 

무한 스크롤이 되는 버전은 아래 포스팅 참고 추천

 

https://calliek.tistory.com/62

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

 

 

 

 

References

 

https://seons-dev.tistory.com/entry/SwiftUI-TabView

SwiftUI : TabView / TabViewStyle