I have a map. On the map, I'd like to draw small, blurred circle. I've implemented something like this:
UIVisualEffect *visualEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:visualEffect];
[self addSubview:self.visualEffectView];
and then in layoutSubviews:
[self.visualEffectView setFrame:CGRectMake(0.f, 0.f, 20.f, 20.f];
Now the problem is making this view round. I've tried:
[self.visualEffectView.layer setCornerRadius:10.f];
However nothing happens. Another try was with (basing on SOF question):
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithOvalInRect:self.visualEffectView.bounds].CGPath;
self.visualEffectView.layer.mask = mask;
But in this case, the visualEffectView is round but doesn't blur :/. Is there any way to make it working?
BTW: I've tried FXBlurView, however it works very slowly, I can't accept my app to load only map + blur for ~1 minute on iPhone 5.
Tryout:
self.visualEffectView.clipsToBounds = YES;
Put this after you set the cornerRadius. This should be it. You can leave out the BezierPath stuff. Hope this helps :)
EDIT:
I just tried something similar in my own project. And a good way to keep the blur with round corners, is simply to put the visual effect view as a child of a new view with the same frame as your visual effect view. You can now just set the corner radius of this new parent UIView object and set its clipsToBounds property to YES. It then automatically gives its subviews the corner radius, as it clips to its bounds.
Give it a try, it works in my case.
I figured this out if anyone wants to know how to do it, no code needed:
Create a view and set its background to "Clear Color" in the Attribute editor (it MUST be clear color not default.
Drag another view on top of the first view, size it to the size you want your Visual Effect view to be, and in the Attribute editor set its background to "Clear Color", and check "Clip Subviews".
Also on this view, go to the identity inspector and under "User Defined Runtime Attributes" add a new Key Path named "layer.cornerRadius", make it type "Number", and set its value to 9 or higher for a decent rounded edge. (There's a bug in Xcode which will change the Key Path back to the default once you change the Type, if this happens, just be sure to go back and re-type in layer.cornerRadius).
Drag a Visual Effects View with blur on top of the View in step 3.
Now run your program. You will have rounded edges, blur, and no artifacts.
Now, I created mine where it links using a segue, if you need this to work with a segue your segue has to be set to Modal and the presentation has to be set to OVER Full Screen (not just Full Screen).
Here is a link to a project file that demonstrates it. Note the hierarchy of the views in the second view controller: Project File on Dropbox
EDIT: My picture disappeared so I readded it.
Things have obviously changed since the original question, but I was able to achieve this just by selecting "Clip to Bounds" and setting "layer.cornerRadius" in "User Defined Runtime Attributes" on the Visual Effect View itself.
to draw circle the CornerRadius must be equal width/2
in your example width = 30 then the CornerRadius = 30/2 = 15;
This works for me
#IBOutlet weak var blurView: UIVisualEffectView!
And in viewDidLoad()
blurView.layer.cornerRadius = 10;
blurView.clipsToBounds = true
You can change the corner radius according to your preference.
Well, so there is a possibility to apply rounded corners just like on normal UIView. However the UIVisualEffectView won't look good, because the area nearby curved 'sides' of the circle isn't blurred properly. Because it looks buggy and ugly I disadvise to round UIVisualEffectView.
Related
I was wondering how to make a popup window similar to this example:
The origin window is full of buttons that when is selected will then pull up the image I desire to use.
I would simply create a reusable UIView component and everything you need as a subview, such as a UIImageView for your image, a UILabel or a UIButton in the top right. Here is the process to show it:
Create a UIView that takes up the full screen, make it black, and maybe 0.5 alpha.
Create another UIView which is your primary pop-up view, make it slightly smaller than the previous view, but make sure both of these views are subviews of the parent subview.
Add the desired elements on to the pop-up view as subviews, I would even suggest creating a UIView subclass if you plan to use this a lot.
To present the pop-up, make sure both views are set to hidden = true when created and so that when a button is selected, you can set them to hidden = false
If you would like them to be animated, simply start them off with alpha = 0.0 and use something like UIView's animateWithDuration and set the pop-up view to alpha = 1.0
There is a lot of little details you can change to cater to your needs, but this is the basic structure on how to accomplish your goal.
Check out UIView animation methods here.
Sorry I'm not sure if I have the terminology correct but I'd like to see the borders of the controls I use in Xcode as I work with them on my storyboard.
For example, I have a UITextView but I'm unable to see how much space it takes up until I click it.
I'm convinced there's an option for it and a google hasn't turned up anything, probably because I'm searching for the wrong thing!
Thanks in advance.
In Xcode, Editor > Canvas > Show Layout Rectangles will draw a red rectangle around each view, and the baseline for views where that makes sense.
You can see the bounds of any view in the screen using this code:
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 1.f;
Look you can use this for ANY view you want. Also, you can change the color and border size if you need.
If you can't see the bounds, check out if your view hasn't ambiguously layout or if the frame has defined correctly.
If you do not want to use code to do this you can go into the Interface Builder and click on the desired object and in the Attribute Inspector set the background to any color. This will not give you a border, but rather a filled rectangle over the whole area of the object which will allow you to see the objects bounds.
I am creating a basic animation of opening and closing of doors(like in a lift, its two doors slide back and fro). I have used CABasicAnimation for translation of two doors(two imageview).
My problem is when the door(imageview) slides out, the image of the door comes out of the frame; hence I am using masking property of CALayer but I can't get the expected result.
I want the part of image of door to get masked which comes out of frame while sliding out and it should appear again while sliding in.
thanks mates.
set the property "clip subview" of the view containing this imageview as its subview in the nib file might help you
I'm looking to have a border around a UIView I have just to separate it from the main view visually.
I have looked in the settings for the UIView in storyboard editor but I can't seem to find anything for setting a border.
Is there an easy way to do this in code?
With Swift and XCode 6 you can do this.
Click the UIView element in Storyboard, and go to identity inspector. In the user defined runtime attributes, enter:
layer.borderWidth number 1
If you want nice looking corners
layer.cornerRadius number 5
layer.masksToBounds boolean true
Now this will give you a border but to set the colour you need to do it with code. Go to your view controller, and add an IBOutlet from your UIView. Say you do,
#IBOutlet weak var xView: UIView!
Call this in the viewDidLoad function like below to set the colour.
xView.layer.borderColor = UIColor.whiteColor().CGColor
Thanks!
With this border, background still appears behind. In other words, the border isn't projected to outer of view, but to inner space.
I think that is necessary create a overlay view behind the owner with size (width x height) increased with border size.
In my example, I have 3 views: one red view containing two white views. I change the red container view's alpha to 0.3 and this happens (look at the image, the current result).
By seeing this, I can only assume (tell me if I'm wrong) that setting a view's alpha will also set all of its subviews' alphas. My question is : is there a way to simply tell the red view to act as a whole so that setting its alpha would give something that looks like the wanted result (in the image)?
This is what it looks like without any alpha :
To elaborate on Mark's answer: If you set UIViewGroupOpacity in the Info.plist, it will change the behavior for all views in your app, if you are interested in only fixing the rendering of this particular view, you could also use this snippet:
redContainerView.layer.shouldRasterize = YES;
// No setting rasterizationScale, will cause blurry images on retina.
redContainerView.layer.rasterizationScale = [[UIScreen mainScreen] scale];
The iOS alpha property is inherited by its subviews. If we are setting alpha 0.3 for red view then both subview will have the alpha = 0.3. There is no way to stop subviews from inheriting their alpha value from their superview.
The solution might be to set the colour of the red view with an alpha of 0.3. The color property will not be inherited by its subview.
[redView setBackgroundColor:[UIColor colorWithHue:238.0f/255.0f saturation:24.0f/255.0f brightness:24.0f/255.0f alpha:0.3]];
Check out the possible UIKit keys for Info.plist, specifically UIViewGroupOpacity.
UIViewGroupOpacity (Boolean - iOS) specifies whether Core Animation
sublayers inherit the opacity of their superlayer.
Info.plist UIKit Keys