如何更改UIStackView的背景颜色？

我尝试在故事板检查器中将UIStackView背景从清晰更改为白色，但是在模拟时，堆栈视图的背景颜色仍具有清晰的颜色。
我怎样才能改变UIStackView的背景颜色？

Answer 1

你不能做到这一点 – UIStackView是一个非绘图视图，这意味着drawRect()永远不会被调用，其背景颜色被忽略。 如果你拼命想要一个背景颜色，考虑将堆栈视图放在另一个UIView ，并为该视图提供一个背景颜色。

从这里引用。

Answer 2

我这样做：

 class StackView: UIStackView { 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

TL; DR：官方的方法是使用addSubview:方法在堆栈视图中添加一个空视图，并设置添加的视图背景。

解释：UIStackView是一个特殊的UIView子类，只做布局不绘制。 如此多的财产将无法正常工作。 而且由于UIStackView只会布置其排列的子视图，这意味着你可以简单地使用addSubview:方法添加一个UIView，设置它的约束和背景颜色。 这是实现WWDC会议引用的官方方式

Answer 4

在iOS10中，设置颜色后，@ Arbitur的答案需要一个setNeedsLayout。 这是需要的变化：

 override var backgroundColor: UIColor? { get { return color } set { color = newValue setNeedsLayout() } } 

Answer 5

也许最简单，更可读，更简单的方法是将UIStackViewembedded到UIView ，并将背景颜色设置为视图。

不要忘记正确configuration这两个视图之间的自动布局约束… 😉

Answer 6

Pitiphong是正确的，以获得与背景颜色的堆栈视图做类似以下内容…

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

这会给你一个stackview的内容将被放置在一个红色的背景。

要添加填充到堆栈视图，以便内容不与边缘齐平，请在代码或故事板上添加以下内容…

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

Answer 7

这在Swift 3和iOS 10中适用于我：

 let stackView = UIStackView() let subView = UIView() subView.backgroundColor = .red subView.translatesAutoresizingMaskIntoConstraints = false stackView.addSubview(subView) // Important: addSubview() not addArrangedSubview() // use whatever constraint method you like to // constrain subView to the size of stackView. subView.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true subView.bottomAnchor.constraint(equalTo: stackView.bottomAnchor).isActive = true subView.leftAnchor.constraint(equalTo: stackView.leftAnchor).isActive = true subView.rightAnchor.constraint(equalTo: stackView.rightAnchor).isActive = true // now add your arranged subViews... stackView.addArrangedSubview(button1) stackView.addArrangedSubview(button2) 

Answer 8

以下是添加堆栈视图背景颜色的简要概述。

 class RevealViewController: UIViewController { @IBOutlet private weak var rootStackView: UIStackView! 

用圆angular创build背景视图

 private lazy var backgroundView: UIView = { let view = UIView() view.backgroundColor = .purple view.layer.cornerRadius = 10.0 return view }() 

为了使它看起来像背景一样，我们将它添加到索引为0的根堆栈视图的子视图数组中。这将它放在堆栈视图的排列视图之后。

 private func pinBackground(_ view: UIView, to stackView: UIStackView) { view.translatesAutoresizingMaskIntoConstraints = false stackView.insertSubview(view, at: 0) view.pin(to: stackView) } 

通过在UIView上使用一个小扩展，添加约束来将backgroundView绑定到堆栈视图的边缘。

 public extension UIView { public func pin(to view: UIView) { NSLayoutConstraint.activate([ leadingAnchor.constraint(equalTo: view.leadingAnchor), trailingAnchor.constraint(equalTo: view.trailingAnchor), topAnchor.constraint(equalTo: view.topAnchor), bottomAnchor.constraint(equalTo: view.bottomAnchor) ]) } } 

从viewDidLoad调用pinBackground

 override func viewDidLoad() { super.viewDidLoad() pinBackground(backgroundView, to: rootStackView) } 

参考： 这里

Answer 9

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 10

 UIStackView *stackView; UIView *stackBkg = [[UIView alloc] initWithFrame:CGRectZero]; stackBkg.backgroundColor = [UIColor redColor]; [self.view insertSubview:stackBkg belowSubview:stackView]; stackBkg.translatesAutoresizingMaskIntoConstraints = NO; [[stackBkg.topAnchor constraintEqualToAnchor:stackView.topAnchor] setActive:YES]; [[stackBkg.bottomAnchor constraintEqualToAnchor:stackView.bottomAnchor] setActive:YES]; [[stackBkg.leftAnchor constraintEqualToAnchor:stackView.leftAnchor] setActive:YES]; [[stackBkg.rightAnchor constraintEqualToAnchor:stackView.rightAnchor] setActive:YES]; 

Answer 11

你可以这样做：

 stackView.backgroundColor = UIColor.blue 

通过提供一个扩展来覆盖backgroundColor ：

 extension UIStackView { override open var backgroundColor: UIColor? { get { return super.backgroundColor } set { super.backgroundColor = newValue let tag = -9999 for view in subviews where view.tag == tag { view.removeFromSuperview() } let subView = UIView() subView.tag = tag subView.backgroundColor = newValue subView.translatesAutoresizingMaskIntoConstraints = false self.addSubview(subView) subView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true subView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true subView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true subView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true } } }