Swift：动态调整标签大小的宽度限制

Question

Question regarding Auto Contraints and a dynamically resizable label.

I have a timer label that initally displays 00:00.00 (mins, seconds, milliseconds). When this timer reaches one hour or more I wish to resize the label to 00:00:00.00 while preserving the .Centerx constraint. Text justification on the label is set to Left so that the counting of numbers does not 'jitter' the text as it re-justifies to the different sizes of text.

I have my constraints set as the following:

Heres how the timer looks initially or when only counting minutes (up to 59:59:59)

And heres how it should look when Hours are involved in the count.

Now the issue is that when hours are involved the width is dynamically resized (due to greater than constraint) and this causes the timer label to jitter as the different milliseconds are counted.

I desire to resize the label when counting hours to a width of 150 and back to 110 when hours are not counting - all while preserving the CenterX constant.

I have tried to programatically re-size the label when the count is in hours as so:

let widthConstraint = NSLayoutConstraint(item: TimerLabel, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 150)

 if Double(hours) != 0{
      TimerLabel.text = "\(strHours):\(strMinutes):\(strSeconds).\(strFraction)"

      TimerLabel.addConstraint(widthConstraint)
 }

Now in my IBAction func for the reset button I also have:

let widthConstraint2 = NSLayoutConstraint(item: TimerLabel, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 110)

 TimerLabel.removeConstraint(widthConstraint)
 TimerLabel.addConstraint(widthConstraint2)

However once the timer resets the label appears as follows:

The text is no longer centre in the view. I have also tried programming a width constraint for .CenterX in the reset function and that also produces no change in the reset label position.

Is there an easier way to do this Via Interface Builder? Any ideas?

Thanks

Answer 1

Try making the text label wider than it is and then centering the text. When more characters are added it will preserve the centre positioning.

Answer 2

As Fonix suggested the solution was to use a wixed width font which is easy to do in iOS9.

    let originalFont = UIFont.systemFontOfSize(26)
    let originalFontDescriptor = originalFont.fontDescriptor()

    let fontDescriptorFeatureSettings = [
        [
            UIFontFeatureTypeIdentifierKey: kNumberSpacingType,
            UIFontFeatureSelectorIdentifierKey: kMonospacedNumbersSelector
        ]
    ]

    let fontDescriptorAttributes = [UIFontDescriptorFeatureSettingsAttribute: fontDescriptorFeatureSettings]
    let fontDescriptor = originalFontDescriptor.fontDescriptorByAddingAttributes(fontDescriptorAttributes)
    let font = UIFont(descriptor: fontDescriptor, size: 0)

    TimerLabel.font = font