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

Question

我想用Code中的自定义标头创建UICollectionView。因此，我创建了UICollectionViewCell的子类来描述我的自定义标头。我想在标题的水平线上显示五个标签。因此，我创建了五个标签并将其添加到stackView中。stackview显示我的标签被均等填充。到目前为止，一切都很完美。

标签1标签2标签3标签4标签5

   //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

现在，我想在这些标签之间添加单独的垂直线，如下所示：

标签1 | 标签2 | 标签3 | 标签4 | 标签5

我创建了一个UIView，但是无法在标签之间添加此视图。谁能帮我。谢谢

Answer 1

如果在界面生成器中执行此操作，可能会非常容易。将标签添加到水平堆栈视图，然后在其间添加分隔线视图，为分隔线视图创建1点宽度约束，将其拥抱优先级设置为高于标签，并将堆栈视图的对齐方式设置为，fill并将分布设置为equal spacing。而已。您可能还希望将分隔器的宽度约束优先级设置为999，以便在某些情况下xcode不会抱怨约束突破。

这是我的快速测试的屏幕截图：

以及模拟器中的结果：

我的示例直接在视图控制器的视图中完成，但是您当然可以使用xib文件创建一个新的UIView子类，在其中放置标签（和分隔线），然后实例化视图，如下所示：let myView = Bundle.main.loadNibNamed("MyViewWithLabels", owner: nil, options: nil)![0] as! MyViewWithLabels。然后，只需将视图实例作为子视图添加到集合视图cll中即可。