Swift UIView background color opacity

81
votes

I have a UIView with a UILabel in it. I want the UIView to have white background color, but with an opacity of 50%. The problem whith setting view.alpha = 0.5 is that the label will have an opacity of 50% as well, so I figured out that it maybe would be possible to have a UIView with white background color and opacity (white_view), and then have another UIView with the label (label_view). Then add the "white_view" to "label_view" by doing this: label_view.addSubview(white_view). This apparently doesn't work. I'd like to do like: label_view.backgroundView(white_view) but you can't set a background view on a UIView like you can do in a UICollectionView for instance.

Does anyone have any clue of how to solve this?

EDIT Because several answers are approx the same I'll type it here. Now I've tried even these:

label_view1.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.5)
label_view1.addSubview(firstPlacelbl)
endGameView.addSubview(label_view1)

and

label_view1.backgroundColor = UIColor(white: 1, alpha: 0.5)
label_view1.addSubview(firstPlacelbl)
endGameView.addSubview(label_view1)

And still the label is also affected by the alpha, and it gets an opacity of 50%. I don't get it what I do wrong because I only set the colors alpha to 0.5 and not the labels. Any ideas?

7
iosswiftuiviewalpha
If I understand that question correctly, you would like to have a half-transparent UIView and a non-transparent white-background for the UILabel on it. Afaik, UILabels have a completely transparent background by default, so you would have to set its background color to white if you want it to have a background color at all. Thus you do not need a view in between. Also, you can set everything in the Storyboard appropriately, if you use it. – Nero
I want to have a half-transparent UIView with white background color, and the label on the top of it (in a new view if it doesn't work in the same). So it's like a half transparent box with a label that is 100% visible. I think @Vitaliy's answer below should work! – user2099024

7 Answers

181
votes

You can set background color of view to the UIColor with alpha, and not affect view.alpha:

view.backgroundColor = UIColor(white: 1, alpha: 0.5)

or

view.backgroundColor = UIColor.red.withAlphaComponent(0.5)

71
votes

Setting alpha property of a view affects its subviews. If you want just transparent background set view's backgroundColor proprty to a color that has alpha component smaller than 1. 

view.backgroundColor = UIColor.white.withAlphaComponent(0.5)
36
votes

For Swift 4.x and above

yourView.backgroundColor = UIColor.black.withAlphaComponent(0.5)

This works for me.

It may help you. Happy coding :)

13
votes

You can also set it from InterfaceBuilder by changing color's opacity:

enter image description here

1
votes

The problem you have found is that view is different from your UIView. 'view' refers to the entire view. For example your home screen is a view.

You need to clearly separate the entire 'view' your 'UIView' and your 'UILabel'

You can accomplish this by going to your storyboard, clicking on the item, Identity Inspector, and changing the Restoration ID.

Now to access each item in your code using the restoration ID

0
votes

The question is old, but it seems that there are people who have the same concerns.

What do you think of the opinion that 'the alpha property of UIColor and the opacity property of Interface Builder are applied differently in code'?

The two views created in Interface Builder were initially different colors, but had to be the same color when the conditions changed. So, I had to set the background color of one view in code, and set a different value to make the background color of both views the same.

As an actual example, the background color of Interface Builder was 0x121212 and the Opacity value was 80%(in Amani Elsaed's image :: Red: 18, Green: 18, Blue: 18, Hex Color #: [121212], Opacity: 80), In the code, I set the other view a background color of 0x121212 with an alpha value of 0.8.

self.myFuncView.backgroundColor = UIColor(red: 18, green: 18, blue: 18, alpha: 0.8)

extension is

extension UIColor {
    convenience init(red: Int, green: Int, blue: Int, alpha: CGFloat = 1.0) {
        self.init(red: CGFloat(red) / 255.0,
                  green: CGFloat(green) / 255.0,
                  blue: CGFloat(blue) / 255.0,
                  alpha: alpha)
    }
}

However, the actual view was

  • 'View with background color specified in Interface Builder': R 0.09 G 0.09 B 0.09 alpha 0.8.
  • 'View with background color by code': R 0.07 G 0.07 B 0.07 alpha 0.8

Calculating it,

  • 0x12 = 18(decimal)
  • 18/255 = 0.07058...
  • 255 * 0.09 = 22.95
  • 23(decimal) = 0x17

So, I was able to match the colors similarly by setting the UIColor values ​​to 17, 17, 17 and alpha 0.8.

self.myFuncView.backgroundColor = UIColor(red: 17, green: 17, blue: 17, alpha: 0.8)

Or can anyone tell me what I'm missing?

0
votes

It's Simple in Swift . just put this color in your background view color and it will work .

let dimAlphaRedColor =  UIColor.redColor().colorWithAlphaComponent(0.7)
yourView.backGroundColor =  dimAlphaRedColor