Create Vertical lines between Uilabels inside of a stack view

Question

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

I can't see any code where the separators are added to the StackView — The Dreams Wind, Apr 24 '17 at 20:03
http://stackoverflow.com/questions/34211738/can-you-give-uistackview-borders — brandonscript, Apr 24 '17 at 20:04
Thanks Brandon . So this means the UIstackview is a nonRendering view and it can't be done. — Developer Omari, Apr 24 '17 at 20:56

Au Ris · Answer 1 · 2017-04-24T21:24:55.947

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.

Create Vertical lines between Uilabels inside of a stack view

1 Answers1

Linked