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

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.

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.
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.
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:
Open your .xcassets library
Add a Color Set
Give it a useful name and select the color thumbnail
In the Attributes Inspector you can then change the color and use the slider to adjust its opacity
Go back to your storyboard and select the view you need this transparent background color
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.
In code you can access the colors from your Color Assets using:
SWIFT (UIColor): UIColor(named: "DP Textfield")
SWIFTUI (Color): Color("DP Textfield")

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:

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

Eventually you already have a color so you could use .colorWithAlphaComponent like this:
let exampleColor = UIColor.blackColor()
overlayView.backgroundColor = exampleColor.colorWithAlphaComponent(0.8)

For Swift 4+ :
Black translucent view:
view.backgroundColor = UIColor.black.withAlphaComponent(0.5)

I believe you should use:
myView.alpha = myAlphaFloat;
myView.opaque = NO;

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.

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)

Related

Problems with storyboard colors in mixed objective-c/swift project

I added a new view controller to my objective-c project. The new view controller is written in Swift. Everything compiles correctly and functions correctly except that no matter what color I choose for the view's background color, it either comes out white (default) or black. If I decrease the alpha for the default background color it just gets gray. If I have anything over about 0.4 alpha for any other color the view is black.
Second problem: the code in my Swift view controller to set background color for the view appears to have no effect. Relevant code is below. I first set the view background color to white with alpha 1.0 and then change it to the color I want. None of this has any effect. Is this because it has already been set in the storyboard? If so, how can I override the storyboard settings programmatically? I am very new to Swift but have been programming objective-c for about one year and I haven't seen this kind of problem in a pure objective-c project. Xcode version is 7.3.
I would really appreciate any help.
override func viewDidLoad() {
super.viewDidLoad()
self.username.delegate = self;
self.password.delegate = self;
self.navigationItem.setHidesBackButton(true, animated:true);
view.backgroundColor = UIColor(white: 0x255/255, alpha: 1.0)
//set the background color to blue-green
view.backgroundColor = UIColor(
red: 0x00/255,
green: 0x7d/255,
blue: 0x96/255,
alpha: 1.0)
It looks like these problems are due to auto layout problems. If there are any autolayout issues (even if they are not flagged by a red arrow in the project navigator), the storyboard produces a black screen. I'm not sure why this happens with Swift: objective-C would just produce a screen with some layout problems. Once all the autolayout issues get fixed (usually by using Reset to Suggested Constraints), there isn't a black screen. Also, my code for setting the screen background color then works.This was very frustrating and I don't know why it works this way when the code underlying the view is Swift and not objective-C. But if there is the tiniest variation in the storyboard scene that has a tiny autolayout problem, I get a black screen.

How to "tint" UIVisualEffectView on iOS 8+? Or, create a blurred background view with a tint color?

Self-explanatory. UIVisualEffectView only has a light, dark, and "extra light" tint variation. Is there a way to tint with a color instead, such as the tint color of the app?
UINavigationBar sort of does this, I think, in that it has transparency and blur... but also a tint color.
Third-party libraries are OK, but I'm not sure where to look for this.
You can tint the UIVisualEffectView using this library:
https://github.com/efremidze/VisualEffectView
Set a UIView with an alpha of 0.5 or so with a background color. In front of that put a UIVisualEffectView. Remember to not set the visual effect view as a subview of the first background view.
That should do the trick.
It seems like FXBlurView is the way to go currently for tinted blurs. https://github.com/nicklockwood/FXBlurView
You could maybe put it in a UIView that had a semi-opaque background color of the opacity to your liking...

How do I get my Cocoa app to draw exactly the color specified by my designer in Sketch?

My designer has specified a color to draw. When I try to draw that color in a Cocoa app, I get a resulting color that’s visibly different from the reference image as displayed by Sketch.app.
I made a small Cocoa app that draws a custom view. Here’s the interesting part of the code. Note that I am initializing the color in SRGB space.
class View: NSView {
override func drawRect(dirtyRect: NSRect) {
let components : [CGFloat] = [156.0/255.0, 0, 254.0/255.0, 1]
let color = NSColor.init(SRGBRed: components[0], green: components[1], blue: components[2], alpha: components[3])
color.setFill()
NSRectFill(self.bounds)
}
}
Here’s what it draws. (Nevermind the part about the cursor. And I removed the window shadow so it would be easier to review this side by side with other windows.)
And here’s the Sketch file portion:
Putting it all together, here’s a side by side of the Sketch file and the custom view, as well as Xscope loupe displaying the color value under the mouse cursor.
When hovering over Sketch file, I see this:
When hovering over my custom view, I see this:
You can see that the color value of the pixel under the black mouse cursor as read by Xscope is significantly different. The colors also look significantly different on my Retina Macbook Pro display, though interestingly, not so different in the captured screenshot PNG.
HOWEVER: so far, this was all done with default display settings and color profile “Color LCD” (the hardware is Retina Macbook Pro with its built-in display). When I manually change the display profile to “sRGB IEC61966-2.1” in OSX Settings app, and then sample the colors again with Xscope, you can see these sampled values:
And when sampling the custom view:
Most interestingly, you can see that the values sampled by Xscope on my custom view exactly match the specified values, and the color is also visually correct. But of course, I can’t make my users change their display profile.
My question: how do I make my custom view color exactly match the color in Sketch (both for visual inspection and when sampled with the Xscope loupe) with the default Color LCD display profile?
Just worked through this issue myself. Here's my process. Just tested on a Retina Macbook Pro.
Open Sketch.
Open Digital Color Meter (installed on OSX)
Switch to 'Display in Generic RGB'
In menu, ensure that 'View -> Display Values -> As Decimal`
Mouse over your color of the artwork in sketch and note the values (e.g. 0, 150, 200)
Use that value in Cocoa:
-(void)drawRect:(NSRect)dirtyRect {
[[NSColor colorWithCalibratedRed:0/255.0 green:150/255.0 blue:200/255.0 alpha:1] set];
NSRectFill(self.bounds);
}
This should work, as 'Generic RGB' is a device independent space equivalent to the 'calibrated' color space in Cocoa.

iOS - Storyboard - Use a programmatically define color in the configuration palette of storyboard

I try to find a way to deal with multiple targets (deploy multiple app from one project), i don't know how to define a UIColor and use it in storyboard (i can do that well for UIImage). My idea is to switch the value of this color according of the target with macros, someone know if it's possible ?
Perhaps define a color :
var myColor : UIColor
#ifdef target1
myColor = UIColor(red: 249.0/255, green: 249.0/255, blue: 249.0/255, alpha: 1.0)
#ifdef target2
myColor = UIColor(red: 210/255, green: 100/255, blue: 90/255, alpha: 1.0)
#endif
Or duplicate storyboard to have one storyboard by target. Use the info-target1.plist, info-target2.plist ?
And call this variable "myColor" in storyboard
If there is no solution, i think that i need to set all the attributes : color, font, size, programmatically and not in storyboard.
Which method do i need to follow?
Thanks
As of Xcode 9 you can define and name color inside an Asset; just open the asset in Xcode, right-click and select "New Color Set". Once defined, colors can be selected in the storyboard color picker by name or referenced programmatically, for example:
let green = UIColor(named: "MySpecialGreen")
If there is no solution, i think that i need to set all the attributes : color, font, size, programmatically and not in storyboard.
There's no way to vary colors or other attributes in a storyboard scene based on compile-time parameters. Usually, the right way to approach something like this is to use UIAppearance to override the attributes that you want to change. In a nutshell, any class that implements the UIAppearance protocol can provide a proxy object that lets you adjust the traits that class will use. For example, if you want to adjust the navigation bar's color in your app, define myColor conditionally as you've done and then use UINavigationBar's appearance proxy to set the tint color:
[[UINavigationBar appearance] setBarTintColor:myColor];

iOS 7 BarTintColor

Have any one else noticed in iOS7, the translucent navigation bar only shows color underneath if barTintColor is set to default?
I tried setting barTintColor to various different colors, but anything that is below the navigation bar is displayed a a black blur. Whereas if the barTintColor is set to default, all the elements display correctly underneath.
Is there a way to force it to show the correct colors?
You have to use background color instead of tint color.
self.navigationController.navigationBar.backgroundColor = [UIColor yellowColor];
If you are using tint color it changes only barbutton background color change.
In MyTabBarController in the storyboard select the color tint. You will change the button active color background. No idea for the inactive one.

Resources