Create Vertical lines between Uilabels inside of a stack view [duplicate]

Question

This question already has answers here:

iOS - Add vertical line programatically inside a stack view (6 answers)

Closed 2 years ago.

I want to create a UICollectionView with a custom header in Code. Therefore i created a Subclass of UICollectionViewCell to describe my custom header. I want to display five labels in my header in a horizontal line. Therefore I created five labels and add them inside a stackView. The stackview show my labels filled equally. So far everything perfect.

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

Now I want to add separate vertical lines between these labels like that:

Label1 | Label2 |  Label3 |  Label4 | Label5

I created a UIView but can't add this view between the labels. Can anyone help me please. Thanks

Answer 1

If you do that in interface builder it can be very easy. Add you labels to horizontal stack view, then add your divider views in between, create 1 point width constraint for your divider views, set their hugging priority higher than your labels and set your stack view's alignment to fill and distribution to equal spacing. That's it. You may also want to set the dividers' width constraint priority to 999 so the xcode wont complain for breaking constraints in some cases.

here're a screenshot of my quick test:

and the result in the simulator:

My example is done straight in a view of a view controller, but you of course can create a new UIView subclass with a xib file, put the labels (and dividers) in there and later instantiate your view something like this: let myView = Bundle.main.loadNibNamed("MyViewWithLabels", owner: nil, options: nil)![0] as! MyViewWithLabels. Then just add your view instance to your collection view cll as a subview.