源码

https://github.com/BackWorld/VerticalLabel

前言

一般来说，UIKit自带的UILabel只支持水平方向的文本展示（可以RTL），但无法实现垂直方向文本的显示，要想实现竖排文本的展示，则只能手动实现计算、渲染逻辑。

效果

竖屏

横屏

参考思路

1. 可直接通过CoreTextKit去计算frame、绘制；
2. 可计算每个字符的frame，用CoreGraphics绘制（此处采用）；
3. 可计算每个字符的frame，添加多个UILabel显示（subviews太多性能太差，不推荐）；

实现

关于上述CoreTextKit绘制的方式，网上已有现场的可以作参考，但个人觉得逻辑过于复杂，不便理解和灵活修改。

字符size计算

将一段String文本计算每个字符的size，然后通过total width、total height来确定要绘制文本的区域大小。

1. 计算单个字符的size：

for char in string {
  let size = labelFittedSize(with: .init(char))
}

Character的扩展方法，通过UILabel的sizeThatFits(:_)来计算，这样的好处是可以动态设置label的各种属性，然后获取label的attributtedString，用于存储渲染：

定义一个全局drawLabel（工具对象）

private lazy var tmpLabel: UILabel = {
        let lb = UILabel()
        lb.font = font
        lb.text = text
        lb.textAlignment = .center
        lb.numberOfLines = 0
        return lb
    }()
// 每次调用，都设置一下font，color
    private var drawLabel: UILabel {
        tmpLabel.font = font
        tmpLabel.textColor = textColor
        return tmpLabel
    }

重新设置段落高度属性

func setLabelAttrText(_ text: String) {
        drawLabel.text = text
        guard let attrText = drawLabel.attributedText else {
            return
        }
        var range = NSMakeRange(0, text.count)
        var attrs = attrText.attributes(at: 0, effectiveRange: &range)
        if let pg = attrs[.paragraphStyle] as? NSParagraphStyle,
           let mpg = pg.mutableCopy() as? NSMutableParagraphStyle {
            mpg.lineHeightMultiple = wordSpacing
            attrs[.paragraphStyle] = mpg
        }
        drawLabel.attributedText = NSAttributedString(string: text, attributes: attrs)
    }

计算size，drawLabel为全局属性

func labelFittedSize(with text: String) -> CGSize {
        setLabelAttrText(text)
        let flexibleSize = CGSize(width: .zero, height: .max)
        return drawLabel.sizeThatFits(flexibleSize)
    }

2. 计算指定contentSize内，一竖行（列）的字符

定义几个数据模型：

  class Texter {
        var lines: [Line] = []
        
        class Line: CustomStringConvertible {
            var words: [Word]
            var maxWidth: CGFloat
            
            var height: CGFloat {
                return words.reduce(0){ $0 + $1.size.height }
            }
            
            init(words: [Word], maxWidth: CGFloat) {
                self.words = words
                self.maxWidth = maxWidth
            }
            
            var description: String {
                return "{words: \(words)}, {maxWidth: \(maxWidth)}"
            }
        }
        
        class Word: CustomStringConvertible {
            var text: NSAttributedString
            var size: CGSize
            
            init(text: NSAttributedString, size: CGSize) {
                self.text = text
                self.size = size
            }
            
            var description: String {
                return "{text: \(text.string)}, {size: \(size)}"
            }
        }
    }
    
// 渲染字符用
    class Character: CustomStringConvertible {
        var text: NSAttributedString
        var frame: CGRect
        init(text: NSAttributedString, frame: CGRect) {
            self.text = text
            self.frame = frame
        }
        var description: String {
            return "{text: \(text)}, frame: {\(frame)}"
        }
    }

