Divide stackview in three subviews with a dashed divider line?

Question

I'm trying to divide a UIStackView intro three separate subviews and have them divided by a dashed line. I know you can set spacing on a UIStackView but as far as I'm aware you cannot change that spacing to be a dashed line.

Basically I want my three subviews to scale properly on different device sizes but the dashed line to always be small in between them. For clarity the result I'm trying to achieve looks like this:

I hope someone can point me in the right direction, thanks in advance!

You should take three UIView inside stackview with fill equally and you can add dashed line as subview to the left and centre uiview — Prashant Tukadiya, Nov 23 '17 at 14:00

score 4 · Accepted Answer · answered Nov 23 '17 at 14:31

You can constrain the 3 views to have equal width, and then add a couple of separator views constrained to a constant width.

let stackView = UIStackView()
stackView.axis = .horizontal
self.view.addSubview(stackView)

let view1 = UIView()
view1.backgroundColor = .red
stackView.addArrangedSubview(view1)

let separator1 = UIView()
separator1.backgroundColor = .black
stackView.addArrangedSubview(separator1)
separator1.widthAnchor.constraint(equalToConstant: 1).isActive = true

let view2 = UIView()
view2.backgroundColor = .green
stackView.addArrangedSubview(view2)
view2.widthAnchor.constraint(equalTo: view1.widthAnchor, multiplier: 1).isActive = true

let separator2 = UIView()
separator2.backgroundColor = .black
stackView.addArrangedSubview(separator2)
separator2.widthAnchor.constraint(equalToConstant: 1).isActive = true

let view3 = UIView()
view3.backgroundColor = .blue
stackView.addArrangedSubview(view3)
view3.widthAnchor.constraint(equalTo: view1.widthAnchor, multiplier: 1).isActive = true

This is so simple and so beautiful. I just tried implementing [dynamic line] - [fixed size dot] - [dynamic line] - [fixed size dot] for like 30 minutes without success until I saw this. Thank you! — NeverwinterMoon, Apr 04 '19 at 15:16

Divide stackview in three subviews with a dashed divider line?

1 Answers1