I'm trying to make a controller that will be similar to Control Center in iOS7. From WWDC session #226 I've learnt how to get blurred image with different effects
UIGraphicsBeginImageContextWithOptions(image.size, NULL, 0);
[view drawViewHierarchyInRect:rect];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lightImage = [newImage applyLightEffect];
So, in other words, we just capture some image (make screenshot), perform blur effect and use this blurred image for our needs.
But if you open control center above some dynamic content you'll notice that control center's blurred background is changing as well as content does.
Does anybody know how to replicate this behavior?
The only way I see it is to capture content and make blur effect with some interval (e.g. half a second). But it looks redundantly.
Here are ready solutions that I've found:
1. The most unexpected: Use UIToolBar
- (id) initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame]))
{
[self setup];
}
return self;
}
- (id) initWithCoder:(NSCoder *)coder
{
if ((self = [super initWithCoder:coder]))
{
[self setup];
}
return self;
}
- (void) setup
{
if (iOS7OrLater)
{
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:self.bounds];
toolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
toolbar.barTintColor = self.tintColor;
[self insertSubview:toolbar atIndex:0];
}
}
UIToolbar can be used for this needs, bacuse it has his only build-in blur mechanism, and this mechanism is dynamic, what is good. But the bad thing is that in some reason it ignores colors and makes background looks irredeemably...
Update:
To avoid color breaking, do not use barTintColor. You also may change style of toolbar if you want dark styled blur (use UIBarStyleBlack).
2. FXBlurView.
Unlike toolbar it more positive, but it's dynamic mechanism is rare yet and in fact it can be used only for static background. (dynamic = NO).
In iOS8 we can implement blur effect on views using UIVisualEffect class.
You can use below code to apply blur effect on view.
UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = MYview.bounds;
[MYview addSubview:visualEffectView];
I've found LiveFrost to be a great, and easy to integrate project for live blurring.
https://github.com/radi/LiveFrost/
You can use UIVisualEffect from storyboard.
Drag the Visual Effect With Blur on the storyboard. The desired effect can be achieved by setting alpha of the BACKGROUND COLOR. The subviews should be added to View of Visual Effect View and they are not affected by the background blur.
The Vibrancy effect must be selected in View options above.
See image:
Using navigation bar to provide blurring will not work on older devices running iOS 7. As they are running lighter version of iOS 7 with almost no t
Related
I have created a bar to appear over the keyboard for next/previous/done like the safari browser. However, the setalpha property of the UIview of the bar doesn't seem to be working. No matter what value I set it to, nothing changes. Here is the code...
here is where the create view is called..
-(void)textFieldDidBeginEditing:(UITextField *)textField{
// Call the createInputAccessoryView method we created earlier.
// By doing that we will prepare the inputAccView.
[self createInputAccessoryView];
// Now add the view as an input accessory view to the selected textfield.
[textField setInputAccessoryView:inputAccView];
// Set the active field. We' ll need that if we want to move properly
// between our textfields.
txtActiveField = textField;
}
here is where i actually create and set its values...
-(void)createInputAccessoryView{
// Create the view that will play the part of the input accessory view.
// Note that the frame width (third value in the CGRectMake method)
// should change accordingly in landscape orientation. But we don’t care
// about that now.
inputAccView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 310.0, 40.0)];
// Set the view’s background color. We’ ll set it here to gray. Use any color you want.
[inputAccView setBackgroundColor:[UIColor darkGrayColor]];
// We can play a little with transparency as well using the Alpha property. Normally
// you can leave it unchanged.
[inputAccView setAlpha: 0.1f];
... code for adding buttons and their properties
}
so basically this is all there is to it. but the setAlpha property does nothing, regardless of what I set it to. However, background color works fine. Any ideas?
Thanks
If you want it to look like the prev/next/done bar in Safari etc, create a UIToolbar with the style set to translucent black. This also has the advantage of laying out your buttons nicely, with the correct style, and auto adjusting between landscape and portrait.
Not a direct answer to your question but probably a better way of acheiving what you actually want.
out of utter curiosity try using:
UIView *overlay = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 310.0, 40.0)];
overlay.backgroundColor = [UIColor blackColor];
overlay.alpha = 0.5f;
[self.view addSubview:overlay];
it's hard to tell what the issue is without being able to see how many views you have and how you've stacked them. check you've defined your "addSubview" and what the hierarchy looks like
I'm trying to create a grouped style tableview which features cells with a background image. Both the tableview and the cells have been set up in Interface Builder.
Everything works, however the cells won't clip the background images corners, leaving the cell square. I've tried to enable "clip subviews", I've tried adding an UIImageView as a subview (as opposed to making the background view an imageview), I've both tried selecting a background image directly or connecting a seperate UIImageView to the cell's backroundView Outlet - to no avail.
I've tried setting up the cell programmatically, too - doesn't work. It seems the only thing that will leave the corners rounded is selecting a background color (not an image) directly in Interface Builder, which is not what I want.
There are other questions on SO with related problems, none of which covered the use of background images however, so no help there.
Thanks alot for any insights..!
Have you tried _table.backgroundColor = [UIColor clearColor]; ?
FIXED: _cell.backgroundColor = [UIColor colorWithPatternImage:image];
The above did not work for me.
first set the background of your window to the color you want in your app delegate like this:
UIView *bgView = [[UIView alloc] initWithFrame:self.window.frame];
bgView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"main_background.png"]];
[self.window addSubview:bgView];
[bgView release];
Now if you just have one view controller just set its background to clear and your done. I had to to the next steps because I was popping a modal window with a table view and if the background of that view was clear it looked choppy coming up. So the code below fixed the choppy view and I still get the rounded corners because after the view has appeared I set the background to clear again and let the background from the window show through.
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"main_background.png"]];
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
self.view.backgroundColor = [UIColor clearColor];
[self.tableView reloadData];
}
I've subclassed an UIAlertView as follow:
#interface NarrationAlertView : UIAlertView {
UIImage * backgroundImage; //The image I want as custom background
UILabel * textualNarrationView; //The test I wanna be displayed on the view
}
And implemented it this way :
- (id)initNarrationViewWithImage:(UIImage *)image{
if (self = [super init]){
UILabel * alertTextLabel = [[UILabel alloc] initWithFrame:CGRectZero];
self.textualNarrationView = alertTextLabel;
[alertTextLabel release];
[self addSubview:alertTextLabel];
}
return self;
}
- (void)drawRect:(CGRect)rect {
/* Here I draw the image as background */
CGSize imageSize = self.backgroundImage.size;
[self.backgroundImage drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
}
- (void)layoutSubviews {
/* To fit the text */
[textualNarrationView sizeToFit];
CGRect textRect = textualNarrationView.frame;
textRect.origin.x = (CGRectGetWidth(self.bounds) - CGRectGetWidth(textRect)) / 2;
textRect.origin.y = (CGRectGetHeight(self.bounds) - CGRectGetHeight(textRect)) / 2;
textRect.origin.y -= 70;
textualNarrationView.frame = textRect;
}
- (void)show{
/* Showing the view */
[super show];
CGSize imageSize = self.backgroundImage.size;
self.bounds = CGRectMake(0, 0, imageSize.width, imageSize.height);
}
On the previous versions of iOS (I'm always testing on the simulator) the subclass run fine and when shown it displayed the custom background image drawn correctly and just text upon it, whereas in the 4.2 version it draws the UIAlertView classic background (the blue rounded corners rectangle) on top of my image.
What am I doing wrong? Any suggestion about UIAlertView programming and UIView too will be appreciated.
UPDATE Has anyone got some UIAlertView replacement class to share?
We had a similar problem with UIAlertView in iOS 4.2; we were customizing the layout, added text boxes and rearranging the buttons.
This won't be a popular answer, but due to the changes to UIAlertView, we had to abandon using it entirely for this purpose. We always knew it was a fragile implementation since customizing/subclassing UIAlertView isn't officially supported and makes assumptions about the internal structure of the view hierarchy, but the release of 4.2 really kicked us into gear.
In the end, we implemented our own UI element to replace the customized UIAlertView.
Prior to iOS 4.2 UIAlertView's standard dark blue rounded rectangle was drawn in drawRect. the rounded rectangle could be removed by subclassing UIAlertView and implementing drawRect without calling super. however in 4.2 the rounded rectangle is a UIImageView subview.
the quick, easy (not best) solution: If you are not adding any UIImageView instances to your UIAlertView subclass you can simply remove the default UIImageView that is loaded by observing subview additions:
- (void)didAddSubview:(UIView *)subview {
if ([subview isMemberOfClass:[UIImageView class]]) {
[subview removeFromSuperview];
}
}
I got burned by this too. I ended up writing a replacement class, which I'm sharing on github:
https://github.com/TomSwift/TSAlertView
My app's main view has a uiwebview. It is white for a split second before it has time to render the HTML the app generates.
Is there a way to make the uiwebview black, or another color, before it renders? The flash of white isn't part of my plan for a smooth visual transition.
Objective-C or MonoTouch answers are fine, I am bi-lingual.
Another thing to try is to make the view transparent:
webView.backgroundColor = [UIColor clearColor];
webView.opaque = NO;
This causes additional compositing work, however, so you can reset these values to something more friendly for that after your web view loads, in webViewDidFinishLoad:.
- (void) webViewDidFinishLoad:(UIWebView *)webView
{
webView.backgroundColor = [UIColor blackColor];
webView.opaque = YES;
}
One thing you can try is put a UIView with the color you want and position it above the UIWebView with the same width and height. Then in the webViewDidFinishLoad method, set the UIView to hidden.
I can't comment yet hence the answer.
#Steve, actually it's possible to do with storyboards.
Place a UIView under the UIWebView and:
// Can be set in the storyboard
bottomView.backgroundColor = [UIColor yellowColor];
webview.alpha = 0;
Keep in mind that a lot of page fetch stuff after being loaded via JS so you still can be left with a white page couple seconds after
- (void) webViewDidFinishLoad:(UIWebView *)webView
{
webView.alpha = 1;
}
To add to Steve Madsen's answer (since I can't comment yet). If you instanced the UIWebView in Interface Builder, you wont be able to set alpha to 0.0, but what you can do is bring up the color picker to set a background color (white, black, gray, it doesnt matter), then set the opacity of that color to zero percent, and that works.
When you try deleting a note in iPhone's Notes application, an UIActionSheet pops up. The sheet is translucent (but not black translucent). How is that achieved? Is it possible to make the background of UIActionSheet a certain color?
I usually implement the following delegate method:
- (void)willPresentActionSheet:(UIActionSheet *)actionSheet
Just to make a sample. In this case I use a stretched png as a background:
- (void)willPresentActionSheet:(UIActionSheet *)actionSheet {
UIImage *theImage = [UIImage imageNamed:#"detail_menu_bg.png"];
theImage = [theImage stretchableImageWithLeftCapWidth:32 topCapHeight:32];
CGSize theSize = actionSheet.frame.size;
// draw the background image and replace layer content
UIGraphicsBeginImageContext(theSize);
[theImage drawInRect:CGRectMake(0, 0, theSize.width, theSize.height)];
theImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[[actionSheet layer] setContents:(id)theImage.CGImage];
}
and this is the result:
alt text http://grab.by/4yF1
You can use the code below:
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackOpaque;
or
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;
actionSheetObj.actionSheetStyle=UIActionSheetStyleBlackTranslucent;
It's not too difficult. You can use the following code:
CGSize mySize = myActionSheet.bounds.size;
CGRect myRect = CGRectMake(0, 0, mySize.width, mySize.height);
UIImageView *redView = [[[UIImageView alloc] initWithFrame:myRect] autorelease];
[redView setBackgroundColor:[UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5]];
[myActionSheet insertSubview:redView atIndex:0];
Just make sure you present the UIActionSheet before doing this or the size wont be set. That makes it kind of ugly, but you could do something like:
[myActionSheet showInView:self.view];
if (!redAdded) {
redAdded = YES;
//THE ABOVE CODE GOES HERE
}
You can definitely adjust the opacity by setting the alpha value. Interface Builder lets you edit the value directly, but in code I think you would do:
[[myActionSheet view] setOpaque:NO];
[[myActionSheet view] setAlpha:0.5];
I'm not sure if you need the setOpaque call or not - I think that is used to help optimize performance, as the iPhone won't try to render anything hidden by the opaque view.
It looks black to me (note: using 2.2.1). The only reason there's a color to it is because of the yellow behind it.
One option would be to use the black transparent background and find out the size and speed of the action sheet. Then create a view and animate it in at the same time you show the action sheet, just underneath it, to give it a tint different than the color naturally behind the action sheet. You would have to make the color view also translucent so you could see behind that as well.
I'm not sure if you can, but you might also try adjusting the opacity of the action sheet itself as well.