ios - 如何在书的目录中向 LabelView 添加点(省略号)

Question

我有stackView，其中包含很少的labelView，每个都写了两个单词。我希望它们在 labelView 的整个宽度上用省略号分隔。结果是:一个词靠近左边，另一个词靠近右边，它们之间是点。注意:如果字长较长，标签可以占几行。



编辑

这里填充我的stackView

for ingredient in ingredients {
    let textLabel = UILabel()
    textLabel.backgroundColor = UIColor.yellow // just for my needs
    textLabel.widthAnchor.constraint(equalToConstant: ingredientsStackView.frame.width).isActive = true
    textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
    textLabel.text = ingredient.getName() + " " + String(ingredient.getAmount()) + " " + ingredient.getMeasure()
    textLabel.textAlignment = .left
    textLabel.numberOfLines = 0
    textLabel.lineBreakMode = .byWordWrapping
    ingredientsStackView.addArrangedSubview(textLabel)
}
ingredientsStackView.translatesAutoresizingMaskIntoConstraints = false

看起来像这样



但我想要这样的东西



您可以看到 ingredientName 之间的点和 ingredientAmount .

我有一个想法通过 CGFloat 来实现它转换 here ，但是这个问题已经结束了。

Answer 1

一种技术是使用 size() 或 boundingRect(with:options:context:) 计算大小，对越来越多的点重复此操作，直到达到所需的宽度。

但这忽略了一个微妙的(但恕我直言，重要的)方面，即所有行中的点都应该完美排列。如果他们不排队，可能会令人惊讶地分散注意力。

所以，我倾向于定义一个 View 来做这件事，对一些共同的祖先 View 坐标系统执行模数计算。而且，我个人只是将这些点渲染为 UIBezierPath .

例如:

class EllipsesView: UIView {
    let spacing: CGFloat = 3
    let radius: CGFloat = 1.5

    var color: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark: return .white
            default:    return .black
            }
        }
    }

    let shapeLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.strokeColor = UIColor.clear.cgColor
        return layer
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        shapeLayer.fillColor = color.cgColor

        let point = convert(bounds.origin, to: window)

        let diff = radius * 3 + spacing
        let offset = diff - point.x.truncatingRemainder(dividingBy: diff)

        let rect = CGRect(x: bounds.minX + offset, y: bounds.maxY - radius * 2, width: bounds.width - offset, height: radius * 2)

        let path = UIBezierPath()

        var center = CGPoint(x: rect.minX + radius, y: rect.midY)

        while center.x + radius < rect.maxX {
            path.addArc(withCenter: center, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
            center.x += diff
        }

        shapeLayer.path = path.cgPath
    }
}

private extension EllipsesView {
    func configure() {
        layer.addSublayer(shapeLayer)
    }
}

然后您可以添加两个标签，将椭圆 View 的底部与标签的底部基线对齐:

let stringPairs = [("foo", "$1.37"), ("foobar", "$0.42"), ("foobarbaz", "$10.00"), ("foobarbazqux", "$100.00")]
for stringPair in stringPairs {
    let container = UIView()
    container.translatesAutoresizingMaskIntoConstraints = false

    let leftLabel = UILabel()
    leftLabel.translatesAutoresizingMaskIntoConstraints = false
    leftLabel.text = stringPair.0
    leftLabel.setContentHuggingPriority(.required, for: .horizontal)
    container.addSubview(leftLabel)

    let ellipsesView = EllipsesView()
    ellipsesView.translatesAutoresizingMaskIntoConstraints = false
    container.addSubview(ellipsesView)

    let rightLabel = UILabel()
    rightLabel.translatesAutoresizingMaskIntoConstraints = false
    rightLabel.font = UIFont.monospacedDigitSystemFont(ofSize: rightLabel.font.pointSize, weight: .regular)
    rightLabel.text = stringPair.1
    rightLabel.setContentHuggingPriority(.required, for: .horizontal)
    container.addSubview(rightLabel)

    NSLayoutConstraint.activate([
        // horizontal constraints

        leftLabel.leadingAnchor.constraint(equalTo: container.leadingAnchor),
        ellipsesView.leadingAnchor.constraint(equalTo: leftLabel.trailingAnchor, constant: 3),
        rightLabel.leadingAnchor.constraint(equalTo: ellipsesView.trailingAnchor, constant: 3),
        rightLabel.trailingAnchor.constraint(equalTo: container.trailingAnchor),

        // align last baseline of three subviews

        leftLabel.lastBaselineAnchor.constraint(equalTo: ellipsesView.bottomAnchor),
        leftLabel.lastBaselineAnchor.constraint(equalTo: rightLabel.lastBaselineAnchor),

        // vertical constraints to container

        leftLabel.topAnchor.constraint(greaterThanOrEqualTo: container.topAnchor),
        rightLabel.topAnchor.constraint(greaterThanOrEqualTo: container.topAnchor),
        ellipsesView.topAnchor.constraint(equalTo: container.topAnchor),
        leftLabel.bottomAnchor.constraint(equalTo: container.bottomAnchor),
    ])

    verticalStackView.addArrangedSubview(container)
}

这会产生椭圆，但它们也都完美排列: