how to dim background view - ios7

trying to dim background view when I work with custom modal view controller I set background color to grey color with 0.5 opacity:
- (void)rulesTapped:(id)sender
{
RulesVC *rulesVC = [[RulesVC alloc] init];
self.view.backgroundColor = [UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:0.5];
rulesVC.modalPresentationStyle = UIModalPresentationCustom;
rulesVC.transitioningDelegate = self;
[self presentViewController:rulesVC animated:YES completion:nil];
}
but when I then try to set it back to whiteColor (or yellow) while dismissing the modal VC, this dimming keeps in place:
- (void) gotItTapped:(id)sender
{
[self.presentingViewController.view setBackgroundColor:[UIColor yellowColor]];
[self dismissViewControllerAnimated:YES completion:nil];
}
Why? And is there way to dim background (and then remove dimming) view without adding another overlaying view but just operating with existing view?

I don't think you can achieve it without adding another element to your UIViewController. I normally insert an UIView which is setHidden:YES and alpha 0.0f and blackColor as backgroundColor. When showing something, I always set it Hidden:NO and animate it to opacity 0.6f.
[UIView animateWithDuration:0.5f animations:^{
[self.view setAlpha:0.6];
}];
This way it appears not immediately and looks much smoother.

I actually needed this to be able to put some other UIView in dim view, and that every click outside this dimview, would dismiss both built-in UIView and dimView. What I've discovered, is that for this the best is to imitate a button which is removed from superview upon click:
self.dimView = [UIButton buttonWithType:UIButtonTypeCustom];
self.dimView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2f];
self.dimView.frame = CGRectMake(0,
0,
self.view.frame.size.width,
self.view.frame.size.height);
[self.dimView addTarget:self
action:#selector(removeDimView)
forControlEvents:UIControlEventTouchUpInside];

Related

UIInputView background is invisible while keyboard is animating

I have a text field which has a UIInputView input accessory view.
When I tap my text field, and the keyboard comes flying into view and I can see the accessory view's subviews, but it has no visible background.
Once the keyboard animation is complete, the UIInputView's background pops into view.
What can I do to force the UIInputView's background to be visible while the keyboard animation is still going?
Here's my code:
UIInputView *inputView = [[UIInputView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, CGRectGetWidth(self.bounds), 44.0f) inputViewStyle:UIInputViewStyleKeyboard];
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectInset(inputView.bounds, 15.0f, 2.0f);
[button setTitle:#"Button" forState:UIControlStateNormal];
[inputView addSubview:button];
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0.0f, 0.0f, CGRectGetWidth(self.bounds), 44.0f)];
textField.inputAccessoryView = inputView;
[self addSubview:textField];
Not a complete solution, but this impact can be minimized if you set background of your UIInputView manually inside -viewDidLoad: method. Fortunately, no need to remove it after. Right after appearing UIInputView will have a truly keyboard background and a blur effect as well.
UIColor *tmpBackground; //Keyboard have color base on the current device.
if ([UIDevice isPad] || (UIDevice isPod)]) { //These are my helpers, you have to implement it
tmpBackground = [UIColor colorWithRed:207/255.0f green:210/255.0f blue:214/255.0f alpha:1];
} else {
tmpBackground = [UIColor colorWithRed:216/255.0f green:219/255.0f blue:223/255.0f alpha:1];
}
[textField.inputAccessoryView setBackgroundColor:tmpBackground];
P.S. And I know, it is not a perfect solution to define colors in such a stupid way.

How to add dimmed background to a custom UIPopoverBackgroundView

I am making custom popover by subclassing UIPopoverBackgroundView (using this tutorial) and presenting it by using UIPopoverController. Unfortunately as soon as I specify custom popoverBackgroundViewClass the native dimmed background disappears. Is there any way to leave the dimmed background when using custom UIPopoverBackgroundView? Any other solution that I can use to simulate native behaviour?
Not sure why this got down voted, it's a good question because when you implement a custom UIPopoverBackgroundView, the dimmed background doesn't get set. In researching this problem, I determined the best approach is to set it myself!
Just before creating the popover view, I create a "mask view" that will be added to the view before the popover. This code includes a nice fade in effect as well:
self.customPopoverMaskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
self.customPopoverMaskView.backgroundColor = [UIColor blackColor];
self.customPopoverMaskView.alpha = 0.3f;
[UIView transitionWithView:self.view
duration:0.3
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^ {
[self.view addSubview:self.customPopoverMaskView];
}
completion:nil];
And to remove the view, plug this into the method(s) that handle the popover view disappearing:
[UIView transitionWithView:self.view
duration:0.3
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^ {
[self.customPopoverMaskView removeFromSuperview];
}
completion:nil];
Works well for me. Happy coding!
Aaron
All you need is add next code into initWithFrame: method of your implementation of UIPopoverBackgroundView.
UIView *dimView = [[UIView alloc] initWithFrame:CGRectMake(0 - self.frame.origin.x,
0 - self.frame.origin.y,
[UIScreen mainScreen].bounds.size.width,
[UIScreen mainScreen].bounds.size.height)];
dimView.backgroundColor = [UIColor blackColor];
dimView.alpha = 0.15;
dimView.userInteractionEnabled = NO;
[self addSubview:dimView];
It works as same as default Apple implementation.

Pop up tutorial page like Photosynth's

I want to create something that is basically a clone of what photosynth does for their tutorial page. A small "?" button pops up what looks like a new view in a frame that is slightly smaller than the first view, so that you can still see the first view around the edges.
It's a little tough to see from the pic above, but the part around the edges is the old view that the tutorial display popped up over.
My first guess is that I need to use a container view somehow, but I can't find anything on the web about exactly how to do this. I can currently create a container view, hook it up to a new view controller via a segue, and do whatever I want in that new view controller, but the container view is always visible on the view it is contained within. Any help?
BTW, I'm using storyboarding with ARC.
You can add a transparent view to the key window, add a tap gesture recognizer that would dismiss it and the subviews to show the content:
#define OVERLAY_TAG 997
-(void)showTutorial
{
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
UIView *overlay = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
overlay.backgroundColor = [UIColor clearColor];
overlay.userInteractionEnabled = YES;
[keyWindow addSubview:overlay];
UITapGestureRecognizer * tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(dismissTutorial)];
CGFloat border = 10;
CGRect frame = overlay.bounds;
// 20 is the status bar height (sorry for using the number)
frame = CGRectMake(border, border + 20, frame.size.width - border * 2, frame.size.height - border * 2 - 20);
// the black view in the example is probably a scroll view
UIView *blackView = [[UIView alloc] initWithFrame:frame];
blackView.backgroundColor = [UIColor blackColor];
blackView.alpha = 0.0;
[overlay addSubview:dimView];
// add all the subviews for your tutorial
// make it appear with an animation
[UIView animateWithDuration:0.3
animations:^{dimView.alpha = 1;}
completion:^(BOOL finished){[overlay addGestureRecognizer:tapRecognizer];}];
}
-(void)dismissTutorial
{
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
UIView *overlay = [keyWindow viewWithTag:OVERLAY_TAG];
[UIView animateWithDuration:0.3
animations:^{
overlay.alpha = 0.0;
}
completion:^(BOOL finished){
[overlay removeFromSuperview];
}];
}
This way you would remove the tutorial with a simple tap but you can use a button for instance.

Present formsheet modal ViewController using horizontal flip

I currently show a modal UIViewController in the formSheet style that was presented with the coverVertical animation. I am trying to present another modal UIViewController from it, using currentContext for the presentation style and flipHorizontal for the animation style. It does work, but there is a solid white white background behind the flip as it occurs. Any advice on how to successfully present another formsheet modal UIViewController using the flipHorizontal style from a pre-existing modal UIViewController in the formSheet style would be appreciated please! Thanks
Code:
// Loading of first modalVC
- (void)showModalVC {
Modal1VC *modal1VC = [[Modal1VC alloc] init];
modal1VC.modalPresentationStyle = UIModalPresentationFormSheet;
modal1VC.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
[self presentModalViewController:modal1VC animated:YES];
[modal1VC release];
modal1VC.view.superview.bounds = CGRectMake(0, 0, 400, 400);
}
// Loading of second modalVC in Modal1VC
- (void)buttonTapped:(id)sender {
UIViewController *modal2VC = [[UIViewController alloc] init];
modal2VC.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
modal2VC.modalPresentationStyle = UIModalPresentationCurrentContext;
modal2VC.view.backgroundColor = [UIColor greenColor];
[self presentModalViewController:modal2VC animated:YES];
[modal2VC release];
modal2VC.view.superview.bounds = CGRectMake(0, 0, 400, 400);
}
UIViewController *presentingViewController = //allocate your VC
[modalViewController setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
UIViewController *modalViewController = //your modal VC
[presentingViewController presentModalViewController:modalViewController animated:YES];
This is all the code you need ;)
It sounds like your transition is working, but the white background shown on the flip transition is the problem?
During the flip transition, the white background that is shown is actually the window. You can change the color that is shown by setting the backgroundColor property of window in the AppDelegate.
That would seem to be a limitation of presentModalViewController:animated:.
Instead of [self presentModalViewController:modal2VC animated:YES], you may be able to get the effect you want using UIView animations. Perhaps something like this:
[UIView transitionWithView:self.view.window
duration:0.3
options:UIViewAnimationOptionTransitionFlipFromRight
animations:^{
[self presentModalViewController:modal2VC animated:NO];
} completion:NULL];

