CODEWITHSUNDEEP
xcodeuiview
ChrisP
ChrisP

Reputation: 10116

How do you create a semi-transparent background for a UIView?

I am creating a UIView containing some text that partially covers a UIImageView. I want the user to be able to read the text and still maintain a perspective on the image underneath. I have tried setting the background color to [UIColor clearColor], but then the background is totally transparent and it is hard to read the text depending upon the image colors.

If I lower the view.alpha=0.5 the whole view including the text is partially transparent. What I'd like is to maintain the text and reduce the transparency of the background partially, allowing the image to show through.

Upvotes: 15

Views: 69688

Answers (8)

Bocaxica
Bocaxica

Reputation: 4690

OPTION 1 - USING STORYBOARDS

For those who have their view in a storyboard or .xib, you simply do it in interface builder by selecting the option "Clear Color" for the Background of the view in the Utilities Pane (the pane on the right). "Clear Color" will give the view a completely transparent background.

See screenshot

If you need a background color that is partially transparent, select the desired background color with the color picker and use the Opacity slider at the bottom to set the transparency.

opacity slider to arrange transparency of the background colour of your view

OPTION 2 - USING COLOR ASSETS (AND STORYBOARDS)

Another very useful option is to add colors to your .xcassets library, so that you can use the same color easily in different views. You can make these colors (semi-)transparent as well, here's how:

  1. Open your .xcassets library
  2. Add a Color Set

Add a Color Set to your xcassets library

  1. Give it a useful name and select the color thumbnail

Give it a useful name and select the color thumbnail you'd like to adjust/create

  1. In the Attributes Inspector you can then change the color and use the slider to adjust its opacity

Create the color and use the Opacity slider to adjust it's transparency

  1. Go back to your storyboard and select the view you need this transparent background color
  2. In the Background option of in the Attributes Inspector you can now select the Color you added to your .xcassets library. This is very useful if you have multiple views across your app using the same background.

You can now select the color you just created in your storyboard

In code you can access the colors from your Color Assets using:

SWIFT (UIColor): UIColor(named: "DP Textfield")

SWIFTUI (Color): Color("DP Textfield")

Upvotes: 39

Amit
Amit

Reputation: 4896

For Swift 4+ :

Black translucent view:

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

Upvotes: 1

Andrew
Andrew

Reputation: 38029

Swift 3+

white half transparent:

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

or black half transparent:

        view.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)

Upvotes: 0

ToolmakerSteve
ToolmakerSteve

Reputation: 21482

For Xamarin C#, at this time, the visual storyboard does not have the "opacity" slider of Xcode's storyboard mentioned by Bocaxica.

If you set BackgroundColor for View nameOfView in storyboard, then in your view controller's ViewDidLoad, add this line to set alpha:

nameOfView.BackgroundColor = nameOfView.BackgroundColor.ColorWithAlpha( 0.7f );  // A value between 0 and 1.

Upvotes: 0

Walter White
Walter White

Reputation: 325

Eventually you already have a color so you could use .colorWithAlphaComponent like this:

let exampleColor = UIColor.blackColor()
overlayView.backgroundColor = exampleColor.colorWithAlphaComponent(0.8)

Upvotes: 5

Devangi Desai
Devangi Desai

Reputation: 1383

This will work.

myView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7f];

Upvotes: 7

Dmitry Komin
Dmitry Komin

Reputation: 559

I believe you should use:

myView.alpha = myAlphaFloat;
myView.opaque = NO;

Upvotes: 0

Jesse Naugher
Jesse Naugher

Reputation: 9820

I think what you mean is you want the backgroundColor of your UIView to be semi transparent? If you want white/transparent use this:

myView.backgroundColor = [UIColor colorWithWhite:myWhiteFloat alpha:myAlphaFloat];

else if you want it to be another color use the general UIColor method: +colorWithRed:green:blue:alpha:

Upvotes: 31

Related Questions