Comment changer la couleur de fond d'UIStackView?

J'ai essayé de changer l' UIStackViewarrière - plan de clair à blanc dans l'inspecteur Storyboard, mais lors de la simulation, la couleur d'arrière-plan de la vue de la pile a toujours une couleur claire.
Comment puis-je changer la couleur d'arrière-plan d'un UIStackView?

Vous ne pouvez pas faire cela - UIStackViewest une vue sans dessin, ce qui signifie qu'elle drawRect()n'est jamais appelée et que sa couleur d'arrière-plan est ignorée. Si vous voulez désespérément une couleur d'arrière-plan, envisagez de placer la vue de pile dans une autre UIViewet de donner à cette vue une couleur d'arrière-plan.

Référence de ICI .

ÉDITER:

Vous pouvez ajouter une sous-vue à UIStackViewcomme mentionné ICI ou dans cette réponse (ci-dessous) et lui attribuer une couleur. Découvrez ci-dessous extensionpour cela:

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

Et vous pouvez l'utiliser comme:

stackView.addBackground(color: .red)

Je fais ça comme ça:

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

Fonctionne comme un charme

UIStackViewest un élément sans rendu, et en tant que tel, il n'est pas dessiné à l'écran. Cela signifie que changer backgroundColorne fait essentiellement rien. Si vous souhaitez changer la couleur d'arrière-plan, ajoutez-y simplement un UIViewsous-vue (qui n'est pas organisé) comme ci-dessous:

extension UIStackView {

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

}

Le moyen le plus simple, le plus lisible et le moins piraté serait peut-être d'intégrer le UIStackViewdans un UIViewet de définir la couleur d'arrière-plan de la vue.

Et n'oubliez pas de configurer correctement les contraintes de mise en page automatique entre ces deux vues… ;-)

Pitiphong est correct, pour obtenir une vue de pile avec une couleur d'arrière-plan, faites quelque chose comme ce qui suit ...

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

  stackView.insertSubview(bg, at: 0)

Cela vous donnera une vue de la pile dont le contenu sera placé sur un fond rouge.

Pour ajouter un remplissage à la vue de la pile afin que le contenu ne soit pas aligné avec les bords, ajoutez ce qui suit dans le code ou sur le storyboard ...

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

TL; DR: La façon officielle de le faire est d'ajouter une vue vide dans la vue de la pile à l'aide de la addSubview:méthode et de définir à la place l'arrière-plan de la vue ajoutée.

L'explication: UIStackView est une sous-classe UIView spéciale qui ne fait que la mise en page et non le dessin. Tant de ses propriétés ne fonctionneront pas comme d'habitude. Et comme UIStackView ne mettra en page que ses sous-vues organisées, cela signifie que vous pouvez simplement lui ajouter un UIView avec addSubview:méthode, définir ses contraintes et sa couleur d'arrière-plan. C'est le moyen officiel de réaliser ce que vous voulez cité lors de la session WWDC

Cela fonctionne pour moi dans Swift 3 et 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)

Dans iOS10, la réponse de @ Arbitur nécessite un setNeedsLayout une fois la couleur définie. Voici le changement nécessaire:

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

Voici un bref aperçu de l'ajout d'une couleur d'arrière-plan de la vue Pile.

class RevealViewController: UIViewController {

    @IBOutlet private weak var rootStackView: UIStackView!

Création d'une vue d'arrière-plan avec des coins arrondis

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

Pour le faire apparaître comme arrière-plan, nous l'ajoutons au tableau de sous-vues de la vue de pile racine à l'index 0. Cela le place derrière les vues arrangées de la vue de pile.

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

Ajoutez des contraintes pour épingler le backgroundView aux bords de la vue de pile, en utilisant une petite extension sur 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)
      ])
  }
}

appeler le pinBackgrounddeviewDidLoad

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

Référence de: ICI

Xamarin, version C #:

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

Vous pourriez faire une petite extension de 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)
            ])
    }
}

Usage:

yourStackView.setBackgroundColor(.black)

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

Sous-classe 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
}
}

Puis dans ta classe

yourStackView.backgroundColor = UIColor.lightGray

Vous pouvez insérer une sous-couche dans StackView, cela fonctionne pour moi:

@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

Je suis un peu sceptique quant au sous-classement des composants de l'interface utilisateur. C'est comme ça que je l'utilise,

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

Et c'est l'usage,

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

Remarque: Avec cette approche, si vous souhaitez définir une bordure, vous devez la définir layoutMarginssur stackView afin que la bordure soit visible.

Vous ne pouvez pas ajouter d'arrière-plan à stackview. Mais ce que vous pouvez faire, c'est ajouter stackview dans une vue, puis définir l'arrière-plan de la vue, cela fera le travail. * Cela n'interrompra pas les flux de stackview. J'espère que cela aidera.

Nous pouvons avoir une classe personnalisée StackViewcomme celle-ci:

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

Et il peut être utilisé comme ceci:

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

C'est légèrement mieux que d'ajouter une fonction d'extension func addBackground(color: UIColor)comme suggéré par d'autres. La vue d'arrière-plan est paresseuse de sorte qu'elle ne sera pas créée tant que vous n'appelerez pas stackView.backgroundView.backgroundColor = .... Et la définition / modification de la couleur d'arrière-plan plusieurs fois n'entraînera pas l'insertion de plusieurs sous-vues dans la vue de la pile.

Si vous souhaitez contrôler à partir du concepteur lui-même, ajoutez cette extension à la vue de la pile

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

Vous pouvez le faire comme ceci:

stackView.backgroundColor = UIColor.blue

En fournissant une extension pour remplacer 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
        }

    }

}

Essayez BoxView . Il est similaire à UIStackView, mais il est rendu et prend en charge plus d'options de mise en page.