Is it possible to change a UIButtons background color?

This one has me stumped.
Is it possible at all to change the background color of a UIButton in Cocoa for iPhone.
I've tried setting the background color but it only changes the corners. setBackgroundColor: seems to be the only method available for such things.
[random setBackgroundColor:[UIColor blueColor]];
[random.titleLabel setBackgroundColor:[UIColor blueColor]];
This can be done programmatically by making a replica:
loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
[loginButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
loginButton.backgroundColor = [UIColor whiteColor];
loginButton.layer.borderColor = [UIColor blackColor].CGColor;
loginButton.layer.borderWidth = 0.5f;
loginButton.layer.cornerRadius = 10.0f;
edit: of course, you'd have to #import <QuartzCore/QuartzCore.h>
edit: to all new readers, you should also consider a few options added as "another possibility". for you consideration.
As this is an old answer, I strongly recommend reading comments for troubleshooting
I have a different approach,
[btFind setTitle:NSLocalizedString(#"Find", #"") forState:UIControlStateNormal];
[btFind setBackgroundImage:[CommonUIUtility imageFromColor:[UIColor cyanColor]]
forState:UIControlStateNormal];
btFind.layer.cornerRadius = 8.0;
btFind.layer.masksToBounds = YES;
btFind.layer.borderColor = [UIColor lightGrayColor].CGColor;
btFind.layer.borderWidth = 1;
From CommonUIUtility,
+ (UIImage *) imageFromColor:(UIColor *)color {
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
// [[UIColor colorWithRed:222./255 green:227./255 blue: 229./255 alpha:1] CGColor]) ;
CGContextFillRect(context, rect);
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
Don't forget to #import <QuartzCore/QuartzCore.h>
I assume you're talking about a UIButton with UIButtonTypeRoundedRect?
You can't change the background color of that. When you try changing it's background color you're rather changing the color of the rect the button is drawn on (which is usually clear).
So there are two ways to go. Either you subclass UIButton and overwrite its -drawRect: method or you create images for the different button states (which is perfectly fine to do).
If you set the background images in Interface Builder you should notice that IB doesn't support setting images for all the states the button can have, so I recommend setting the images in code like this:
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setBackgroundImage:[UIImage imageNamed:#"normal.png"] forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:#"disabled.png"] forState:UIControlStateDisabled];
[myButton setBackgroundImage:[UIImage imageNamed:#"selected.png"] forState:UIControlStateSelected];
[myButton setBackgroundImage:[UIImage imageNamed:#"higligted.png"] forState:UIControlStateHighlighted];
[myButton setBackgroundImage:[UIImage imageNamed:#"highlighted+selected.png"] forState:(UIControlStateHighlighted | UIControlStateSelected)];
The last line shows how to set an image for the selected & highlighted state (that's the one IB can't set).
You don't need the selected images (line 4 & 6) if you're button dosn't need a selected state.
Another possibility:
Create a UIButton in Interface builder.
Give it a type 'Custom'
Now, in IB it is possible to change the background color
However, the button is square, and that is not what we want. Create an IBOutlet with a reference to this button and add the following to the viewDidLoad method:
[buttonOutlet.layer setCornerRadius:7.0f];
[buttonOutlet.layer setClipToBounds:YES];
Don't forget to import QuartzCore.h
Subclass UIButton and override setHighlighted and setSelected methods
-(void) setHighlighted:(BOOL)highlighted {
if(highlighted) {
self.backgroundColor = [self.mainColor darkerShade];
} else {
self.backgroundColor = self.mainColor;
}
[super setHighlighted:highlighted];
}
-(void) setSelected:(BOOL)selected {
if(selected) {
self.backgroundColor = [self.mainColor darkerShade];
} else {
self.backgroundColor = self.mainColor;
}
[super setSelected:selected];
}
My darkerShade method is in a UIColor category like this
-(UIColor*) darkerShade {
float red, green, blue, alpha;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
double multiplier = 0.8f;
return [UIColor colorWithRed:red * multiplier green:green * multiplier blue:blue*multiplier alpha:alpha];
}
If you are not wanting to use images, and want it to look exactly like the Rounded Rect style, try this. Just place a UIView over the UIButton, with an identical frame and auto resize mask, set the alpha to 0.3, and set the background to a color. Then use the snippet below to clip the rounded edges off the colored overlay view. Also, uncheck the 'User Interaction Enabled' checkbox in IB on the UIView to allow touch events to cascade down to the UIButton underneath.
One side effect is that your text will also be colorized.
#import <QuartzCore/QuartzCore.h>
colorizeOverlayView.layer.cornerRadius = 10.0f;
colorizeOverlayView.layer.masksToBounds = YES;
Another possibility (the best and most beautiful imho):
Create a UISegmentedControl with 2 segments in the required background color in Interface Builder. Set the type to 'bar'. Then, change it to having only one segment. Interface builder does not accept one segment so you have to do that programmatically.
Therefore, create an IBOutlet for this button and add this to the viewDidLoad of your view:
[segmentedButton removeSegmentAtIndex:1 animated:NO];
Now you have a beautiful glossy, colored button with the specified background color.
For actions, use the 'value changed' event.
(I have found this on http://chris-software.com/index.php/2009/05/13/creating-a-nice-glass-buttons/). Thanks Chris!
Well I'm 99% percent positive that you cannot just go and change the background color of a UIButton. Instead you have to go and change the background images yourself which I think is a pain. I'm amazed that I had to do this.
If I'm wrong or if theres a better way without having to set background images please let me know
[random setBackgroundImage:[UIImage imageNamed:#"toggleoff.png"] forState:UIControlStateNormal];
[random setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal];
[random setBackgroundImage:[UIImage imageNamed:#"toggleon.png"] forState:UIControlStateNormal];
[random setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
Per #EthanB suggestion and #karim making a back filled rectangle, I just created a category for the UIButton to achieve this.
Just drop in the Category code: https://github.com/zmonteca/UIButton-PLColor
Usage:
[button setBackgroundColor:uiTextColor forState:UIControlStateDisabled];
Optional forStates to use:
UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateSelected
You can also add a CALayer to the button - you can do lots of things with these including a color overlay, this example uses a plain color layer you can also easily graduate the colour. Be aware though added layers obscure those underneath
+(void)makeButtonColored:(UIButton*)button color1:(UIColor*) color
{
CALayer *layer = button.layer;
layer.cornerRadius = 8.0f;
layer.masksToBounds = YES;
layer.borderWidth = 4.0f;
layer.opacity = .3;//
layer.borderColor = [UIColor colorWithWhite:0.4f alpha:0.2f].CGColor;
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.cornerRadius = 8.0f;
colorLayer.frame = button.layer.bounds;
//set gradient colors
colorLayer.colors = [NSArray arrayWithObjects:
(id) color.CGColor,
(id) color.CGColor,
nil];
//set gradient locations
colorLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
[button.layer addSublayer:colorLayer];
}
add a second target for the UIButton for UIControlEventTouched and change the UIButton background color. Then change it back in the UIControlEventTouchUpInside target;
For professional and nice looking buttons, you may check this custom button component. You can use it directly in your views and tableviews or modify the source code to make it meet your needs. Hope this helps.
This isn't as elegant as sub-classing UIButton, however if you just want something quick - what I did was create custom button, then a 1px by 1px image with the colour I'd want the button to be, and set the background of the button to that image for the highlighted state - works for my needs.
I know this was asked a long time ago and now there's a new UIButtonTypeSystem. But newer questions are being marked as duplicates of this question so here's my newer answer in the context of an iOS 7 system button, use the .tintColor property.
let button = UIButton(type: .System)
button.setTitle("My Button", forState: .Normal)
button.tintColor = .redColor()
[myButton setBackgroundColor:[UIColor blueColor]];
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
It's possible change this way or going on Storyboard and change background on options in right side.
Swift 3:
static func imageFromColor(color: UIColor, width: CGFloat, height: CGFloat) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: width, height: height)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()!
context.setFillColor(color.cgColor)
context.fill(rect)
let img = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
let button = UIButton(type: .system)
let image = imageFromColor(color: .red, width:
button.frame.size.width, height: button.frame.size.height)
button.setBackgroundImage(image, for: .normal)
For iOS 15+ Apple provides a simple button configuration to accomplish this.
Objective-C:
randomButton.configuration = [UIButtonConfiguration filledButtonConfiguration];
Swift:
randomButton.configuration = .filled()