Wie ändere ich die Hintergrundfarbe von UIStackView?

Habe ich versucht zu ändern UIStackView hintergrund von klar bis weiß in der Storyboard-Inspektor, aber bei der Simulation, die Hintergrundfarbe der stack-Ansicht hat noch eine klare Farbe.
Wie kann ich den hintergrund ändern, die Farbe des UIStackView?

InformationsquelleAutor der Frage Chaz | 2016-01-19

167

Können Sie nicht tun – UIStackView ist eine non-Zeichnung anzeigen, was bedeutet, dass
drawRect() wird nie genannt und die Hintergrundfarbe wird ignoriert. Wenn Sie
verzweifelt wollen Sie eine Hintergrundfarbe, sollten Sie den stack-Ansicht
in einem anderen UIView und geben dieser Ansicht einen hintergrund-Farbe.

Verweis aus HIER.

InformationsquelleAutor der Antwort Dharmesh Kheni

Ich es so machen:

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

Funktioniert wie ein Charme

InformationsquelleAutor der Antwort Arbitur

16

UIStackView ist eine non-rendering-element, und als solches, wird es nicht auf dem Bildschirm gezeichnet. Dies bedeutet, dass eine änderung backgroundColor im Grunde nichts. Wenn Sie wollen, um die Hintergrundfarbe zu ändern, fügen Sie einfach eine UIView als Untersicht (nicht angeordnet) wie folgt:
```
extension UIStackView {

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

}
```
InformationsquelleAutor der Antwort Marián Černý
8

TL;DR: auf Dem offiziellen Weg, dies zu tun ist, indem Sie eine leere Ansicht in stack-Ansicht mit addSubview: Methode, und legen Sie die hinzugefügte Ansicht hintergrund statt.

Erklärung: UIStackView ist eine spezielle UIView-Unterklasse, die nur das layout, nicht die Zeichnung. So viele von seinen Eigenschaften nicht wie gewohnt arbeiten. Und da UIStackView wird das layout seinen angeordnet sind Untersichten nur, das bedeutet, dass Sie können einfach fügen Sie es ein UIView mit addSubview: Methode, seine Einschränkungen und Hintergrundfarbe. Dies ist der offizielle Weg, das zu erreichen, was Sie wollen zitiert aus der WWDC-session

InformationsquelleAutor der Antwort Pitiphong Phongpattranont
5

Vielleicht die einfachste, besser lesbar und weniger hacky Weg wäre zum einbetten der UIStackView in eine UIView und legen Sie die Hintergrundfarbe der Ansicht.

Und vergessen Sie nicht, um richtig konfigurieren Sie die Auto-Layout-constraints zwischen diesen beiden Ansichten... 😉

InformationsquelleAutor der Antwort MonsieurDart
4

Pitiphong korrekt ist, erhalten Sie eine stackview mit einer Hintergrundfarbe etwas wie die folgende...
```
  let bg = UIView(frame: stackView.bounds)
  bg.autoresizingMask = [.flexibleWidth, .flexibleHeight]
  bg.backgroundColor = UIColor.red

  stackView.addSubview(bg)
```
Dadurch erhalten Sie eine stackview, deren Inhalt platziert auf einem roten hintergrund.

Hinzufügen Polsterung an den stackview so die Inhalte sind nicht bündig mit den Kanten, fügen Sie den folgenden code oder auf dem storyboard...
```
  stackView.isLayoutMarginsRelativeArrangement = true
  stackView.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
```
InformationsquelleAutor der Antwort Michael Long

In iOS10, @Arbitur Antwort braucht eine setNeedsLayout nach Farbe gesetzt. Dies ist die Veränderung, die benötigt wird:

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

InformationsquelleAutor der Antwort BruceLiu

Dies funktioniert für mich 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)

InformationsquelleAutor der Antwort Murray Sagal

Hier ist eine kurze übersicht über die für das hinzufügen eines Stack-Ansicht Hintergrundfarbe.

class RevealViewController: UIViewController {

    @IBOutlet private weak var rootStackView: UIStackView!

Erstellen von hintergrund-Ansicht mit abgerundeten Ecken

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

Erscheinen zu lassen als hintergrund, fügen wir es an den Untersichten array der root-stack-Ansicht mit dem index 0. Damit liegt Sie hinter der arrangierten Blick auf die stack-Ansicht.

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

Fügen Sie Einschränkungen, um die pin backgroundView, um die Kanten des Stapels anzeigen, der mithilfe einer kleinen Erweiterung auf UIView.

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 pinBackground aus viewDidLoad

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

Verweis aus: HIER

InformationsquelleAutor der Antwort kurrodu

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

InformationsquelleAutor der Antwort Roman Solodyashkin

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

InformationsquelleAutor der Antwort zuko

-1

Könnte man es so machen:

stackView.backgroundColor = UIColor.blue

Indem Sie eine Erweiterung zu überschreiben, die 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
        }

    }

}

InformationsquelleAutor der Antwort nmdias

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.