如何改变UIStackView的背景颜色？

Question

我试图UIStackView在Storyboard检查器中将背景从清除更改为白色,但在模拟时,堆栈视图的背景颜色仍然具有清晰的颜色.
如何更改背景颜色UIStackView？

Answer 1

你不能这样做 - UIStackView是一个非绘图视图,意味着 drawRect()永远不会调用它,它的背景颜色会被忽略.如果您非常想要背景颜色,请考虑将堆栈视图放在另一个视图中UIView,并为该视图提供背景颜色.

来自HERE的参考资料.

Answer 2

我是这样做的:

@IBDesignable
class StackView: UIStackView {
   @IBInspectable private var color: UIColor?
    override var backgroundColor: UIColor? {
        get { return color }
        set {
            color = newValue
            self.setNeedsLayout() // EDIT 2017-02-03 thank you @BruceLiu
        }
    }

    private lazy var backgroundLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        self.layer.insertSublayer(layer, at: 0)
        return layer
    }()
    override func layoutSubviews() {
        super.layoutSubviews()
        backgroundLayer.path = UIBezierPath(rect: self.bounds).cgPath
        backgroundLayer.fillColor = self.backgroundColor?.cgColor
    }
}

奇迹般有效

Answer 3

UIStackView是一个非呈现元素,因此,它不会在屏幕上绘制.这意味着改变backgroundColor基本上什么都不做.如果要更改背景颜色,只需将其添加UIView为子视图(未排列),如下所示:

extension UIStackView {

    func addBackground(color: UIColor) {
        let subview = UIView(frame: bounds)
        subview.backgroundColor = color
        subview.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        insertSubview(subview, at: 0)
    }

}

Answer 4

也许最简单,更易读,更少hacky的方法是嵌入UIStackView到UIView视图中并将背景颜色设置为视图.

并且不要忘记在这两个视图之间正确配置自动布局约束... ;-)

Answer 5

Pitiphong是正确的,要获得带有背景颜色的stackview,请执行以下操作...

  let bg = UIView(frame: stackView.bounds)
  bg.autoresizingMask = [.flexibleWidth, .flexibleHeight]
  bg.backgroundColor = UIColor.red

  stackView.insertSubview(bg, at: 0)

这将为您提供一个stackview,其内容将被放置在红色背景上.

要向stackview添加填充以使内容不与边缘齐平,请在代码中或故事板上添加以下内容...

  stackView.isLayoutMarginsRelativeArrangement = true
  stackView.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)

Answer 6

TL; DR:执行此操作的官方方法是使用addSubview:方法向堆栈视图添加空视图,并设置添加的视图背景.

解释:UIStackView是一个特殊的UIView子类,只做布局而不是绘图.它的许多属性都不会像往常那样起作用.由于UIStackView将仅布置其排列的子视图,这意味着您可以简单地将UIView添加到addSubview:方法,设置其约束和背景颜色.这是实现WWDC会话引用的官方方式

Answer 7

值得指出的是，从iOS 14开始， UIStackViews 会渲染背景颜色。您可以使用 Background 属性从 Storyboard 设置 UIStackView 的背景。

或在代码中：

if #available(iOS 14.0, *) {
    stackView.backgroundColor = .green
} else {
    // Fallback for older versions of iOS
}