Wie ändere ich die Hintergrundfarbe von UIStackView?

Ich habe versucht, den UIStackViewHintergrund im Storyboard-Inspektor von klar auf weiß zu ändern , aber beim Simulieren hat die Hintergrundfarbe der Stapelansicht immer noch eine klare Farbe.
Wie kann ich die Hintergrundfarbe von a ändern UIStackView?

Sie können dies nicht tun - UIStackViewist eine Ansicht ohne Zeichnung, dh sie drawRect()wird nie aufgerufen und ihre Hintergrundfarbe wird ignoriert. Wenn Sie unbedingt eine Hintergrundfarbe wünschen, sollten Sie die Stapelansicht in einer anderen platzieren UIViewund dieser Ansicht eine Hintergrundfarbe geben.

Referenz von HIER .

BEARBEITEN:

Sie können eine Unteransicht UIStackViewwie HIER oder in dieser Antwort (unten) hinzufügen und dieser eine Farbe zuweisen. Schauen Sie sich das unten extensionan:

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

Und Sie können es verwenden wie:

stackView.addBackground(color: .red)

So mach ich es:

@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
    }
}

Klappt wunderbar

UIStackViewist ein nicht renderendes Element und wird daher nicht auf dem Bildschirm gezeichnet. Dies bedeutet, dass Änderungen im backgroundColorWesentlichen nichts bewirken. Wenn Sie die Hintergrundfarbe ändern möchten, fügen UIViewSie einfach eine Unteransicht (die nicht angeordnet ist) wie folgt hinzu:

extension UIStackView {

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

}

Vielleicht wäre der einfachste, lesbarere und weniger hackige Weg, das UIStackViewin ein einzubetten UIViewund die Hintergrundfarbe auf die Ansicht einzustellen.

Und vergessen Sie nicht, die Einschränkungen für das automatische Layout zwischen diesen beiden Ansichten richtig zu konfigurieren… ;-)

Pitiphong ist richtig, um eine Stapelansicht mit einer Hintergrundfarbe zu erhalten, gehen Sie wie folgt vor ...

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

  stackView.insertSubview(bg, at: 0)

Dadurch erhalten Sie eine Stapelansicht, deren Inhalt auf einem roten Hintergrund platziert wird.

Um der Stapelansicht eine Auffüllung hinzuzufügen, damit der Inhalt nicht bündig mit den Kanten abschließt, fügen Sie Folgendes im Code oder im Storyboard hinzu ...

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

TL; DR: Der offizielle Weg, dies zu tun, besteht darin, eine leere Ansicht mithilfe der addSubview:Methode in die Stapelansicht einzufügen und stattdessen den Hintergrund der hinzugefügten Ansicht festzulegen.

Die Erklärung: UIStackView ist eine spezielle UIView-Unterklasse, die nur das Layout und nicht das Zeichnen ausführt. So viele seiner Eigenschaften funktionieren nicht wie gewohnt. Und da UIStackView nur die angeordneten Unteransichten anordnet, können Sie ihm einfach eine UIView mit addSubview:Methode hinzufügen , die Einschränkungen und die Hintergrundfarbe festlegen. Dies ist der offizielle Weg, um das zu erreichen, was Sie aus der WWDC-Sitzung zitieren möchten

Dies funktioniert bei mir in Swift 3 und 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)

In iOS10 benötigt die Antwort von @ Arbitur ein setNeedsLayout, nachdem die Farbe festgelegt wurde. Dies ist die Änderung, die benötigt wird:

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

Hier ist eine kurze Übersicht zum Hinzufügen einer Hintergrundfarbe für die Stapelansicht.

class RevealViewController: UIViewController {

    @IBOutlet private weak var rootStackView: UIStackView!

Hintergrundansicht mit abgerundeten Ecken erstellen

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

Damit es als Hintergrund angezeigt wird, fügen wir es dem Unteransichtsarray der Stammstapelansicht bei Index 0 hinzu. Dadurch wird es hinter die angeordneten Ansichten der Stapelansicht verschoben.

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

Fügen Sie mithilfe einer kleinen Erweiterung in UIView Einschränkungen hinzu, um die Hintergrundansicht an den Rändern der Stapelansicht anzuheften.

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)
      ])
  }
}

Rufen Sie die pinBackgroundvonviewDidLoad

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

Referenz von: HIER

Sie könnten eine kleine Erweiterung von machen UIStackView

extension UIStackView {
    func setBackgroundColor(_ color: UIColor) {
        let backgroundView = UIView(frame: .zero)
        backgroundView.backgroundColor = color
        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        self.insertSubview(backgroundView, at: 0)
        NSLayoutConstraint.activate([
            backgroundView.topAnchor.constraint(equalTo: self.topAnchor),
            backgroundView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            backgroundView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            backgroundView.trailingAnchor.constraint(equalTo: self.trailingAnchor)
            ])
    }
}

Verwendung:

yourStackView.setBackgroundColor(.black)

Xamarin, C # -Version:

var stackView = new UIStackView { Axis = UILayoutConstraintAxis.Vertical };

