在堆栈视图内部的Uilabels之间创建垂直线

Question

我想在Code中创建一个带有自定义标头的UICollectionView。因此，我创建了一个UICollectionViewCell的子类来描述我的自定义标题。我想在标题中以水平线显示五个标签。因此我创建了五个标签并将它们添加到stackView中。 stackview显示我的标签填写相同。迄今为止一切都很完美

Label1 Label2 Label3 Label4 Label5

   //Label 1
    let votesLabel: UILabel = {
    let label = UILabel()
    let attributedText = NSMutableAttributedString(string: "Votes", attributes: [NSFontAttributeName: UIFont.boldSystemFont(ofSize: 12) ])
    attributedText.append(NSAttributedString(string: "\n 0", attributes: [NSForegroundColorAttributeName: UIColor.lightGray, NSFontAttributeName: UIFont.systemFont(ofSize: 14)]))
    label.attributedText = attributedText

    // label.text = "11\nvotes"
    label.textAlignment = .center
    label.numberOfLines = 0
    return label
   }()


// label 2 ... 5



  // creating the subview and add the labels to my subview
        addSubview(topDividerView)
        let stackView = UIStackView(arrangedSubviews: [ votesLabel, and the other 4 labels])
       stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        addSubview(stackView)

   // add stackView to my view 

        stackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        stackView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true

现在我想在这些标签之间添加单独的垂直线：

Label1 | Label2 | Label3 | Label4 | Label5

我创建了一个UIView，但无法在标签之间添加此视图。任何人都可以帮助我。感谢

Answer 1

如果您在界面构建器中执行此操作，则可以非常轻松。将标签添加到水平堆栈视图，然后在两者之间添加分隔视图，为分隔视图创建1点宽度约束，将其拥抱优先级设置为高于标签，并将堆栈视图的对齐设置为fill并分配到{ {1}}。而已。您可能还希望将分隔符的宽度约束优先级设置为999，以便xcode在某些情况下不会抱怨破坏约束。

这是我快速测试的截图：

和模拟器中的结果：

我的示例直接在视图控制器的视图中完成，但您当然可以创建一个带有xib文件的新UIView子类，将标签（和分隔符）放在那里，然后实例化您的视图，如下所示：{ {1}}。然后，只需将您的视图实例作为子视图添加到集合视图cll中。