Skip to content

Instantly share code, notes, and snippets.

@ericlewis
Last active May 10, 2023 13:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ericlewis/3d7a89599d50ae51b44b6050e591a48f to your computer and use it in GitHub Desktop.
Save ericlewis/3d7a89599d50ae51b44b6050e591a48f to your computer and use it in GitHub Desktop.
Dynamic Island Progress Demo in SwiftUI. Demo here: https://twitter.com/ericlewis/status/1656283504747880451
import SwiftUI
let size: CGSize = {
return .init(width: 126.0, height: 36.9)
}()
let origin: CGPoint = {
return .init(x: UIScreen.main.bounds.midX - 0.3, y: 29.4)
}()
struct DynamicIslandProgressViewStyle: ProgressViewStyle {
func makeBody(configuration: Configuration) -> some View {
Capsule(style: .continuous)
.fill(.black)
.frame(width: size.width, height: size.height)
.overlay {
Capsule(style: .continuous)
.trim(from: 0, to: configuration.fractionCompleted ?? 0)
.stroke(
style:
StrokeStyle(
lineWidth: 5,
lineCap: .round,
lineJoin: .round
)
)
.rotation3DEffect(
.degrees(180), axis: (x: 0, y: 0, z: 1))
}
.position(origin)
.edgesIgnoringSafeArea(.top)
}
}
struct DynamicIslandProgressViewModifier<Value: BinaryFloatingPoint, Style: ShapeStyle>:
ViewModifier
{
let value: Value
let total: Value
let style: Style
func body(content: Content) -> some View {
ZStack {
ProgressView(value: value, total: total)
.progressViewStyle(DynamicIslandProgressViewStyle())
.foregroundStyle(style)
content
}
}
}
extension View {
func dynamicIslandProgress<Value: BinaryFloatingPoint, Style: ShapeStyle>(
value: Value, total: Value = 1.0, style: Style = .tint
) -> some View {
self.overlay {
Color.clear.modifier(
DynamicIslandProgressViewModifier(
value: value,
total: total,
style: style
)
)
.edgesIgnoringSafeArea(.top)
}
}
}
struct ContentView: View {
@State
private var progress = 0.0
let total = 49.0
var body: some View {
NavigationView {
List {
Stepper("Progress", value: $progress.animation(), in: 0...total)
}
.navigationTitle("Dynamic Island thingie.")
.navigationBarTitleDisplayMode(.inline)
}
.dynamicIslandProgress(
value: progress,
total: total,
style: .linearGradient(
colors: [.red, .green, .blue],
startPoint: .bottomTrailing, endPoint: .topLeading)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment