CODEWITHSUNDEEP
iosswift
codeman
codeman

Reputation: 9018

UILabel displaying countdown timer text

I'm displaying a count down timer using a UILabel like this:

func updateTime() {
            var elapsedTime: NSTimeInterval = startDate!.timeIntervalSinceNow
            var daysFloat = floor(elapsedTime/24/60/60)
            var hoursLeftFloat = floor((elapsedTime) - (daysFloat*86400))
            var hoursFloat = floor(hoursLeftFloat/3600)
            var minutesLeftFloat = floor((hoursLeftFloat) - (hoursFloat*3600))
            var minutesFloat = floor(minutesLeftFloat/60)
            var remainingSeconds = elapsedTime % 60

            var daysInt = Int(daysFloat)
            var hoursInt = Int(hoursFloat)
            var minutesInt = Int(minutesFloat)
            var remainingSecondsInt = Int(remainingSeconds)

            var startsIn = NSMutableAttributedString()
            var days = NSMutableAttributedString()
            var hours = NSMutableAttributedString()
            var minutes = NSMutableAttributedString()
            var seconds = NSMutableAttributedString()
            var dot = NSMutableAttributedString()
            startsIn = NSMutableAttributedString(string: "STARTS IN:  ", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 37.0)!, NSForegroundColorAttributeName:color])
            days = NSMutableAttributedString(string: String(format: "%02d", daysInt) + " DAYS", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 37.0)!, NSForegroundColorAttributeName:UIColor.blackColor()])
            hours = NSMutableAttributedString(string: String(format: "%02d", hoursInt) + " HRS", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 37.0)!, NSForegroundColorAttributeName:UIColor.blackColor()])
            minutes = NSMutableAttributedString(string: String(format: "%02d", minutesInt) + " MIN", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 37.0)!, NSForegroundColorAttributeName:UIColor.blackColor()])
            seconds = NSMutableAttributedString(string: String(format: "%02d", remainingSecondsInt) + " SEC", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 37.0)!, NSForegroundColorAttributeName:UIColor.blackColor()])
            dot = NSMutableAttributedString(string: " . ", attributes: [NSFontAttributeName:UIFont(name: "Tungsten-Semibold", size: 39.0)!, NSForegroundColorAttributeName:UIColor.lightGrayColor()])

            var countdownText = NSMutableAttributedString()
            countdownText.appendAttributedString(startsIn)
            countdownText.appendAttributedString(days)
            countdownText.appendAttributedString(dot)
            countdownText.appendAttributedString(hours)
            countdownText.appendAttributedString(dot)
            countdownText.appendAttributedString(minutes)
            countdownText.appendAttributedString(dot)
            countdownText.appendAttributedString(seconds)
            countdownLabel.attributedText = countdownText
    }

I have Autoshrink enabled on my UILabel so that the font will scale down and look right on all devices. The issue I'm seeing is that certain seconds and/or minutes will cause the font size to jump around and it will look awkward with the label text getting temporarily bigger during one second and then going back to a smaller size the next second. How can I prevent the font size from jumping around with my label and count down timer?

Upvotes: 0

Views: 1291

Answers (3)

Jerome Diaz
Jerome Diaz

Reputation: 1866

You should use a "monospaced" font with fixed width like Consolas, Courier, DejaVu Sans Mono, Letter Gothic, Liberation Mono, Monaco...

https://en.wikipedia.org/wiki/Monospaced_font

Your issue is that with non fixed width font some numbers will be larger than others.

If your font is imposed, you need to "manually" impose your font size. You might try to hide your UILabel, set the widest possible string eg:

STARTS IN:  44 DAYS 44 HRS 44 MIN ... (assuming 4 is the widest number with your font)

then retrieve the used font size, force your application to use. Disabling autoshrink at this point is unnecessary: with the computed font size the label should always fit.

Is your font mandatory for all the text or only for words? You might also use a different (monospaced) font for numbers and keep your one for the rest.

Upvotes: 1

Mike Gledhill
Mike Gledhill

Reputation: 29151

Do also check if you have AutoShrink turned on or off.

AutoShrink

In theory, iOS should only reduce the font size to squeeze in extra text if this isn't set to "Fixed font size".

Upvotes: 0

fbernardo
fbernardo

Reputation: 10104

iOS auto shrinks when the width is not enough to show the entire string. So instead of trimming it the string get's smaller until the minimum scale factor/ font size.

So this depends on the width of the label. If you set it's width via auto layout and the label can't expand to fit it's content it will shrink the font size when that's not enough. If you let it expand to fit the content the label will always try to show the content without shrinking.

Upvotes: 0

Related Questions