如何使两个视图之间的视图成比例？

Question

I want to achieve following layout

I am done with the circular oval views I have constrainted first and fourth oval view to start and end of superview. I am not able to understand how to make the horizontal line stretch its width between second and third view so that the horizontal line is equal widths between all the circular views?

I know I can take the oval views in the stack view but what about the horizontal line?

Answer 1

For your problem in UIStackView ;

There is 7 different UIView as seperated CircularView and SeparatorView in the screenshot.

Create a UIView class for the Horizontal Line and add a UIView for set just SeparatorView in horizontally centered and in UIStackView set your HorizontalView's portions as bigger in width but same as height with CircularView .

Without UIStackView ;

There's simple example with anchors.

        var view1 = UIView()
        view1.translatesAutoresizingMaskIntoConstraints = false
        view1.backgroundColor = .gray
        view1.layer.cornerRadius = 20

        var view2 = UIView()
        view2.translatesAutoresizingMaskIntoConstraints = false
        view2.backgroundColor = .gray
        view2.layer.cornerRadius = 20

        var seperator1View = UIView()
        seperator1View.translatesAutoresizingMaskIntoConstraints = false
        seperator1View.backgroundColor = .lightGray


        view.addSubview(view1)
        view1.heightAnchor.constraint(equalToConstant: 40).isActive = true
        view1.widthAnchor.constraint(equalToConstant: 40).isActive = true
        view1.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        view1.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        view.addSubview(seperator1View)
        seperator1View.leftAnchor.constraint(equalTo: view1.rightAnchor).isActive = true
        seperator1View.centerYAnchor.constraint(equalTo: view1.centerYAnchor).isActive = true
        seperator1View.heightAnchor.constraint(equalToConstant: 3).isActive = true
        seperator1View.widthAnchor.constraint(equalToConstant: 20).isActive = true

        view.addSubview(view2)
        view2.heightAnchor.constraint(equalToConstant: 40).isActive = true
        view2.widthAnchor.constraint(equalToConstant: 40).isActive = true
        view2.centerYAnchor.constraint(equalTo: view1.centerYAnchor).isActive = true
        view2.leftAnchor.constraint(equalTo: seperator1View.rightAnchor).isActive = true

There's output

So actually you can achieve this in many ways, in this approach you must calculate your all size of all kind of UIView instances and it's widths & heights .