Setting background color for customView has no effect

Question

I have a customView which I display by after a button-tap. My problem is that setting .backgroundColor has no effect and it is just a clear background.

CustomView:

let wishWishView: WishStackView = {
    let v = WishStackView()
    v.backgroundColor = .cyan
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

AddViewButton:

@objc func addWishButtonTapped(){

    self.view.addSubview(self.wishWishView)
    wishWishView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    wishWishView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true

}

WishWishView is just a simple UIView with a StackView inside of it.

That's what I am doing atm. `WishStackView` is a `UIView`, the name might be confusing but like I said in the question, it's a `StackView` within a `UIView` — Chris, Apr 03 '20 at 12:36
thanks, that was actually another problem I wasn't even aware of. — Chris, Apr 03 '20 at 12:49

score 2 · Accepted Answer · answered Apr 02 '20 at 21:13

2

My guess would be that it is a UIStackView, which does not support having a background color.

You can read more about why this happens, and possible workarounds here: https://stackoverflow.com/a/34868367/3992237

answered Apr 02 '20 at 21:13

Simon Moshenko

2,028
1
15
36

Fabio · Answer 2 · 2020-04-03T07:41:06.107

Your code is Totally wrong, first you set your view like this:

let wishWishView: UIView = {
    let v = UIView()
    v.backgroundColor = .cyan
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

now set your stackView, in my example I put in 2 label in vertical axis:

let stackView: UIStackView = {
    let label1 = UILabel()
    label1.text = "Label 1"
    label1.textColor = .red
    label1.font = UIFont.systemFont(ofSize: 16)

    let label2 = UILabel()
    label2.text = "Label 2"
    label2.textColor = .black
    label2.font = UIFont.systemFont(ofSize: 16)

    let sV = UIStackView(arrangedSubviews: [label1, label2])
    sV.axis = .vertical
    sV.distribution = .fillEqually
    sV.translatesAutoresizingMaskIntoConstraints = false

    return sV
}()

after that set your button:

let buttonAddView: UIButton = {
    let button = UIButton(type: .system)
    button.setTitle("Add View", for: .normal)
    button.setTitleColor(.white, for: .normal)
    button.backgroundColor = .red
    button.addTarget(self, action: #selector(addWishButtonTapped), for: .touchUpInside)
    button.translatesAutoresizingMaskIntoConstraints = false
    return button
}()

in viewDidLoad add button and set constraints

view.addSubview(buttonAddView)
    buttonAddView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
    buttonAddView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
    buttonAddView.heightAnchor.constraint(equalToConstant: 50).isActive = true
    buttonAddView.widthAnchor.constraint(equalToConstant: 120).isActive = true

now write the function that add the view with stack view inside when the button is tapped with right constraints, in your function you call only the position of the view but not the size of it. Write your function like this:

@objc func addWishButtonTapped(){

    view.addSubview(self.wishWishView)
    wishWishView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    wishWishView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    wishWishView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    wishWishView.widthAnchor.constraint(equalToConstant: 200).isActive = true

    wishWishView.addSubview(stackView)
    stackView.topAnchor.constraint(equalTo: wishWishView.topAnchor).isActive = true
    stackView.bottomAnchor.constraint(equalTo: wishWishView.bottomAnchor).isActive = true
    stackView.leadingAnchor.constraint(equalTo: wishWishView.leadingAnchor, constant: 10).isActive = true
    stackView.trailingAnchor.constraint(equalTo: wishWishView.trailingAnchor, constant: -10).isActive = true

}

Now simply change background of the wishWishView to automatically set stackView background, and that's it...

thanks for the answer but what exactly are you trying to tell :D I have pretty much the exact same code. I just didn't post the code for my `WishStackView` and how I set it up because it is quite obvious. — Chris, Apr 03 '20 at 12:38
youre right. Thanks, I couldve added the other `view-setup` . I solved the problem with the help @Simon and @Nexus — Chris, Apr 03 '20 at 13:51

Setting background color for customView has no effect

2 Answers2