How can I implement rounded corners applied to the whole view as seen on screenshot (note that both navigation bar and keyboard corners are rounded)?
I've tried setting cornerRadius = 10 and masksToBounds = YES for both window.layer and window.rootViewController.view.layer, but only the bottom view corners are getting rounded, the navigation bar still stays square.
Update.
Setting cornerRadius to a window.layer actually adds rounded corners to the top too, but those corners are not visible under the status bar unless cornerRadius is greater then 20.
Ok, I've asked Andrew Stone, a developer of Twittelator Neue, on Twitter, and here's his recipe, published with Andrew's permission:
We're going to write a book on coding tricks in Neue! We overlay a window w an image containing 4 corners over everything
We also have a custom nav bar with a stretchable image w/ tops rounded
So here's how I did it in my own project:
UIImage *overlayImg = [UIImage imageNamed:#"overlay.png"];
CALayer *overlay = [CALayer layer];
overlay.frame = CGRectMake(0, 0, overlayImg.size.width, overlayImg.size.height);
overlay.contents = (id)overlayImg.CGImage;
overlay.zPosition = 1;
[self.window.layer addSublayer:overlay];
overlay.png is a transparent fullscreen image with black corners.
They're probably using a background image on the navigation bar that includes the rounded corners.
iHunter's answer works great for me except when I try to use the TWTweetComposeViewController, that shows the keyboard but not the tweet view. Then I should to make the overlay as a property in the AppDelegate.h and before tweetView, remove the overlay. At tweet done, turn add overlay again.
AppDelegate *delegate = [[UIApplication sharedApplication] delegate];
[delegate.overlay removeFromSuperlayer];
TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];
tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result) {
AppDelegate *delegate = [[UIApplication sharedApplication] delegate];
[delegate.window.layer addSublayer:delegate.overlay];
};
[self presentModalViewController:tweetSheet animated:YES];
I doubt that the window has rounded corners because I don't believe the status bar has a height greater than 20 units. I suspect that the window is simply set with a black background (or whatever color is needed to match the status bar, and then another view is place on top. That view on top has the rounded corners. similarly, any other subviews will have rounded corners to help with this illusion.
Related
Basic issue:
I believe the trick is with masking, but I am not able to get a good hold of how this is set.
Basically I have a bright image (set to a uiimageview object), and I have a label at very bottom (which is added on top of the image view) needs a well readable white text on it. Right now, the white text is hard to read (because of the bright background).
What I am doing:
I am setting a mask for the image view with something like
http://cl.ly/image/0i0N1p271d42
maskContainer = [CALayer layer];
UIImage *maskImg = [UIImage imageNamed:#"mask_profile"];
[maskContainer setContents:(id)[maskImg CGImage]];
CGRect frma = maskContainer.frame;
frma.size.width = self.frame.size.width;
frma.size.height = self.frame.size.height;
maskContainer.frame = frma;
[self.imageView.layer setMask:maskContainer];
Its messed up. The overall image starts fading on top.
Can anyone share their insight on the right way to mask?
You could set a drop shadow on your text to make is stand out even over a white background:
myLabel.layer.shadowOpacity = 0.8f;
myLabel.layer.shadowOffset = CGSizeMake(0, 0);
Easiest option is to adjust the alpha on the UILabel to the desired darkness in order to make the text stand out. If you do not want to hide the image and the image itself serves as a dark background, then set the alpha on the label to 0.
The best way to do this is to place the label in a uiview then create a gradient to apply as the background to the uiview. You can create the gradient as either an image with transparency or you can draw it in code. This will create a darkening effect on you bright image just behind the label so the text will pop.
Usually i use UIToolBar to fake the live blur effect, it has been working great for me. But there is a place I need to have a rounded corner toolbar, however, whenever I set the cornerRadius and clipsToBounds, the translucent (blur) effect is gone, my tool bar becomes transparent.
here is my code:
UIToolbar *blurView = [[UIToolbar alloc] initWithFrame:self.bounds];
blurView.barStyle = UIBarStyleBlack;
blurView.layer.cornerRadius = self.height / 2;
blurView.clipsToBounds = YES;
[self insertSubview:blurView atIndex:0];
here is a screen shot when clipsToBounds = YES, the corner is rounded, but the blur is gone.
But if i comment clipsToBounds out, the blur effect is back, but the corner is not rounded anymore.
The even stranger part is this issue only happens in iOS7.x, everything works perfectly in iOS8.x with the exactly same codes.
just in case if you wondering, here is how it looks on iOS8.x and how it should look on iOS7.x
I have been searching around on Stackoverflow and Google, can't find any clue. Please Help!
Try blurView.layer.cornerRadius = self.height / 2 - 0.5;
I want to show an image of glass getting filled with water in iPhone using iOS 8. I can get a white background image of glass (that shows empty glass) and water color could be light grey, for example.
Is there an option to fill background color of glass (in intervals)
so that it looks as if the glass is really getting filled with water?
Can I draw complete image (glass already filled with water) part by
part from bottom to top to show similar effect?
Any options to display/animate such an image?
With UIImageView you can do like that, create an images for each frame:
images = #[[UIImage imageNamed:#"img1.png"],
[UIImage imageNamed:#"img2.png"],
[UIImage imageNamed:#"img3.png"]];
[imageView setAnimationImages:testArray] ;
imageView.animationDuration = 0.5;
imageView.animationRepeatCount = 1;
[imageView startAnimating];
Another way is to have UIView's/UIImageView's composition, e.g. UIImageView in front, use it as mask, another one in a back, and just use simple UIView animation.
But anyway, such a animation can be done in many ways, depends on your needs and how nice this animation should be.
I would like to animate barTintColor property when transitioning from one view controller to another.
I have tried with following solution:
[[self transitionCoordinator] animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
self.navigationController.navigationBar.translucent = NO;
self.navigationController.navigationBar.barTintColor = [UIColor redColor];
} completion:nil];
which animates barTintColor as it should but my navigation bar should be translucent. To fix this problem I tried to set it to translucent = YES in completion block of trasitionCoordinatoranimation. Like this:
completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
self.navigationController.navigationBar.translucent = YES;
}
but that causes slight jump in barTintColor value of navigation bar after the animation is completed. This is expected since translucent and opaque colors are different.
Similar questions:
[1]
[2]
Thanks in advance!
EDIT:
I forgot to add that some strange scale animation appears from top left corner in navigation bar if I remove the self.navigationController.navigationBar.translucent = NO; line from animation block. So that's not the solution either.
I'm going to answer my own question while still being open for other suggestions/solutions.
My solution which I think is quite a "clean one" is to make an alpha blended color from original color with appropriate blend color. So let's say we have a white background behind a navigation bar and we would like to animate current navigation bar barTintColor to green color. In this case we have to blend original green color with white color and appropriate alpha value.
After some playing with values I found out that alpha 0.16 works best for iOS 7 cases (I haven't tested it on other OS versions).
Animation block written in my original question implemented with my solution looks like this:
Pay attention to ALPHA BLENDED ORIGINAL COLOR and ORIGINAL COLOR
[[self transitionCoordinator] animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
self.navigationController.navigationBar.translucent = NO;
self.navigationController.navigationBar.barTintColor = <ALPHA BLENDED ORIGINAL COLOR>;
} completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
self.navigationController.navigationBar.barTintColor = <ORIGINAL COLOR>;
self.navigationController.navigationBar.translucent = YES;
}];
Equation for alpha blending:
CGFloat bR = ((bcR - cR) * alpha + cR);
CGFloat bG = ((bcG - cG) * alpha + cG);
CGFloat bB = ((bcB - cB) * alpha + cB);
values being:
cR, cG, cB = original color R,G,B components
bcR, bcG, bcB = blending color R,G,B components
alpha = alpha value to blend with
================================================
bR, bG, bB = blended R,G,B components
Anyone who likes this solution is welcome to use a UIColor's category for alpha blending I wrote for this case. You can find it here.
Thanks.
I have successfully added a background image to my UINavigationBar with the following code:
UIImageView *barView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"subHeader_lg.png"]];
[calculatorBar addSubview:barView];
[barView release];
However, with this method, the title of the view is covered by the image.
If I navigate further into the app, and then back, the title appears on top of the background image like so:
Any ideas how I can get the title to appear on top from the beginning?
I have tried pushing the barView to the back, but that makes it hidden behind everything else.
EDIT:
It seems that the custom draw function is the accepted answer, but I am unable to get the draw function to be called. I have this code at the bottom of my appdelegate.m file
#implementation UINavigationBar (UINavigationBarCustomDraw)
- (void)drawRect:(CGRect)rect
{
UIImage *image = [UIImage imageNamed: #"subHeader_lg.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end
When you call "addSubview" it adds it above any view that have already been added, thus covering the title.
What you want is
[calculatorBar insertSubview:barView atIndex:0];
However, this won't make it "stick" on subsequent pushes, so use the methods described at http://www.developers-life.com/custom-uinavigationbar-with-image-and-back-button.html for a better solution.
Also in iOS 5, Apple has added a built in way to customize the nav bar see http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html#//apple_ref/doc/uid/TP40010906
To set the background image on your navigation bar, use the following.
On iOS 5.x, use
[calculatorBar setBackgroundImage: barView.image forBarMetrics: 0];
On iOS 4.x use
calculatorBar.layer.contents = (id)barView.image.CGImage;