CODEWITHSUNDEEP
iosswiftuiviewalpha
user2099024
user2099024

Reputation: 1462

Swift UIView background color opacity

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?

Upvotes: 102

Views: 247533

Answers (7)

Ashu
Ashu

Reputation: 3521

For Swift 4.x and above

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

Upvotes: 42

Vitalii Gozhenko
Vitalii Gozhenko

Reputation: 9354

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)

Upvotes: 227

Abhimanyu Daspan
Abhimanyu Daspan

Reputation: 1125

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

Upvotes: 0

Walue
Walue

Reputation: 371

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?

Upvotes: 0

mustafa
mustafa

Reputation: 15464

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)

Upvotes: 76

Amani Elsaed
Amani Elsaed

Reputation: 1598

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

enter image description here

Upvotes: 14

Marcus
Marcus

Reputation: 9492

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

Upvotes: 1

Related Questions