I want to design a custom button in Objective C and the button is like a tick mark given bellow . Is it possible to design without using images?
Use UIBezierPath & CAShapeLayer as follow..
UIBezierPath* mybezierpath = [[UIBezierPath alloc]init];
[mybezierpath moveToPoint:CGPointMake(40.0, 55.0)];
[mybezierpath addLineToPoint:CGPointMake(130.0,160.0)];
[mybezierpath addLineToPoint:CGPointMake(200.0, 60.0)];
CAShapeLayer *lines = [CAShapeLayer layer];
lines.path = mybezierpath.CGPath;
lines.bounds = CGPathGetBoundingBox(lines.path);
lines.strokeColor = [UIColor greenColor].CGColor;
lines.fillColor = [UIColor clearColor].CGColor; /*if you just want lines*/
lines.lineWidth = 3;
lines.position = CGPointMake(self.myButton.frame.size.width/2.0, self.myButton.frame.size.height/2.0);
lines.anchorPoint = CGPointMake(.5, .5);
[self.myButton.layer addSublayer:lines];
This will Give you result like this..
Adjust points of path According to the Button you have...
Hope this helps.
Apply CAShapeLayer to your UIButton's Layer
Here is an example for you:
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 90)];
btn.backgroundColor = [UIColor purpleColor];
UIBezierPath *bPath = [UIBezierPath bezierPath];
[bPath moveToPoint:CGPointMake(25, 40)];
[bPath addLineToPoint:CGPointMake(35, 60)];
[bPath addLineToPoint:CGPointMake(75, 20)];
CAShapeLayer *sLayer = [CAShapeLayer layer];
sLayer.strokeColor = [UIColor greenColor].CGColor;
sLayer.lineWidth = 3.0f;
sLayer.path = bPath.CGPath;
sLayer.fillColor = [UIColor clearColor].CGColor;
[btn.layer addSublayer:sLayer];
[self.view addSubview:btn];
Output:
Hope this helps!
Related
I have a view in a UITableViewCell which has 3 rounded corners and a shadow. I am using UIBezierPath for rounded corners but i can't drop the shadow.
This is lines of code used:
CGRect bounds2 = cell.backgroundMessageView.bounds;
UIBezierPath *maskPath2 = [UIBezierPath bezierPathWithRoundedRect:bounds2
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomRight
cornerRadii:CGSizeMake(5, 5)];
CAShapeLayer *maskLayer2 = [CAShapeLayer layer];
maskLayer2.frame = bounds2;
maskLayer2.path = maskPath2.CGPath;
cell.backgroundMessageView.layer.mask = maskLayer2;
//drop shadow
[cell.backgroundMessageView.layer setShadowColor:[UIColor blackColor].CGColor];
[cell.backgroundMessageView.layer setShadowOpacity:1];
[cell.backgroundMessageView.layer setShadowRadius:3.0];
[cell.backgroundMessageView.layer setShadowOffset:CGSizeMake(2, 2)];
And this need to be the result:
Any ideas?
Thank you!
SOLUTION!
cell.backgroundMessageView.layer.cornerRadius=5;
CGRect bounds2 = cell.backgroundMessageView.bounds;
UIBezierPath *maskPath2 = [UIBezierPath bezierPathWithRoundedRect:bounds2
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomRight
cornerRadii:CGSizeMake(5, 5)];
CAShapeLayer *maskLayer2 = [CAShapeLayer layer];
maskLayer2.frame = bounds2;
maskLayer2.path = maskPath2.CGPath;
maskLayer2.shadowRadius = 2;
maskLayer2.shadowOpacity = 0.1;
maskLayer2.shadowColor =[UIColor blackColor].CGColor;
maskLayer2.fillColor = [UIColor colorWithRed:252/256.0 green:252/256.0 blue:252/256.0 alpha:1].CGColor;
maskLayer2.shadowOffset = CGSizeMake(0, 1);
[cell.backgroundMessageView.layer insertSublayer:maskLayer2 atIndex:0];
I have an image above which I delimitate a transparent rectangle using layer and mask.
I would like this transparent rectangle to be red bordered. But I could find a way to achieve this :
Here is what I have done :
My ViewController has a darkenedView property.
- (void)loadView {
UIView *const rootView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
rootView.backgroundColor = [UIColor whiteColor];
self.view = rootView;
[self addContentSubviews];
}
- (void)addContentSubviews {
UIImageView *const imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"DSC_0823.jpg"]];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.frame = self.view.bounds;
imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:imageView];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self addDarkenedSubview];
}
- (void)viewDidLayoutSubviews {
CGRect const bounds = self.view.bounds;
darkenedView.center = CGPointMake(CGRectGetMidX(bounds), 0);
}
- (void)addDarkenedSubview {
darkenedView = [[UIView alloc] initWithFrame:CGRectMake(10, 30, 400, 1200)];
darkenedView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.6];
darkenedView.autoresizingMask = 0;
[self.view addSubview:darkenedView];
[self addMaskToDarkenedView];
}
- (void)addMaskToDarkenedView {
CGRect bounds = darkenedView.bounds;
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
CGRect const myRect = CGRectMake(CGRectGetMidX(bounds) - 100,
CGRectGetMidY(bounds) + 100,
200, 200);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:myRect];
[path appendPath:[UIBezierPath bezierPathWithRect:bounds]];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
darkenedView.layer.mask = maskLayer;
}
I've tried without success :
maskLayer.strokeColor = [UIColor redColor].CGColor;
maskLayer.lineWidth = 3.0f;
Instead of giving stroke to maskLayer object create CAShapeLayer and addSublayer to darkenedView view below is sample code Hope it help
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = darkenedView.bounds;
shape.path = path.CGPath;
shape.lineWidth = 3.0f;
shape.strokeColor = [UIColor redColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
[darkenedView.layer addSublayer:shape];
How to create the textfield has show in below figure
in below figure Address is an custom textview.
txt_Username = [[UITextField alloc] initWithFrame:CGRectMake(0,40,self.view.frame.size.width/2,32)];
txt_Username.borderStyle = UITextBorderStyleRoundedRect;
txt_Username.font = [UIFont systemFontOfSize:15];
txt_Username.placeholder = #"PlacceHolder";
txt_Username.autocorrectionType = UITextAutocorrectionTypeNo;
txt_Username.autocapitalizationType = UITextAutocapitalizationTypeNone;
txt_Username.keyboardType = UIKeyboardTypeDefault;
txt_Username.returnKeyType = UIReturnKeyNext;
txt_Username.clearButtonMode = UITextFieldViewModeWhileEditing;
txt_Username.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
[txt_Username setLeftViewMode:UITextFieldViewModeAlways];
txt_Username.leftView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"user"]];
txt_Username.borderStyle = UITextBorderStyleNone;
[txt_Username setBackgroundColor:[UIColor clearColor]];
UIView *demoLine = [[UIView alloc] initWithFrame:CGRectMake(txt_Username.frame.origin.x
, txt_Username.frame.origin.y+txt_Username.frame.size.height
, txt_Username.frame.size.width, 1)];
[demoLine setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:demoLine];
Try this It will helpful.
Change your textfield border style to Transparent one (most left in Attribute Inspector). Use a image for the line in UIImageView. Above this image place your textfield. Or instead of using image for the line, draw the line. Line drawing code is here :
-(void)drawLine:(CGFloat)fromX fromY:(CGFloat)fromY toX:(CGFloat)toX toY:(CGFloat)toY width:(CGFloat)width color:(UIColor *)color
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(fromX, fromY)];
[path addLineToPoint:CGPointMake(toX, toY)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [color CGColor];
shapeLayer.lineWidth = width;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:shapeLayer];
}
Better if you use avoid line drawing and stick to images.
Before the thought of posting this question came into my mind I had already spent a few hours on this small snippet of code... So I wrote two different pieces of code in two different classes, and both were used to cut out a specific shape. But for some reason only one of them worked!?!? I have ABSOLUTELY no idea why this happened, for they have the exact same structure.
Below is the snippet that WORKS.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor blackColor];
UIBezierPath *arrowPath = [UIBezierPath bezierPath];
CGPoint start = CGPointMake(self.frame.size.width - 2, self.frame.size.height / 2);
[arrowPath moveToPoint:start];
[arrowPath addLineToPoint:CGPointMake(7, 7)];
[arrowPath addLineToPoint:CGPointMake(2, 7)];
[arrowPath addLineToPoint:CGPointMake(self.frame.size.width - 7, self.frame.size.height/2)];
[arrowPath addLineToPoint:CGPointMake( 2, self.frame.size.height - 7)];
[arrowPath addLineToPoint:CGPointMake(7, self.frame.size.height - 7)];
[arrowPath addLineToPoint:start];
[arrowPath closePath];
UIView *arrow = [[UIView alloc]initWithFrame:self.frame];
arrow.backgroundColor = [UIColor whiteColor];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.frame = self.frame;
mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
mask.path = arrowPath.CGPath;
arrow.layer.mask = mask;
[self addSubview:arrow];
}
return self;
}
And here is the piece of code that only works PARTIALLY.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
UIView *roundedRectView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 20)];
roundedRectView.backgroundColor = [UIColor clearColor];
[self addSubview:roundedRectView];
UIBezierPath *roundedRectPath = [UIBezierPath bezierPathWithRoundedRect:roundedRectView.frame cornerRadius:10];
UIView *rectangle = [[UIView alloc]initWithFrame:roundedRectView.frame];
rectangle.backgroundColor = [UIColor blackColor];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.frame = rectangle.frame;
mask.path = roundedRectPath.CGPath;
mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
rectangle.layer.mask = mask;
rectangle.alpha = 0.8;
[roundedRectView addSubview:rectangle];
UIView *rectangleTwo = [[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 20)];
rectangleTwo.backgroundColor = [UIColor redColor];
UIBezierPath *trianglePath = [UIBezierPath bezierPath];
CGPoint start = CGPointMake(rectangleTwo.frame.size.width / 2 - 15, 0);
[trianglePath moveToPoint:start];
[trianglePath addLineToPoint:CGPointMake(start.x + 20, start.y)];
[trianglePath addLineToPoint:CGPointMake(start.x + 10, start.y + 20)];
[trianglePath addLineToPoint:start];
[trianglePath closePath];
CAShapeLayer *triangleMask = [CAShapeLayer layer];
triangleMask.frame = rectangleTwo.frame;
triangleMask.path = trianglePath.CGPath;
rectangleTwo.layer.mask = triangleMask;
[self addSubview:rectangleTwo];
}
return self;
}
Allocating this speech bubble using CGRectMake(0,0,80,60), only the rounded rectangle showed up on the screen, but the triangle was no where to be seen.
Can anyone point out what's wrong with this code? Any help is appreciated, thanks!!
Problem solved!
Turned out that my triangleMask.frame wasn't defined properly. Instead of triangleMask.path = rectangleTwo.frame I should've used triangleMask.frame = CGRectMake(0, 0, rectangleTwo.frame.size.width, rectangleTwo.frame.size.height); instead! CAShapeLayer's origin is relative to that of the shape on which you want to place it!
I have a custom button that I want to make top-left border of it look like normal round rectangle.
I found code that makes all corners round:
_myButton.layer.cornerRadius = 8;
_myButton.layer.borderWidth = 0.5;
_myButton.layer.borderColor = [UIColor grayColor].CGColor;
_myButton.clipsToBounds = YES;
How can I fix the code to make it round just in the top-left side?
Edit:
_myButton.layer.borderWidth = 2;
_myButton.layer.borderColor = [UIColor blackColor].CGColor;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_myButton.bounds
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake(7.0, 7.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = _myButton.bounds;
maskLayer.path = maskPath.CGPath;
_myButton.layer.mask = maskLayer;
[maskLayer release];
This code does not work. The whole button disappears.
You almost got it, but, after building your CAShapeLayer, use it to add itself as a sublayer of your button's layer, not as an alpha mask to hide some parts of your button (in that case the corners).
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(10,300,300,40);
[button setTitle:#"Hey" forState:(UIControlStateNormal)];
[button setTitleColor:[UIColor blueColor] forState:(UIControlStateNormal)];
UIBezierPath *shapePath = [UIBezierPath bezierPathWithRoundedRect:button.bounds
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake(7.0, 7.0)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = button.bounds;
shapeLayer.path = shapePath.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 2;
[button.layer addSublayer:shapeLayer];
[self.view addSubview:button];
CAShapeLayer * positiveCorner = [CAShapeLayer layer];
positiveCorner.path = [UIBezierPath bezierPathWithRoundedRect: self.button.bounds
byRoundingCorners: UIRectCornerTopRight | UIRectCornerBottomRight
cornerRadii: (CGSize){5, 5}].CGPath;
self.button.layer.mask = positiveCorner;