2

I am making a Detail screen which has several nested views in the Storyboard View Controller: ScrollView > UIView > StackView > 5 UI Views. Each UI view is a different section that contains labels and edit texts.

When I set the background of one of the UIViews in the storyboard it changes but does not reflect this change when I run the emulator or on an iPad.

Below is a picture with the emulator view on the left and the Storyboard in Xcode on the right. You can see that the emulator shows no background color on the nested UIView while the Storyboard does.

Emulator vs Storyboard

Because it was asked for here is the full Storyboard. It is tough to see but it is a tab view controller connected to three split view controllers.

Full Storyboard

By testing with only specific views I have narrowed it down to the UIStackView holding the 5 UIViews that causes the problem. I have tried attaching a controller and changing the color in code but nothing I've tried seems to change it.

class ClientDetailViewController: UIViewController {

@IBOutlet weak var basicInfoUIView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    basicInfoUIView.backgroundColor = UIColor.init(displayP3Red: 22, green: 22, blue: 22, alpha: 0.5)
    }
}

I expect for each section (UIView) to be a dark gray color but instead they are all clear so the scrollview background color can be seen.

Chris
  • 43
  • 2
  • 8
  • Not sure what you're talking about - everything on Storyboard will show up. You got images? – impression7vx Jan 20 '19 at 05:39
  • I just added a picture of my emulator and storyboard so you can see the difference between what the Storyboard says will show up and what actually shows up. – Chris Jan 20 '19 at 05:46
  • Can I see more of your storyboard, not too worried about the simulator – impression7vx Jan 20 '19 at 06:06
  • Sure, I added another link with the entire Storyboard. It is hard to see what the individual components are so let me know if I can clarify anything for you. – Chris Jan 20 '19 at 15:30

3 Answers3

2

UIStackView doesn't allow changing background color:

The UIStackView is a nonrendering subclass of UIView; that is, it does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no effect on the stack view. Similarly, you cannot override layerClass, draw(:), or draw(:in:).

(from UIStackView)

A simple workaround is to add another UIView behind the stack view, setup the constraints to match the position and size of the stack view (equal top, left, right, bottom) and change background color of that view.

Sulthan
  • 128,090
  • 22
  • 218
  • 270
1

enter image description hereI think first you should give different background colors to your ui views then place them. Under a single stack and check whether it is working or not

I have added a screenshot where i first gave background colors to UIviews and then placed them under one stackView but they had those colors unlike you after giving them background color simply from the uielements under the controller on the left pick the Uiviews and place them under stack View

Nishant Pathania
  • 349
  • 1
  • 14
  • 1
    You can give suggestions as a comment instead of an answer when you are not sure if this will work or not. – Kamran Jan 20 '19 at 07:15
  • I tried that as well while troubleshooting as soon as the view is placed in a stack the colors disappear. – Chris Jan 20 '19 at 15:34
-1

Well, check your color please. 22 should not belong to [0,1]. 

basicInfoUIView.backgroundColor = UIColor.init(displayP3Red: 22.0 / 255.0, green: 22.0 / 255.0, blue: 22.0 / 255.0, alpha: 0.5)
E.Coms
  • 11,065
  • 2
  • 23
  • 35
  • Adding the colors the way you showed in your example, or even saying UIColor.black, does not show any change on the simulator or iPad. – Chris Jan 20 '19 at 15:33
  • Not adding, replacing the wrong code in view did load. – E.Coms Jan 20 '19 at 15:45
  • Sorry, I meant to say that I replaced my line with the line you gave me. I also tried replacing my line with basicInfoView.backgroundColor = UIColor.black and still saw nothing. – Chris Jan 20 '19 at 15:54
  • which is the basicInfoUIView? I assign it to the first view in the stackView – E.Coms Jan 20 '19 at 15:55
  • The first view is a UIView I placed in the ScrollView to help me constrain the stackview because without it the rest of the views would end up disappearing. In the picture I linked "Emulator vs Storyboard" you can see the basic info view colored in black on the Storyboard while having no color on the emulator. – Chris Jan 20 '19 at 16:00
  • I see. I am asking if *** @IBOutlet weak var basicInfoUIView: UIView!*** linked to one of the view in IB? – E.Coms Jan 20 '19 at 16:04
  • I understand now. Yes at the top I have the line @IBOutlet weak var basicInfoUIView: UIView! connecting the view in the Storyboard to the class. I also made sure to add the class in the Identity Inspector. – Chris Jan 20 '19 at 16:07
  • Is the basicInfoUIView the first view in the stackView? – E.Coms Jan 20 '19 at 16:15
  • Yes, it is the first view in the stackView. – Chris Jan 20 '19 at 16:20
  • then clean rebuild after you change the color. – E.Coms Jan 20 '19 at 16:22
  • That doesn't seem to help it either. From more troubleshooting it looks like once I pin the views of the stackView to the UIView the colors disappear. – Chris Jan 20 '19 at 16:32
  • How about set color in viewWillAppear or viewdidappear – E.Coms Jan 20 '19 at 16:34
  • That doesn't seem to do it either. Really anything I try to do causes a lot more errors. In the few instances that the background color does appear the views are spread randomly across the screen and nothing is the same as it looks in my Storyboard. It's extremely frustrating. – Chris Jan 20 '19 at 16:54