How do you modify font attributes to make a font proportional in iOS?

Question

I have a running timer on a video in the format of 0:00:00. I want the characters 1-9 to all be the same width so that the label doesn't move around when the timer updates. I plucked this code from an apple slideshow but I am having no luck with it. Every character seems to be proportional except for "1". I'm having a hard time finding any examples or documentation about this. I'm calling setFont on a UILabel with the return value of the method below. The font I'm trying to use is GothamNarrow-Book. I pass in @"GothamNarrow-Book" to this method.

-(UIFont*) getProportionalFontForTimerWithFont:(NSString*)fontName WithRatio:(CGFloat) fontRatio{
    UIFont *const existingFont=[UIFont fontWithName:fontName];
    UIFontDescriptor *const existingDescriptor=[existingFont fontDescriptor];

    NSDictionary *const timeFeatureSettings=@{
                                         UIFontDescriptorFeatureSettingsAttribute:@[
                                                 @{

                                                     UIFontFeatureTypeIdentifierKey: @(kNumberSpacingType),
                                                     UIFontFeatureSelectorIdentifierKey:@(kProportionalNumbersSelector)
                                                     },
                                                 @{
                                                     UIFontFeatureTypeIdentifierKey: @(kCharacterAlternativesType),
                                                     UIFontFeatureSelectorIdentifierKey:@(1)
                                                     }]
                                         };

    UIFontDescriptor *const proportionalDescriptor=[existingDescriptor fontDescriptorByAddingAttributes:timeFeatureSettings];
    UIFont* proportionalFont=[UIFont fontWithDescriptor:proportionalDescriptor size:[existingFont pointSize]];

    return proportionalFont;

}

Answer 1

I was misunderstanding what proportional meant. Changing the key from proportional to monospaced fixed my issue.

-(UIFont*) getProportionalFontForTimerWithFont:(NSString*)fontName WithRatio:(CGFloat) fontRatio{
    UIFont *const existingFont=[UIFont fontWithName:fontName];
    UIFontDescriptor *const existingDescriptor=[existingFont fontDescriptor];

    NSDictionary *const timeFeatureSettings=@{
                                         UIFontDescriptorFeatureSettingsAttribute:@[
                                                 @{

                                                     UIFontFeatureTypeIdentifierKey: @(kNumberSpacingType),
                                                     UIFontFeatureSelectorIdentifierKey:@(kMonospacedNumbersSelector)
                                                     },
                                                 @{
                                                     UIFontFeatureTypeIdentifierKey: @(kCharacterAlternativesType),
                                                     UIFontFeatureSelectorIdentifierKey:@(1)
                                                     }]
                                         };

    UIFontDescriptor *const proportionalDescriptor=[existingDescriptor fontDescriptorByAddingAttributes:timeFeatureSettings];
    UIFont* proportionalFont=[UIFont fontWithDescriptor:proportionalDescriptor size:[existingFont pointSize]];

    return proportionalFont;

}

Answer 2

Since you're always drawing a fixed number of characters why not just position and draw each one by hand? You could even make each one it's own UILabel or other control.

Answer 3

Step one: pin the label

Just use auto layout to pin the height and width and the bottom right corner. This will insure that your label does not move.

Step two: modify the font

In storyboard, set auto shrink property of the UILabel to minimum font scale. Then set the % size that you want and you should be good to go.