核心计算方法：

    func calculating() {
        guard let text = text else {
            return
        }
        texter = .init()
        var y = CGFloat.zero
        var x = CGFloat.zero
        var maxW = CGFloat.zero
        
        var words: [Texter.Word] = []
        var isChangedLine = false
        func resetValues() {
            y = 0
            maxW = 0
            words = []
            isChangedLine = true
        }
        
        func addNewLineIfNeeded() -> Bool {
            x += (maxW + lineSpacing)
            if x > contentSize.width {
                if  breaking == .truncate,
                    let words = texter.lines.last?.words,
                    words.count >= 3
                {
                    let size = labelFittedSize(with: ".")
                    let text = drawLabel.attributedText!
                    words[words.count-3..<words.count].forEach{
                        $0.text = text
                        $0.size = size
                    }
                    texter.lines.last?.words = words
                }
                return false
            }
            texter.lines.append(.init(words: words, maxWidth: maxW))
            if limitedLines > 0, texter.lines.count == limitedLines {
                return false
            }
            return true
        }
        func addWord(size: CGSize){
            words.append(.init(text: drawLabel.attributedText!, size: size))
        }
        
        for (i,char) in text.enumerated()
        {
            isChangedLine = false
            if char.isNewline {
                if !addNewLineIfNeeded() {
                    break
                }
                resetValues()
                continue
            }
            
            let str = String(char)
            let size = labelFittedSize(with: str)
            if maxW < size.width {
                maxW = size.width
            }
            
            y += size.height
            if y > contentSize.height {
                if !addNewLineIfNeeded() {
                    break
                }
                resetValues()
                addWord(size: size)
            }
            else {
                y -= size.height
                addWord(size: size)
            }
            
            if !isChangedLine, i == text.count-1 {
                if !addNewLineIfNeeded() {
                    break
                }
            }
            
            y += size.height
        }
    }

上述逻辑较为杂糅，简单来说就是循环计算每个字符的size，然后累加size.height，如果>contentSize.height，则创建一个Line(words:[])对象，并加到texter.lines里，否则用words临时变量存储一个Word对象，直到i == text.count-1。

上述同时对指定行数的算法、截断的需求做了处理：

enum BreakingMode: Int {
        case truncate
        case wordWrap
    }

核心计算

func addNewLineIfNeeded() -> Bool {
            x += (maxW + lineSpacing)

// 自动截断处理：
            if x > contentSize.width {
                if  breaking == .truncate,
                    let words = texter.lines.last?.words,
                    words.count >= 3
                {
                    let size = labelFittedSize(with: ".")
                    let text = drawLabel.attributedText!
                    words[words.count-3..<words.count].forEach{
                        $0.text = text
                        $0.size = size
                    }
                    texter.lines.last?.words = words
                }
                return false
            }

            texter.lines.append(.init(words: words, maxWidth: maxW))

// 行数限制处理：
            if limitedLines > 0, texter.lines.count == limitedLines {
                return false
            }
            return true
        }

3. 计算layoutArea：

对上述计算得到的texter里的lines.words的size进行计算，得到一个可以容纳下所有符合要求的字符的渲染区域(CGRect)：

var textsArea: CGRect {
        let lines = texter.lines
        let w = lines.reduce(0){ $0 + $1.maxWidth + lineSpacing } - lineSpacing
        let heights = lines.map{ $0.height }
        guard
            let h = heights.max(by: { $0 <= $1 }) else {
            return .zero
        }
        return .init(origin: .zero, size: .init(width: w, height: h))
    }

4. 渲染文本

这里采用了一个TextsView的单独类来承担字符的渲染，目的是为了方便布局对齐。

这里扩展了一个characters数组计算属性，将上述的texter中的数据转换成直接可以渲染的text、frame对象。该计算也参考了用户设置的行对齐的属性：

enum LineAlignment: Int {
        case top
        case center
        case bottom
    }

