iOS中Label竖直排列如何实现文本垂直对齐？

Question

在iOS开发中，当UILabel的文本需要竖直排列时，常通过调整transform实现文字垂直显示，但此时容易出现文本垂直对齐异常的问题。例如，使用CGAffineTransform(rotationAngle: .pi / 2)将Label旋转90度后，文本虽呈竖向排列，却可能偏离预期位置，无法与父视图或其他控件垂直居中对齐。即使设置alignment为.center，实际渲染仍可能出现偏移。如何在保证文本竖直排列的同时，实现上下居中对齐？尤其是在Auto Layout约束环境下，应如何调整frame、contentMode或使用自定义drawText(in:)方法来正确控制文本绘制区域？这是开发者常遇到的技术难点。

Answer 1

一、UILabel竖直排列中的对齐问题：从现象到本质

在iOS开发中，当需要将UILabel的文本以竖直方向显示时，开发者常采用transform属性进行旋转操作。例如使用CGAffineTransform(rotationAngle: .pi / 2)将Label顺时针旋转90度，使文字呈现垂直排列效果。然而，这种做法虽然实现了视觉上的“竖排”，却往往引发文本对齐异常的问题。

典型表现为：即使设置了textAlignment = .center，旋转后的文本并未在父视图中垂直居中，而是向上或向下偏移，尤其在配合Auto Layout约束系统时更为明显。这是因为transform仅改变图层渲染矩阵，并不调整布局引擎计算的frame原点与锚点位置。

1.1 常见错误实践示例

let label = UILabel()
label.text = "竖直文本"
label.transform = CGAffineTransform(rotationAngle: .pi / 2)
label.textAlignment = .center
parentView.addSubview(label)

// 添加Auto Layout约束
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: parentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: parentView.centerYAnchor)
])
    

上述代码看似合理，但由于旋转后label的bounds和frame几何关系发生变化，其绘制区域未随内容方向重映射，导致视觉中心偏离布局中心。

二、深入分析：Transform与Layout系统的冲突机制

要解决该问题，必须理解UIKit中transform与Auto Layout之间的交互逻辑：

• Transform不影响Intrinsic Content Size：UILabel的固有大小（intrinsicContentSize）仍基于水平排版计算。
• Layout先于Rendering：Auto Layout在layoutSubviews阶段完成frame设置，而transform在rendering阶段应用。
• Anchor Point默认为(0.5, 0.5)，即中心点旋转，但文本绘制起点未调整。

属性	旋转前行为	旋转后异常表现
frame.origin	左上角定位	视觉位置偏移
bounds.size	宽>高	变为高>宽，但绘制区域不变
textAlignment	水平居中有效	垂直方向无影响
intrinsicContentSize	基于字体宽度	未考虑旋转后高度需求

三、解决方案演进路径

针对不同场景复杂度，可采取由简至深的多种策略：

3.1 方案一：调整transform锚点 + 手动偏移校正

通过修改layer的anchorPoint并重新定位，补偿旋转带来的位移：

label.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
label.center = parentView.center // 确保中心一致
label.transform = CGAffineTransform(rotationAngle: .pi / 2)

// 补偿尺寸交换带来的frame错位
let size = label.bounds.size
label.bounds = CGRect(x: 0, y: 0, width: size.height, height: size.width)
    

3.2 方案二：封装自定义VerticalLabel类

继承UILabel，重写drawText(in:)方法，实现真正意义上的竖向绘制而非视觉旋转：

class VerticalLabel: UILabel {
    override func drawText(in rect: CGRect) {
        guard let text = text else { return }
        let attributes: [NSAttributedString.Key: Any] = [
            .font: font,
            .foregroundColor: textColor.cgColor
        ]
        
        let attributedString = NSAttributedString(string: text, attributes: attributes)
        let textSize = attributedString.size()
        let x = (bounds.width - textSize.height) / 2
        let y = (bounds.height + textSize.width) / 2
        
        let context = UIGraphicsGetCurrentContext()!
        context.saveGState()
        context.translateBy(x: bounds.midX, y: bounds.midY)
        context.rotate(by: .pi / 2)
        attributedString.draw(at: CGPoint(x: -y + bounds.midY, y: x - bounds.midX))
        context.restoreGState()
    }
}
    

3.3 方案三：结合Core Text实现精确控制

对于多语言、复杂排版需求，可使用CTFramesetter进行底层文本布局：

func drawVerticalTextCoreText(in context: CGContext, text: String, rect: CGRect) {
    let attributedString = CFAttributedStringCreate(nil, text as CFString, nil)
    let framesetter = CTFramesetterCreateWithAttributedString(attributedString!)
    
    let path = CGPath(rect: CGRect(x: 0, y: 0, width: rect.height, height: rect.width), transform: nil)
    let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, text.count), path, nil)
    
    context.saveGState()
    context.translateBy(x: rect.origin.x, y: rect.origin.y + rect.height)
    context.rotate(by: .pi / 2)
    CTFrameDraw(frame, context)
    context.restoreGState()
}
    

四、Auto Layout环境下的适配策略

在使用自动布局时，关键在于让系统正确识别旋转后的内容尺寸。可通过重写intrinsicContentSize来实现：

override var intrinsicContentSize: CGSize {
    let size = super.intrinsicContentSize
    return CGSize(width: size.height, height: size.width)
}
    

同时，在viewDidLayoutSubviews中动态更新transform前的frame：

override func layoutSubviews() {
    super.layoutSubviews()
    self.transform = CGAffineTransform.identity
    let size = self.bounds.size
    self.bounds = CGRect(x: 0, y: 0, width: size.height, height: size.width)
    self.transform = CGAffineTransform(rotationAngle: .pi / 2)
}
    

4.1 推荐架构设计模式

使用MVVM结合自定义控件管理状态：

graph TD
                A[ViewModel] -->|提供文本数据| B(Custom VerticalLabel)
                B --> C{是否支持RTL?}
                C -->|是| D[应用镜像变换]
                C -->|否| E[标准逆时针旋转]
                B --> F[重写drawText/intrinsicContentSize]
                F --> G[Core Graphics绘制]
                G --> H[输出竖直居中文本]

五、性能与兼容性考量

不同方案在性能与维护成本上的对比：

方案	CPU开销	内存占用	Auto Layout兼容性	国际化支持
Transform + Anchor调整	低	低	中	弱
drawText重写	中	中	高	强
Core Text全量控制	高	中	高	极强
UIView+sublabel模拟	中	高	高	中

建议在简单场景下使用方案一快速实现；中等复杂度推荐方案二；高定制化排版需求则选用方案三。