Can you give UIStackView borders?

Question

I'm trying to give 5 separate UIStackViews in my ViewController borders. I gave each of them an IBOutlet and then called them in viewDidLoad to use the layer property but to no avail. Is it not possible to give stack views borders, programatically?

Code:

@IBOutlet weak var stackView1: UIStackView! @IBOutlet weak var stackView2: UIStackView! @IBOutlet weak var stackView3: UIStackView! @IBOutlet weak var stackView4: UIStackView! @IBOutlet weak var stackView5: UIStackView!  override func viewDidLoad() {     super.viewDidLoad()      stackView1.layer.borderWidth = 5     stackView2.layer.borderWidth = 5     stackView3.layer.borderWidth = 5     stackView4.layer.borderWidth = 5     stackView5.layer.borderWidth = 5    } 

Answer 1

Unfortunately this can't be done. UIStackView is unusual in that it is a "non-rendering" view which performs layout (using Auto Layout constraints) but does not display itself. It has a layer like all UIViews, but it's ignored.

See the Apple doc under "Managing the Stack View's Appearance":

The UIStackView is a nonrendering subclass of UIView. It does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no affect on the stack view. Similarly, you cannot override layerClass, drawRect:, or drawLayer:inContext:

Answer 2

Its possible to do this by having views inside the stack view be the borders. This can be a lot of work and there might be certain situations that either won't work or have to be worked around so it might not be worth the effort. You'll need to nest the stack views so you can provide borders in both the horizontal and vertical directions. In my Bordered Stack Views blog post I go into more detail about this. But basically I have regular views have a background set to the color of my choosing and I give height or width constraints of 1 depending on the direction of the stack view's axis. Here is the full hierarchy of a 2x2 grid built in interface builder:

Resulting in this result:

Here's a link to my github repo of this example so you can see the storyboard file.