SwiftUI Animated Indicators - Custom Animations
Added 2021-03-12 20:44:11 +0000 UTCSource Code For Custom Animated Indicators Using SwiftUI 2.0 - Custom Animations
Download Code π
Comments
The right code is here. Why does it always have to be fixed somehow?) // // ContentView.swift // Shared // // Created by Balaji on 12/03/21. // import SwiftUI struct ContentView: View { var body: some View { Home() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } struct Home: View { // colors as Tabs... // use your own tabs here... var colors : [Color] = [.red,.blue,.pink,.purple] // offset... @State var offset: CGFloat = 0 @State var currentInd: Int = 0 var body: some View{ // tabview has problem in ignoring top edge... // fix use scrollview... ScrollView(.init()){ TabView(selection: $currentInd.animation()) { ForEach(colors.indices,id: \.self){index in colors[index] .overlay( Group { GeometryReader{proxy -> Color in return Color.clear } .frame(width: 0, height: 0) }, alignment: .leading ) } } .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) .overlay( animatedIndicator ,alignment: .bottom ) } .ignoresSafeArea() } // getting Offset for Capsule Shape... func getOffset()->CGFloat { return CGFloat(currentInd) * 22 } var animatedIndicator: some View { // Animated Indicators... HStack(spacing: 15){ ForEach(colors.indices,id: \.self){index in Capsule() .fill(currentInd < index ? Color.gray : Color.white) .frame(width: currentInd == index ? 20 : 7, height: 7) } } // Smooth Sliding Effect... .overlay( Capsule() .fill(Color.white) .frame(width: 20, height: 7) .offset(x: getOffset()) ,alignment: .leading ) .padding(.bottom,UIApplication.shared.windows.first?.safeAreaInsets.bottom) .padding(.bottom,10) } } // extending View to get width... extension View{ func getWidth()->CGFloat{ return UIScreen.main.bounds.width } }
Ivan Lvov
2023-08-27 10:30:32 +0000 UTCDimitriy's solution worked for me, thank you!
Mike Yung
2022-04-09 06:23:21 +0000 UTC
