iOS开发实战小知识——倒计时文案左右晃动问题

1,478 阅读1分钟

######在iOS App中,倒计时经常会出现,但是也发现一个小小的问题,就是倒计时文案会左右晃动。即使我最后一位个位数我补个0,补齐到两位,也还是会出现左右晃动的情况。具体效果如图:

倒计时你左右晃啥.gif

优化一:

我想这个把文本对齐方式改成居中,不左对齐了。这样子就不会左右晃动了吧。 _timeLabel.textAlignment = NSTextAlignmentCenter; 但是现实是残酷的,好了一点点,但还是不行。

现实的残酷.gif

优化二:

继续文本居中对齐,把UILabel的宽度设置的比倒计时文案在宽一点点,这样子可以了吧。 计算出timeLabel的文本宽,在加上一点点offset值。

    [self.timeLabel mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.mas_equalTo(self.timeLabel.intrinsicContentSize.width + 5);
    }];

现实还是狠狠的打脸( ̄ε(# ̄)☆╰╮( ̄▽ ̄///)啦~(≧▽≦)/~啦啦啦,好了一点点,但还是会晃动。。

打脸.gif

解决方案:

看来就调整控件应该没有用了。那问题应该不是出在控件上。 在倒计时上找找。 后来发现应该是倒计时文本的数字文本宽度不一致,导致整体文案左右晃。 系统UILabel默认文本是:font-family: ".SFUIText";

设置控件文本的字体就完美解决了!!!

//一般这么设置
_timeLabel.font = [UIFont systemFontOfSize:13.0f];
//设置文本字体 就完美解决了
_timeLabel.font = [UIFont fontWithName:@"Helvetica Neue" size:13];

效果如下图:

完美解决.gif
ps:设置其他字体不知道哪个还可以,我没有具体测试😆

参考资料:

StringsTextFonts