Setting height of UiLabel inside UiStackview Using swift

Question

I am dynamically adding views in the UiStackview. Since UiStackview is not a regular view, SO I can not add a bottom border to it. That is why I have planned to add a UILabel at the end of it

The label that I will add at the end of my UIStackview will be dealt as a border. I was thinking to make its height as 1point. and give it a background color. And expand its height to full width of screen.

But its height is not getting controlled. Can anyone tell me what the problem is?

Here is the little code snippet

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 10, height: 1))
            label.backgroundColor = UIColor.black
            label.text = ""


            bottomBorder.addArrangedSubview(label)

I am adding this in the end of the main stackview. it gets added in the main stackview but with the height of I think 30 point. Or may be its the default height of the UiLabel

My questions are:

1. How to add UiLabel or a border at the end of stackview (vertical alignment)
2. Is there any way that I can add border to my stackview directly? Four side border or at least bottom border?

Answer 1

You have 2 alternatives to achieve this:

1- put the stackview inside a UIView parentView

2- do not add UILabel directly to the UIStackView , add the UILabel to UIView then add the UIView to the UIStackView , so that you can whatever separators you want to the UIView .

Code to do that:

override func viewDidLoad()
    {
        super.viewDidLoad()
        stackView.distribution = .fillEqually

        let v1 = getViewForStackView(lblText: "lbl1")
        let v2 = getViewForStackView(lblText: "lbl2")

        stackView.addArrangedSubview(v1)
        stackView.addArrangedSubview(v2)
    }


    func getViewForStackView(lblText:String)->UIView
    {
        let rectView = CGRect(x: 0, y: 0, width: 100, height: 100)
        let view = UIView(frame: rectView)
        view.backgroundColor = .green
        let label = UILabel()
        label.text = lblText
        label.backgroundColor = .red
        addFillingSubview(parentView: view, subview: label, insets: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
        return view
    }

    func addFillingSubview(parentView:UIView, subview: UIView, insets: UIEdgeInsets = .zero)
    {
        subview.translatesAutoresizingMaskIntoConstraints = false
        parentView.addSubview(subview)

        let views = ["subview": subview]
        let metrics = ["top": insets.top, "left": insets.left, "bottom": insets.bottom, "right": insets.right]

        parentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|-(left)-[subview]-(right)-|", options: [], metrics: metrics, views: views))
        parentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(top)-[subview]-(bottom)-|", options: [], metrics: metrics, views: views))
    }

Output:

Answer 2

Use this class

class BorderedStackView: UIStackView {
    let borderWidth : Int = 2
    let borderColor : UIColor = UIColor.darkGray;
    var borderView : UIView!


    required init(coder: NSCoder) {
        super.init(coder: coder);
        initializeSubviews();
    }

    required override init(frame: CGRect) {
        super.init(frame: frame);
        initializeSubviews();
    }

    func initializeSubviews() {
        borderView = UIView.init();
        borderView.backgroundColor = UIColor.black;
        self.addSubview(borderView);
    }

    override func layoutSubviews() {
        super.layoutSubviews();

        var frame = self.bounds;
        frame.origin.y = frame.size.height - CGFloat.init(borderWidth)
        frame.size.height = CGFloat.init(borderWidth);
        self.borderView.frame = frame;
        self.bringSubview(toFront: self.borderView)
    }
}

Uses:

    let stackView = BorderedStackView.init(frame: CGRect.init(x: 50, y: 50, width: 200, height: 200));
    stackView.axis = .vertical
    stackView.borderWidth = 20;
    stackView.borderColor = .red;
    self.view.addSubview(stackView);

    let subView1 = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 200, height: 100));
    subView1.backgroundColor = UIColor.red;
    stackView.addSubview(subView1);

    let subView2 = UIView.init(frame: CGRect.init(x: 0, y: 100, width: 200, height: 100));
    subView2.backgroundColor = UIColor.black;
    stackView.addSubview(subView2);