I did a bit of research, and I see, there is no easy way to
make only top right and top left corners of the UIView round, right?
ps. This code makes all 4 corners round which is smth. I don't want.
#import <QuartzCore/QuartzCore.h>
self.layer.cornerRadius = 5;
self.layer.masksToBounds = YES;
You can do it with this snippet:
// Set top right & left corners
[self setMaskTo:yourView byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight];
EDIT
Sorry, I forgot this
- (void)setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
{
UIBezierPath *rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds
byRoundingCorners:corners
cornerRadii:CGSizeMake(8.0, 8.0)];
CAShapeLayer *shape = [[CAShapeLayer alloc] init];
[shape setPath:rounded.CGPath];
view.layer.mask = shape;
}
PS: as I said in the comment, if you use things like this when displaying UITableViewCell cells, I've found that it's always a better choice to use background images because this kind of drawing stuff always affects performance.
I tried extensions for the UIView once and it did not work for me because it have caused problems when drawing a cell
I got a better and easier solution now in 2 steps that worked perfectly good :)
1) One line of code (Swift 2.0) - it wounds all 4 corners of a view:
YourView.layer.cornerRadius = 10
2) and one addition in storyboard you add 1 view with regular corners where you need no round corners and adjust constraints as you need :
note that small regular corner View should be behind the main view. This is how it looks in storyboard
Here you can see constraints needed for the small view
Related
I am not good with CALayer but I need to draw a plus (+) sign and I don't want to use an image as I want to animate the drawing. Any help?
After all the down votes, I was able to do it myself. Here's how for others who might need this
CGFloat height = 2.f;
CGFloat width = 3.f;
CGFloat cornerRadius = 1.f;
CALayer *hLayer = [CALayer layer];//this is the left - right stroke
hLayer.frame = CGRectMake(0, CGRectGetMidY(self.bounds)-(height/2), width, height);
hLayer.cornerRadius = cornerRadius;
CALayer *vLayer = [CALayer layer];// this is the top - bottom stroke
vLayer.frame = CGRectMake(CGRectGetMidX(self.bounds) - (height/2), -3,height, width);
vLayer.cornerRadius = cornerRadius;
[self.layer addSublayer:hLayer];
[self.layer addSublayer:vLayer];
As luk2302 says, use a CAShapeLayer.
You can install a CGPath into a CAShapeLayer. You can get a CGPath from any UIBezierPath. (It has a CGPath property that lets you get to the underlying CGPath object for any UIBezierPath.)
I suggest reading up on UIBezierPath. It has methods moveToPoint and addLineToPoint.
You'd move to the top of your plus, add a line down, then move to the left of your plus and add a line across.
Note that you can also animate images, depending on the type of animation you are after. What kind of animation do you need to do?
Another simple way would be to use two UIView with the same background color and add them as a subview to another UIView. Then you can use the UIView animateWithDuration:... method to do your simple animations.
I am trying to set the cornerRadius of a subclass view of UIButton, the round corner shows in a right way, but when I try to add a subView(the flower icon) on it, the subview seems to be clipped like the picture on the right side below, this is not what I expected. I try to make the correct appearance like the picture shows on the left side, the icon not be clipped. The code I use:
button.layer.cornerRadius = button.frame.width / 2;
button.layer.masksToBounds = Yes;
Hope someone can help me to understand how to prevent from clipping.
Thanks!
You shouldn't add the overlay as a subview then. Subviews will be clipped if you set clipsToBounds to YES.
Instead add it as a sibling, like so:
- container view
- image view (clips)
- overlay view
If you are making the button rounded using your above mentioned code then your button will definitely get chopped from the corners so if you only want to chop it from 3 corners then do this:
#import <QuartzCore/CoreAnimation.h>
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:button.bounds
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft
cornerRadii:CGSizeMake(7.0, 7.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = button.bounds;
maskLayer.path = maskPath.CGPath;
button.layer.mask = maskLayer;
Example project: http://cl.ly/1l1x1A0J3o2X
I have a child view controller that has a UITableView in it, and this view controller sits on top of another view controller. I want to give the bottom of it rounded corners (but only the bottom).
In my UITableView subclass I have this code to round the bottom corners.
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(5.0, 5.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;
self.layer.mask = maskLayer;
self.backgroundColor = [UIColor colorWithRed:0.169 green:0.169 blue:0.169 alpha:1];
}
return self;
}
Which does indeed round them, but as soon as I scroll the table view it moves it up further and decreases in height (seemingly at least).
However, if I simply use self.layer.cornerRadius = 5.0 it completely operates fine.
Does anyone know why this behaviour might be the case?
UIScrollView, and thus the subclass UITableView, actually renders its content by changing the bounds of what it's rendering. My guess is that adding a mask to the UITableView's layer is actually adding the mask to the content within the view, not the container like you might imagine.
Why 'self.layer.cornerRadius = 5.0' works, and your approach doesn't, I am not sure.
An approach that would work better was already given for a similar request, so I'll direct you over to:
Adding Rounded Corners to only top of UITableView?
Basically, the recommendation was to put the UITableView into a container and add the mask to the container. I believe that would work just fine.
This might not be an exact answer. But I am gonna give you an workaround.
Look at this question and answer.
How to get an UITableView working with CAShapeLayer mask?
https://stackoverflow.com/a/11538923/1083859
This will give you a clue what I tried.
As in that question explained, adding tableView mask will not going to work for you, because it will move with your tableView as you explained.
So I tried adding a another superview for the tableView in your DropDownViewController and add a outlet for it.
Then I changed your code inside the viewDidLoad in DropDownViewController to add the mask for current superview of tableView like below.
UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:self.tableSuperView.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) cornerRadii:CGSizeMake(5.0, 5.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.view.bounds;
maskLayer.path = maskPath.CGPath;
self.tableSuperView.layer.mask = maskLayer;
and that's it. It works. And I found an unwanted behavior when scroll the tableView to the end. It happens because of tableView bounce animation. If you remove that animation, then you are good to go.
Glad to know your opinion and result.
I am wondering if it is possible to clip a view to a Bezier Path. What I mean is that I want to be able to see the view only in the region within the closed Bezier Path. The reason for this is that I have the outline of an irregular shape, and I want to fill in the shape gradually with a solid color from top to bottom. If I could make it so that a certain view is only visible within the path then I could simply create a UIView of the color I want and then change the y coordinate of its frame as I please, effectively filling in the shape. If anyone has any better ideas for how to implement this that would be greatly appreciated. For the record the filling of the shape will match the y value of the users finger, so it can't be a continuous animation. Thanks.
Update (a very long time later):
I tried your answer, Rob, and it works great except for one thing. My intention was to move the view being masked while the mask remains in the same place on screen. This is so that I can give the impression of the mask being "filled up" by the view. The problem is that with the code I have written based on your answer, when I move the view the mask moves with it. I understand that that is to be expected because all I did was add it as the mask of the view so it stands to reason that it will move if the thing it's tied to moves. I tried adding the mask as a sublayer of the superview so that it stays put, but that had very weird results. Here is my code:
self.test = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
self.test.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.test];
UIBezierPath *myClippingPath = [UIBezierPath bezierPath];
[myClippingPath moveToPoint:CGPointMake(100, 100)];
[myClippingPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(self.screenWidth, 0) controlPoint2:CGPointMake(self.screenWidth, 50)];
[myClippingPath closePath];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;
self.test.layer.mask = mask;
CGRect firstFrame = self.test.frame;
firstFrame.origin.x += 100;
[UIView animateWithDuration:3 animations:^{
self.test.frame = firstFrame;
}];
Thanks for the help already.
You can do this easily by setting your view's layer mask to a CAShapeLayer.
UIBezierPath *myClippingPath = ...
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;
myView.layer.mask = mask;
You will need to add the QuartzCore framework to your target if you haven't already.
In Swift ...
let yourCarefullyDrawnPath = UIBezierPath( .. blah blah
let maskForYourPath = CAShapeLayer()
maskForYourPath.path = carefullyRoundedBox.CGPath
layer.mask = maskForYourPath
Just an example of Rob's solution, there's a UIWebView sitting as a subview of a UIView called smoothView. smoothView uses bezierPathWithRoundedRect to make a rounded gray background (notice on right). That works fine.
But if smoothView has only normal clip-subviews, you get this:
If you do what Rob says, you get the rounded corners in smoothView and all subviews ...
Great stuff.
I'm trying to add some shadows to one of my views and what I would like to achieve is drawing shadows only on one side and let them have sharp edges. No I've tried quite a few methods without any luck (using the shadow related properties of the view's CALayer + UIBezierPaths). However, iOS is always rendering a shadow with soft edges like this:
But what I really want to acchieve is something like this (without round corners and sharp edges on the sides except one):
Is there any elegant way to do this or will I have to draw the shadow myself using CoreGraphics?
PS: I forgot to mention, my view should actually be a custom UIButton, so overriding drawRect: would be a pain here
I've experienced a mask removing the shadow from view...so maybe you can try that.
CALayer *mask = [[[CALayer alloc] init] autorelease];
mask.backgroundColor = [UIColor blackColor].CGColor;
mask.frame = CGRectMake(0.0, 0.0, yellowView.bounds.size.width + shadowWidth, yellowView.bounds.size.height);
yellowView.layer.mask = mask;
I think what you want to be changing is the shadowRadius value - set that to zero and you should get the sharp edge you're looking for:
myView.layer.shadowRadius = 0;