iOS SwiftUI PageControl 페이지 컨트롤

 

PageControl

 

/// 커스텀 페이지 컨트롤 애니메이션 Custom PageControl + Animation
struct PageControl: View {
    
    var numberOfPages: Int
    @Binding var currentPage: Int
    
    var body: some View {
        HStack(spacing: 8) {
            ForEach(0..<numberOfPages, id: \.self) { pagingIndex in
                
                let isCurrentPage = currentPage == pagingIndex
                let height = 8.0
                let width = isCurrentPage ? height * 2 : height
                
                Capsule()
                    .fill(isCurrentPage ? .blue : .gray.opacity(0.5))
                    .frame(width: width, height: height)
            }
        }
        .animation(.linear, value: currentPage)
    }
}

#Preview {
    PageControl(numberOfPages: 3, currentPage: .constant(0))
}

 

 

struct ContentView: View {
    
    let array: [Color] = [.red, .green, .blue]
    
    @State var selection = 0
    
    var body: some View {
        
        VStack {
            TabView(selection: $selection) {
                ForEach(array.indices, id: \.self) {
                    array[$0]
                        .tag($0)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .frame(width: 300, height: 300)
            
            PageControl(numberOfPages: array.count, currentPage: $selection)
        }
    }
}

iOS

Swift

Xcode

PageControl

UIPageControl

TabView

tabViewStyle

indexDisplayMode

페이지컨트롤

인디케이터

indicator