CODEWITHSUNDEEP
iosuistackview
BSharer App - Share Books
BSharer App - Share Books

Reputation: 860

Visualizing UIStackView?

The question is quite simple - I really like to use UIStackView to organize UI. However, I could not see the UIStackView boundary in the test app. When the UI elements are not expected, I need to spend so much time to debug. Searching on the web, I could not find a way to show the boundaries of the UIStackView.

Upvotes: 0

Views: 378

Answers (2)

rob mayoff
rob mayoff

Reputation: 385900

I would use Xcode's “Debug View Hierarchy” support, as ferunandu's answer shows. This is the easiest way since UIStackView is implemented specifically not to render any graphics itself (by using a CATransformLayer as its layer).

But there is way to see the “boundary” of a stack view in place at runtime. Just add another view (anywhere in the view hierarchy), and constrain it to have the same frame as the stack view. You could do this in the storyboard or in code. Here's how you could do it in code:

extension UIStackView {

    func showBoundary() {
        let boundary = UIView()
        boundary.layer.borderColor = UIColor(red: 0.8, green: 0.5, blue: 1, alpha: 0.5).CGColor
        boundary.layer.borderWidth = 1
        boundary.backgroundColor = nil
        boundary.frame = self.bounds
        boundary.autoresizingMask = [ .FlexibleWidth, .FlexibleHeight ]

        addSubview(boundary) // Note: **not** addArrangedSubview!
    }

}

Then call stackView.showBoundary() on your stack view.

Upvotes: 2

backslash-f
backslash-f

Reputation: 8193

Have you tried clicking on the Debug View Hierarchy button in the debug bar?

enter image description here

Please refer to this (from Apple): Specialized Debugging Workflows.

Upvotes: 3

Related Questions