Swift中UILabel设置圆形背景及解决iPhone8模拟器显示变形问题

变形原因 #

出现圆角变形主要是两个问题导致的：

• 圆角设置时机过早：在视图还没完成最终布局时就计算了圆角半径，此时拿到的UILabel frame是初始值，和实际显示的尺寸不匹配。
• 圆角计算逻辑错误：当前代码用lbNumber1的宽度来计算lbNumber的圆角，一旦两个label宽度不一致，或是lbNumber实际宽高不相等，就会算出非正圆的圆角，出现变形。

修复方案 #

• 调整圆角设置的时机：等视图完成最终布局后再设置圆角。如果是控制器内的label，直接在viewDidLayoutSubviews方法中设置；如果是自定义视图内的label，在对应的layoutSubviews方法中设置，此时拿到的label尺寸是实际显示的准确值。
• 修正圆角计算逻辑：必须基于label自身的尺寸计算，同时要保证label的宽高完全相等，才能得到正圆效果，示例代码如下：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    lbNumber.layer.masksToBounds = true
    // 基于自身宽度计算，前置条件是lbNumber高度和宽度完全一致
    lbNumber.layer.cornerRadius = lbNumber.bounds.width / 2
}

• 使用Auto Layout的场景下，给lbNumber添加宽高相等的约束，从布局层面保证label是正方形，避免宽高被拉伸变形。
• 如果label尺寸后续会动态变化，不要只设置一次圆角，要在每次布局更新后同步刷新圆角值，避免布局变更后圆角不匹配。

内容的提问来源于stack exchange，提问作者happyswift