iOS – 在堆栈视图内以编程方式添加垂直线

我试图添加垂直线，堆栈视图内的标签之间所有编程。

所需的完成将是这样的形象：

我可以添加标签，全部用期望的间距; 我可以添加水平线，但我不知道如何添加中间的分隔符垂直线。

我想这样做：

let stackView = UIStackView(arrangedSubviews: [label1, verticalLine, label2, verticalLine, label3]) 

任何提示？

谢谢

Answer 1

你不能在两个地方使用相同的视图，所以你需要创build两个独立的垂直线视图。 您需要像这样configuration每个垂直行视图：

• 设置其背景颜色。
• 约束它的宽度为1（所以你得到一条线，而不是一个矩形）。
• 限制它的高度（所以它不会伸展到堆栈视图的整个高度）。

因此，一次将一个标签添加到堆栈视图中，然后在将每个标签添加到堆栈视图之前执行如下操作：

 if stackView.arrangedSubviews.count > 0 { let separator = UIView() separator.widthAnchor.constraint(equalToConstant: 1).isActive = true separator.backgroundColor = .black stackView.addArrangedSubview(separator) separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.6).isActive = true } 

请注意，您不希望垂直线的宽度与标签的宽度相同，因此您不得将堆栈视图的distribution属性设置为fillEqually 。 相反，如果您希望所有标签具有相同的宽度，则必须自己在标签之间创build宽度约束。 例如，添加每个新标签后，请执行以下操作：

 if let firstLabel = stackView.arrangedSubviews.first as? UILabel { label.widthAnchor.constraint(equalTo: firstLabel.widthAnchor).isActive = true } 

结果：

完整的操场代码：

 import UIKit import PlaygroundSupport extension UIFont { var withSmallCaps: UIFont { let feature: [String: Any] = [ UIFontFeatureTypeIdentifierKey: kLowerCaseType, UIFontFeatureSelectorIdentifierKey: kLowerCaseSmallCapsSelector] let attributes: [String: Any] = [UIFontDescriptorFeatureSettingsAttribute: [feature]] let descriptor = self.fontDescriptor.addingAttributes(attributes) return UIFont(descriptor: descriptor, size: pointSize) } } let rootView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 44)) rootView.backgroundColor = .white PlaygroundPage.current.liveView = rootView let stackView = UIStackView() stackView.axis = .horizontal stackView.alignment = .center stackView.frame = rootView.bounds rootView.addSubview(stackView) typealias Item = (name: String, value: Int) let items: [Item] = [ Item(name: "posts", value: 135), Item(name: "followers", value: 6347), Item(name: "following", value: 328), ] let valueStyle: [String: Any] = [ NSFontAttributeName: UIFont.boldSystemFont(ofSize: 12).withSmallCaps] let nameStyle: [String: Any] = [ NSFontAttributeName: UIFont.systemFont(ofSize: 12).withSmallCaps, NSForegroundColorAttributeName: UIColor.darkGray] let valueFormatter = NumberFormatter() valueFormatter.numberStyle = .decimal for item in items { if stackView.arrangedSubviews.count > 0 { let separator = UIView() separator.widthAnchor.constraint(equalToConstant: 1).isActive = true separator.backgroundColor = .black stackView.addArrangedSubview(separator) separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.4).isActive = true } let richText = NSMutableAttributedString() let valueString = valueFormatter.string(for: item.value)! richText.append(NSAttributedString(string: valueString, attributes: valueStyle)) richText.append(NSAttributedString(string: "\n" + item.name, attributes: nameStyle)) let label = UILabel() label.attributedText = richText label.textAlignment = .center label.numberOfLines = 0 stackView.addArrangedSubview(label) if let firstLabel = stackView.arrangedSubviews.first as? UILabel { label.widthAnchor.constraint(equalTo: firstLabel.widthAnchor).isActive = true } } UIGraphicsBeginImageContextWithOptions(rootView.bounds.size, true, 1) rootView.drawHierarchy(in: rootView.bounds, afterScreenUpdates: true) let image = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() let png = UIImagePNGRepresentation(image)! let path = NSTemporaryDirectory() + "/image.png" Swift.print(path) try! png.write(to: URL(fileURLWithPath: path)) 

Answer 2

你可以尝试以下。

1. 首先取一个UIView，并将相同的UIStackView约束应用于这个UIView。
2. 使此UIView的背景颜色为黑色（线的颜色）
3. 现在采取一个UIStackView并将其添加为上面的UIView的孩子。
4. 添加UIStackView的约束，即将其绑定到父UIView的所有边缘。
5. 现在将UIStackView的背景颜色设置为“清除颜色”。
6. 将UIStackView的间距设置为1或2（线宽）
7. 现在将3个标签添加到stackview中。
8. 确保标签的背景颜色为白色，文字颜色为黑色。

这样你就可以达到所需的场景。 看这些图片以供参考。