UIView bg = new UIView(stackView.Bounds);
bg.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
bg.BackgroundColor = UIColor.White;
stackView.AddSubview(bg);

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];

Unterklasse UIStackView

class CustomStackView : UIStackView {

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

private lazy var backgroundLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    self.layer.insertSublayer(layer, at: 0)
    return layer
}()

override public func layoutSubviews() {
    super.layoutSubviews()
    backgroundLayer.path = UIBezierPath(rect: self.bounds).cgPath
    backgroundLayer.fillColor = self.backgroundColor?.cgColor
}
}

Dann in deiner Klasse

yourStackView.backgroundColor = UIColor.lightGray

Sie können eine Unterschicht in StackView einfügen, es funktioniert für mich:

@interface StackView ()
@property (nonatomic, strong, nonnull) CALayer *ly;
@end

@implementation StackView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _ly = [CALayer new];
        [self.layer addSublayer:_ly];
    }
    return self;
}

- (void)setBackgroundColor:(UIColor *)backgroundColor {
    [super setBackgroundColor:backgroundColor];
    self.ly.backgroundColor = backgroundColor.CGColor;
}

- (void)layoutSubviews {
    self.ly.frame = self.bounds;
    [super layoutSubviews];
}

@end

Ich bin etwas skeptisch bei der Unterklassifizierung von UI-Komponenten. So benutze ich es,

struct CustomAttributeNames{
        static var _backgroundView = "_backgroundView"
    }

extension UIStackView{

var backgroundView:UIView {
        get {
            if let view = objc_getAssociatedObject(self, &CustomAttributeNames._backgroundView) as? UIView {
                return view
            }
            //Create and add
            let view = UIView(frame: .zero)
            view.translatesAutoresizingMaskIntoConstraints = false
            insertSubview(view, at: 0)
            NSLayoutConstraint.activate([
              view.topAnchor.constraint(equalTo: self.topAnchor),
              view.leadingAnchor.constraint(equalTo: self.leadingAnchor),
              view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
              view.trailingAnchor.constraint(equalTo: self.trailingAnchor)
            ])

            objc_setAssociatedObject(self,
                                     &CustomAttributeNames._backgroundView,
                                     view,
                                     objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)

            return view
        }
    }
}

Und das ist die Verwendung,

stackView.backgroundView.backgroundColor = .white
stackView.backgroundView.layer.borderWidth = 2.0
stackView.backgroundView.layer.borderColor = UIColor.red.cgColor
stackView.backgroundView.layer.cornerRadius = 4.0

Hinweis: Wenn Sie bei diesem Ansatz einen Rahmen festlegen möchten, müssen Sie ihn in layoutMarginsder stackView festlegen, damit der Rahmen sichtbar ist.

Sie können der Stapelansicht keinen Hintergrund hinzufügen. Sie können jedoch eine Stapelansicht in eine Ansicht einfügen und dann den Hintergrund der Ansicht festlegen, um die Aufgabe zu erledigen. * Es wird den Fluss von Stackview nicht unterbrechen. Hoffe das wird helfen.

Wir können eine benutzerdefinierte Klasse StackViewwie diese haben:

class StackView: UIStackView {
    lazy var backgroundView: UIView = {
        let otherView = UIView()
        addPinedSubview(otherView)
        return otherView
    }()
}

extension UIView {
    func addPinedSubview(_ otherView: UIView) {
        addSubview(otherView)
        otherView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            otherView.trailingAnchor.constraint(equalTo: trailingAnchor),
            otherView.topAnchor.constraint(equalTo: topAnchor),
            otherView.heightAnchor.constraint(equalTo: heightAnchor),
            otherView.widthAnchor.constraint(equalTo: widthAnchor),
        ])
    }
}

Und es kann so verwendet werden:

let stackView = StackView()
stackView.backgroundView.backgroundColor = UIColor.lightGray

Dies ist etwas besser als das Hinzufügen einer Erweiterungsfunktion, func addBackground(color: UIColor)wie von anderen vorgeschlagen. Die Hintergrundansicht ist faul, sodass sie erst erstellt wird, wenn Sie tatsächlich anrufen stackView.backgroundView.backgroundColor = .... Wenn Sie die Hintergrundfarbe mehrmals einstellen / ändern, werden nicht mehrere Unteransichten in die Stapelansicht eingefügt.

Wenn Sie vom Designer selbst aus steuern möchten, fügen Sie diese Erweiterung zur Stapelansicht hinzu

 @IBInspectable var customBackgroundColor: UIColor?{
     get{
        return backgroundColor
     }
     set{
        backgroundColor = newValue
         let subview = UIView(frame: bounds)
         subview.backgroundColor = newValue
         subview.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         insertSubview(subview, at: 0)
     }
 }

Sie könnten es so machen:

stackView.backgroundColor = UIColor.blue

Durch die Bereitstellung einer Erweiterung zum Überschreiben von 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
        }

    }

}

Probieren Sie BoxView aus . Es ähnelt UIStackView, rendert jedoch und unterstützt mehr Layoutoptionen.