I was wondering if anyone was ever successful in changing the corners of an UIPageViewController (the fancy book turning animation of iBooks) to rounded corners?
I tried this but to no avail:
[self.notebookPages setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:NULL];
self.notebookPages.dataSource = self.pageModelController;
self.notebookPages.doubleSided = NO;
[self addChildViewController:self.notebookPages];
// mask
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 332, 480)
byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii:CGSizeMake(15.f, 15.f)];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [roundedPath CGPath];
self.notebookPages.view.layer.mask = maskLayer;
[self.notebookScrollNavigationController.notebook.pages addSubview:self.notebookPages.view];
self.notebookPages.view.frame = CGRectMake(0, 0, 332, 480);
[self.notebookPages didMoveToParentViewController:self];
This is all a bit hardcoded (which is obviously bad) but I was just trying to find out if rounded corners would work. However, I only get a non-rounded transparent corner:
Add this import:
#import <QuartzCore/QuartzCore.h>
Now you can use cornerRadius:
self.notebookPages.view.layer.cornerRadius = 6;
Related
I have a Master-Details project setup and running in XCode with no problems at all and everything works fine. However, when I attempt to round the top right and left corners of the NavigationBar it has a very strange effect. It basically, offsets the 'touch' response of the 'back' left button on the details view.
The button still works, but it seems that the iPhone can only pick up the user's touch when they click just below the NavigationBar and not the button itself.
The code I have is:
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor darkGrayColor];
UIImage *img = [UIImage imageNamed:#"nav-bar"];
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
self.tintColor = color;
// Create mask to round corners
CGRect bounds = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(10.0, 10.0)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
maskLayer.path = maskPath.CGPath;
// Apply mask to navigation bar
[self.layer addSublayer:maskLayer];
self.layer.mask = maskLayer;
// Apply logo to navigation bar
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"logo"]];
self.topItem.titleView = imageView;
}
Here is a screen shot of what I mean, button only responses when I touch where the arrow is pointing:
--- UPDATE ---
After some testing I've worked out the problem is with the 'self.layer.mask = maskLayer' line. I have refactored the code and tested in another project that just uses xib files and not story boards, and dont have any problems, but its still not working in the current project.
CGRect bounds = CGRectMake(0, 0, navigationController.navigationBar.bounds.size.width,
navigationController.navigationBar.bounds.size.height);
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(10.0, 10.0)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
maskLayer.path = maskPath.CGPath;
// Apply mask to navigation bar
//navigationController.navigationBar.layer.mask = maskLayer;
[navigationController.navigationBar.layer addSublayer:maskLayer];
navigationController.navigationBar.layer.mask = maskLayer;
use self.bounds instead of self.frame. You probably want to draw relatively to your own coordinates system and not relatively to your own parent view.
Hi guys I've creates this box, basically the corner radius isn't working & the stroke doesn't show on the top side of the shape either. Is there anyway to get this working?
UIBezierPath* conPath = [UIBezierPath bezierPath];
[conPath moveToPoint:CGPointMake(conX, conY)];
[conPath addLineToPoint:CGPointMake(conX, conY+50)];
[conPath addLineToPoint:CGPointMake(conX+220, conY+50)];
[conPath addLineToPoint:CGPointMake(conX+220, conY)];
CAShapeLayer* conLayer = [CAShapeLayer layer];
conLayer.path = conPath.CGPath;
conLayer.cornerRadius = 5.0;
UIColor *bg = [UIColor colorWithWhite:1 alpha:0.7];
[conLayer setFillColor:bg.CGColor];
[conLayer setStrokeColor:[UIColor grayColor].CGColor];
[[self layer] addSublayer:conLayer];
I want to apply two types of border on a UIImageView:
One is the border on the layer of the UIImageView.
Second is the border around the layer of the UIImageView.
How can I do this?
Try
#define kBorderWidth 3.0
#define kCornerRadius 8.0
CALayer *borderLayer = [CALayer layer];
CGRect borderFrame = CGRectMake(0, 0, (imageView.frame.size.width), (imageView.frame.size.height));
[borderLayer setBackgroundColor:[[UIColor clearColor] CGColor]];
[borderLayer setFrame:borderFrame];
[borderLayer setCornerRadius:kCornerRadius];
[borderLayer setBorderWidth:kBorderWidth];
[borderLayer setBorderColor:[[UIColor redColor] CGColor]];
[imageView.layer addSublayer:borderLayer];
And don't forget to import QuartzCore/QuartzCore.h
This example will draw a boarder on the layer, but change it's frame slightly to make the border around the layer.
Another way
You must import
#import <QuartzCore/QuartzCore.h>
Then add code for your UIImageView
imgView.clipsToBounds = YES;
imgView.layer.cornerRadius = 8.0;
imgView.layer.borderWidth = 2.0;
imgView.layer.borderColor = [UIColor greenColor].CGColor;
An other way is to add another layer that goes a bit outside of the UIImageView's layer like so :
CALayer * externalBorder = [CALayer layer];
externalBorder.frame = CGRectMake(-1, -1, myView.frame.size.width+2, myView.frame.size.height+2);
externalBorder.borderColor = [UIColor blackColor].CGColor;
externalBorder.borderWidth = 1.0;
[myView.layer addSublayer:externalBorder];
myView.layer.masksToBounds = NO;
Swift 5
Beware when using a UIImageView; masksToBounds = false means the image will spill over
let outsideBorder = CALayer()
outsideBorder.frame = CGRect(x: -1, y: -1, width: myView.frame.size.width+2, height: myView.frame.size.height+2)
outsideBorder.borderColor = UIColor.black.cgColor
outsideBorder.borderWidth = 1.0
myView.layer.addSublayer(outsideBorder)
myView.masksToBounds = false
How to make a half rounded (Top corner rounded) textview or tableview with the borderwidth and borderColor?
This isn't perfect, but you can work from this:
#import <QuartzCore/CoreAnimation.h>
(and also link to QuartzCore.framework in your project), then..
self.textView.layer.borderColor = [UIColor redColor].CGColor;
self.textView.layer.borderWidth = 4.0f;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.textView.bounds
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake(7.0, 7.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.textView.bounds;
maskLayer.path = maskPath.CGPath;
self.textView.layer.mask = maskLayer;
[maskLayer release];
First remove all code that would generate a border (xib or layer.borderWidth) and them use this method below that I created in a UIView Category:
#import "UIView+RoundedCorners.h"
#implementation UIView (RoundedCorners)
#pragma mark - Public
- (void)addBorderWithRoundedCorners:(UIRectCorner)roundedCorners radius:(CGFloat)radius color:(UIColor *)color
{
self.clipsToBounds = NO;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:roundedCorners cornerRadii:CGSizeMake(radius, radius)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;
maskLayer.lineWidth = 1.0;
maskLayer.strokeColor = color.CGColor;
maskLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:maskLayer];
}
#end
i think use bellow code
[yourTextView.layer setBorderColor: [[UIColor redColor] CGColor]];
[yourTextView.layer setBorderWidth: 1.0];
[yourTextView.layer setCornerRadius:8.0f];
[yourTextView.layer setMasksToBounds:YES];
also use yourTableView insted of yourTextView
I am trying to mask an image so that I can give it only two rounded corners. With the code that I have it just adds the mask in white over the image, but doesn't seem to apply it. What do I need to do different to mask the image corners?
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:maskLayer.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(16.f, 16.f)];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [roundedPath CGPath];
// Add mask
self.imageView.layer.mask = maskLayer;
Round two corners in UIView
As mentioned in the above linked question, you probably need to remove the view from the heirarchy before applying its mask.
[self.imageView removeFromSuperview];
self.imageView.layer.mask = maskLayer;
[self.view addSubview:self.imageView];
Also, your maskLayer has no bounds. You need to set it to the frame (or bounds) of the view you're trying to mask.
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.imageView.frame;