如何让UILabel文本垂直对齐匹配Figma设计？

需求 #

• 完全复刻Figma中UILabel的样式，Figma导出的NSAttributedString属性效果不精准
• 当UILabel与Figma文本框距屏幕顶部距离一致时，文本垂直对齐/基线完全匹配
• UILabel支持Dynamic Type，默认文本大小下与Figma效果一致

核心矛盾 #

原生UILabel的文本布局逻辑与Figma差异显著：

• Figma建议用lineHeightMultiple设置行高，但UILabel使用该属性会在每行文本上方添加额外空间，导致文本偏移
• 用lineSpacing则会缺失首尾行的上下间距，使UILabel尺寸小于Figma文本框

现有方案的局限性 #

1. lineHeightMultiple容器偏移方案：将UILabel嵌入容器视图，通过公式let yOffset = ((lineHeightMultiple * lineHeight) - lineHeight) * 0.5计算Y轴偏移量调整位置。但需在preferredContentSizeCategory变化时更新，且不适用于开启adjustsFontSizeToFitWidth的标签
2. lineSpacing容器padding方案：通过容器视图与内部标签间添加padding实现居中，但配置繁琐

已尝试的无效方案 #

• 使用maximumLineHeight和minimumLineHeight固定行高，不支持Dynamic Type
• 调整baseLineOffset无法得到精准效果，其值会叠加到字体lineHeight上，不符合预期

推荐解决方案（非CoreText） #

自定义UILabel子类，重写文本布局逻辑 #

通过重写drawText(in:)和intrinsicContentSize，手动控制文本的绘制位置和标签尺寸，完全对齐Figma的布局逻辑：

1. 精准计算文本容器：根据Figma指定的行高和当前字体，计算文本实际需要的绘制区域，确保首尾行的上下间距与Figma一致
2. 动态调整绘制原点：在drawText(in:)中，将文本绘制的Y原点调整为容器的垂直中心位置，抵消UILabel默认的布局偏移
3. 自动适配Dynamic Type：监听系统文本大小变化，自动重新计算布局参数并刷新视图

代码示例 #

class FigmaAlignedLabel: UILabel {
    // 从Figma获取的目标行高
    var figmaTargetLineHeight: CGFloat = 0
    
    override func drawText(in rect: CGRect) {
        guard let attributedText = attributedText else {
            super.drawText(in: rect)
            return
        }
        
        let currentFont = font ?? .systemFont(ofSize: 17)
        let targetLineHeight = figmaTargetLineHeight > 0 ? figmaTargetLineHeight : currentFont.lineHeight
        let textBounds = calculateTextBounds(for: attributedText, lineHeight: targetLineHeight)
        
        // 计算垂直居中的绘制区域
        let verticalOffset = (rect.height - textBounds.height) / 2
        let adjustedDrawRect = CGRect(
            x: rect.origin.x,
            y: rect.origin.y + verticalOffset,
            width: rect.width,
            height: textBounds.height
        )
        
        super.drawText(in: adjustedDrawRect)
    }
    
    override var intrinsicContentSize: CGSize {
        guard let attributedText = attributedText else {
            return super.intrinsicContentSize
        }
        
        let currentFont = font ?? .systemFont(ofSize: 17)
        let targetLineHeight = figmaTargetLineHeight > 0 ? figmaTargetLineHeight : currentFont.lineHeight
        let textBounds = calculateTextBounds(for: attributedText, lineHeight: targetLineHeight)
        
        return CGSize(width: ceil(textBounds.width), height: ceil(textBounds.height))
    }
    
    private func calculateTextBounds(for attributedText: NSAttributedString, lineHeight: CGFloat) -> CGRect {
        let mutableAttrText = NSMutableAttributedString(attributedString: attributedText)
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.minimumLineHeight = lineHeight
        paragraphStyle.maximumLineHeight = lineHeight
        paragraphStyle.alignment = textAlignment
        
        mutableAttrText.addAttribute(
            .paragraphStyle,
            value: paragraphStyle,
            range: NSRange(location: 0, length: mutableAttrText.length)
        )
        
        let maxSize = CGSize(width: frame.width > 0 ? frame.width : .greatestFiniteMagnitude, height: .greatestFiniteMagnitude)
        return mutableAttrText.boundingRect(
            with: maxSize,
            options: [.usesLineFragmentOrigin, .usesFontLeading],
            context: nil
        )
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.preferredContentSizeCategory != previousTraitCollection?.preferredContentSizeCategory {
            invalidateIntrinsicContentSize()
            setNeedsDisplay()
        }
    }
}

方案优势 #

• 1:1匹配Figma的文本布局，包括首尾行间距和垂直对齐效果
• 原生支持Dynamic Type，无需额外手动更新逻辑
• 兼容adjustsFontSizeToFitWidth属性
• 无需嵌套容器视图，代码结构简洁易维护

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