核心计算逻辑

    var characters: [Character] {
        guard let firstLine = texter.lines.first else {
            return []
        }
        var x: CGFloat = isLTR ? 0 : (textsArea.maxX - firstLine.maxWidth)
        var yBase: CGFloat = 0
        var y: CGFloat = 0
        
        let area = textsArea
        
        var list: [Character] = []
        
        for line in texter.lines {
// 根据垂直行对齐的方式，设置y的base参考线值
            switch lineAlignment {
            case .top: yBase = 0
            case .center: yBase = (area.height - line.height) / 2
            case .bottom: yBase = area.height - line.height
            }
            y = yBase

            for word in line.words {
                list.append(.init(text: word.text, frame: .init(origin: .init(x: x, y: y), size: word.size)))
                y += word.size.height
            }
            if isLTR {
                x += (line.maxWidth + lineSpacing)
            }
            else {
                x -= (line.maxWidth + lineSpacing)
            }
        }
        
        return list
    }

字符渲染：

class TextsView: UIView {
        var characters: [Character] = [] {
            didSet{
                setNeedsDisplay()
            }
        }
        override func draw(_ rect: CGRect) {
            super.draw(rect)
            
            for c in characters {
                c.text.draw(in: c.frame)
            }
        }
    }

// 存储属性
private lazy var textsView: TextsView = {
        let view = TextsView()
        addSubview(view)
        return view
    }()

// 赋值，触发渲染
textsView.characters = characters

5. 计算TextsView的frame：

      var area = textsArea
        
        switch (xPosition, yPosition) {
        case (.left, .top):
            area.origin = .zero
        case (.left, .center):
            area.origin.y = (contentSize.height - area.size.height)/2
        case (.left, .bottom):
            area.origin.y = contentSize.height - area.size.height
            
        case (.right, .top):
            area.origin.x = contentSize.width - area.size.width
        case (.right, .center):
            area.origin.x = contentSize.width - area.size.width
            area.origin.y = (contentSize.height - area.size.height)/2
        case (.right, .bottom):
            area.origin.x = contentSize.width - area.size.width
            area.origin.y = contentSize.height - area.size.height
            
        case (.center, .top):
            area.origin.x = (contentSize.width - area.size.width) / 2
        case (.center, .center):
            area.origin.x = (contentSize.width - area.size.width) / 2
            area.origin.y = (contentSize.height - area.size.height)/2
        case (.center, .bottom):
            area.origin.x = (contentSize.width - area.size.width) / 2
            area.origin.y = contentSize.height - area.size.height
        }
        textsView.backgroundColor = .clear
        textsView.frame = area

上述frame计算依赖于用户设置的水平、垂直方式的对齐方式:

enum XPosition: Int {
        case left
        case center
        case right
    }
    enum YPosition: Int {
        case top
        case center
        case bottom
    }

5. 外部方法：

func setNeedsUpdate() {
// 计算
        calculating()
// 渲染
        drawingTexts()
    }
}

6. 外部使用：
```swift
@IBOutlet weak var label: VerticalLabel!
    
    @IBAction func xAlignChanged(_ sender: UISegmentedControl) {
        label.horizontal = sender.selectedSegmentIndex
    }
    
    @IBAction func yAlignChanged(_ sender: UISegmentedControl) {
        label.vertical = sender.selectedSegmentIndex
    }
    
    @IBAction func directionChanged(_ sender: UISegmentedControl) {
        label.direction = sender.selectedSegmentIndex
    }
    @IBAction func lineAlignmentChanged(_ sender: UISegmentedControl) {
        label.lineAlign = sender.selectedSegmentIndex
    }

override func viewDidLoad() {
        super.viewDidLoad()
        
        label.font = .boldSystemFont(ofSize: 24)
        label.text = "东风夜放花千树，\n更吹落，星如雨。\n宝马雕车香满路，\n凤箫声动，玉壶光转，\n一夜鱼龙舞。\n\n\n\n\n蛾儿雪柳黄金缕，\n笑语盈盈暗香去。\n众里寻他千百度，\n蓦然回首，\n那人却在，灯火阑珊处。这是超出的文本这是超出的文本这是超出的文本这是超出的文本"
    }

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        label.setNeedsUpdate()
    }

Xib设置