Is there a way to keep a SwiftUI text label from slightly moving while displaying a timer?

user_5929027 0
Viewed 964

I have a simple HStack containing 2 Text structs displaying a timer. It keeps changing position slightly while the timer value changes. Is there a way to avoid this behavior.

struct DurationLabel: View {
    let majorDuration: String // the hours/minutes part "00:00"
    let minorDuration: String // the seconds part "00"

    var body: some View {
        HStack(spacing: 0) {
            Text(majorDuration + minorDuration)
                .font(.system(size: 90))
            Text(minorDuration)
                .font(.body)
        }
    }
}

Demo GIF

swiftui swift
2 Answers

For displays like this I prefer to use a font with monospaced digits. You can use them in your Text like so:

Text("your Text here").font(Font.largeTitle.monospacedDigit())
user_19185610

I've done this a number of times for audio players, etc... If you want to keep the same font, you can do something like:

ZStack {
  Text("00:00").opacity(0.0)
  Text("MM:SS") // Put your actual numbers in here with the same formatting.
}

The ZStack will size itself based on the largest subview, and 0 is the widest digit in basically any font.

This technique works for any type of content that may change size. Just load up a "dummy" view with the largest possible version and hide it. Then keep your real content in the visible view. Then you can avoid hardcoding a frame size, etc...

user_4672090
Related