TabView 표시기 사용자 정의

"페이지 UI, 호출기 및 레이블 UI로 불리는""가로로 교환하여 페이지를 전환하는 UI""표시기를 사용자 정의한 이야기입니다."

딱한 사정

SwiftUITabView 및 PageTabViewStyle를 사용하여 페이지의 UI를 가로로 교환한 후 전환할 수 있습니다.

그러나 TabView의 PageTabViewStyle에는 기본 표시기가 표시되지만 거의 사용자 정의할 수 없습니다.
이번에는 지시기의 좌표를 변경해서 임의의 위치에 지시기를 표시하려고 합니다.

처리 방법

기본 표시기가 아닌 자체 표시기 UI를 사용합니다.
다음은 독립적으로 설치된 표시기 UI의 코드입니다.

struct TabIndexView: View {
    let numberOfPages: Int
    let currentIndex: Int
    
    var dotSize = CGFloat(5)
    var spacing = CGFloat(6)
    var dotColor = Color.white
    var borderColor = Color.white
    
    var body: some View {
        HStack(spacing: spacing) {
            ForEach(0..<numberOfPages) { index in
                if index == currentIndex {
                    Circle()
                        .fill(dotColor)
                        .frame(width: dotSize, height: dotSize)
                } else {
                    Circle()
                        .stroke(borderColor, lineWidth: 0.5)
                        .frame(width: dotSize, height: dotSize)
                }
            }
        }
        
    }
}

아래 코드에 설치된 지시기를 사용합니다..tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) 기본 표시기 UI를 숨깁니다.
또한 .overlay에서 임의의 충전을 제공하여 표시 표시기의 위치를 조정한다.

    @State private var currentTabViewIndex = Int(0)

    var content: some View {
        TabView(selection: $currentTabViewIndex) {
            pageView
                .tag(0)
            pageView
                .tag(1)
            pageView
                .tag(2)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .overlay(
            VStack {
                Spacer()
                TabIndexView(numberOfPages: 3, currentIndex: currentTabViewIndex)
                    .padding(.bottom, 44)
            }
        )
    }

별도의 UI이므로 점 등의 모양새를 자유롭게 변경할 수 있습니다.
마지막 참고 기사처럼 애니메이션을 넣으면 멋있을지도 몰라요.

참고 자료

Custom Paging UI in SwiftUI | Better Programming