I made button whit little arrow on the bottom like on the image.
But I to add rounded corner. Here is my problem. If I add rounded corner then my button are mask to bounds and arrow is mask out. If I set setMasksToBounds:NO then button is not cornered.
+ (UIButton*)MCustomButtonSelected:(UIButton*)button andColor:(UIColor*)color shadowColor:(UIColor *)shadowColor andFontSize:(int)fontSize numberOfLines:(int)lines{
button.titleLabel.numberOfLines = lines;
UIImage * radialGradient = [Color getRadialGradientImage:button.frame.size centre:CGPointMake(0.5, 0.6) radius:1.4 startColor:color endColor:shadowColor];
[button setBackgroundColor:[UIColor colorWithPatternImage:radialGradient]];
[button.layer setBorderColor:[[UIColor clearColor] CGColor]];
button.layer.cornerRadius = 5;
[button.layer setMasksToBounds:NO]; // here is the problem
[button.layer setOpaque:NO];
[button.titleLabel setTextAlignment:NSTextAlignmentCenter];
[button.titleLabel setFont:[UIFont fontWithName:[Fonts mainFontName] size:fontSize]];
button.titleLabel.adjustsFontSizeToFitWidth = YES;
[button.titleLabel setShadowOffset:CGSizeMake(0.5, 0.5)];
[button setTitleShadowColor:[Color buttonNormalTextShadowColor] forState:UIControlStateNormal];
[button setTitleColor:[Color buttonNormalTextColor] forState:UIControlStateNormal];
[button setTitleShadowColor:[Color buttonPressTextShadowColor] forState:UIControlStateHighlighted];
[button setTitleColor:[Color buttonPressTextColor] forState:UIControlStateHighlighted];
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
UIView * pointer = [[UIView alloc]initWithFrame:CGRectMake(button.frame.size.width/2-5, button.frame.size.height-5, 10, 10)];
pointer.backgroundColor = color;
pointer.transform = transform;
pointer.tag = 10;
pointer.clipsToBounds = NO;
[button addSubview:pointer];
[button sendSubviewToBack:pointer];
return button;
}
Can anyone help me out.
Do this:
UIBezierPath *path = "create a path representing ur desired shape, along with the arrow"
CAShapeLayer *shape = [CAShapeLayer layer];
shape.path = path.CGPath;
button.layer.mask = shape;
Related
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!
This seems simple enough - perhaps you can help me find the solution?
I wrote a custom drop shadow for a UIButton. I'm attempting to place it at the lowest index of the UIButton's layer stack. Unfortunately, it isn't being placed beneath the rest of the UIButton.
The Code:
//UIButton type custom
alarmSetterButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *img = [UIImage imageNamed:#"rootSchedulerButton"];
//Scaling
float delta = 2.4f;
if (IS_IPHONE_5) delta = 2.0f;
[alarmSetterButton setFrame:CGRectMake(0.0f, 0.0f, (img.size.width/delta), (img.size.height/delta))];
[alarmSetterButton setBackgroundImage:img forState:UIControlStateNormal];
[alarmSetterButton setTitle:#"" forState:UIControlStateNormal];
[alarmSetterButton addTarget:self action:#selector(setSecondaryView:) forControlEvents:UIControlEventTouchUpInside];
//the colors for the gradient
UIColor *high = [UIColor colorWithWhite:0.0f alpha:1.0f];
UIColor *low = [UIColor colorWithWhite:0.0f alpha:0.0f];
//The gradient, simply enough. It is a rectangle
CAGradientLayer * gradient = [CAGradientLayer layer];
[gradient setFrame:[b bounds]];
[gradient setColors:[NSArray arrayWithObjects:(id)[high CGColor], (id)[low CGColor], nil]];
[gradient setAnchorPoint:CGPointMake(0.5f, 0.0f)];
[gradient setTransform:CATransform3DMakeRotation(315.0 / 180.0 * M_PI, 0.0, 0.0, 1.0)];
// What needs altered
[alarmSetterButton.layer insertSublayer:gradient below:alarmSetterButton.layer];
I found the solution. Instead of using UIButton's setBackroundImage:forState: method I wrote a new CALayer to contain the contents of the image.
Thanks for the help.
:)
Try this, it places the layer at position zero in the stack, i.e. the bottom.
[alarmSetterButton.layer insertSublayer:gradient atIndex:0];
I wish to create delete button in imageview's top left corner and bottom right corner. but it doesn't look like what I needed.
I wish both the buttons should be placed on corner of the Red border
To create the button I used the code below
UIImageView * tappedView = (UIImageView *)[recognizer view];
[tappedView.layer setBorderColor: [[UIColor redColor] CGColor]];
[tappedView.layer setBorderWidth: 2.0];
tappedView.layer.cornerRadius = 10;
tappedView.layer.masksToBounds = NO;
UIButton *deleteBtn = [UIButton buttonWithType:UIButtonTypeCustom];
deleteBtn.frame = CGRectMake(0, 0, 20, 20);
[deleteBtn setImage:[UIImage imageNamed:#"close.png"]forState:UIControlStateNormal];
deleteBtn.layer.shadowColor = [[UIColor blackColor] CGColor];
deleteBtn.layer.shadowOffset = CGSizeMake(0,4);
deleteBtn.layer.shadowOpacity = 0.3;
[tappedView addSubview:deleteBtn];
[deleteBtn addTarget:self action:#selector(deleteProperties:) forControlEvents:UIControlEventTouchUpInside];
UIButton *zoomBtn = [UIButton buttonWithType:UIButtonTypeCustom];
zoomBtn.frame = CGRectMake(tappedView.frame.size.width, tappedView.frame.size.height, 20, 20);
[zoomBtn setImage:[UIImage imageNamed:#"close.png"]forState:UIControlStateNormal];
zoomBtn.layer.shadowColor = [[UIColor blackColor] CGColor];
zoomBtn.layer.shadowOffset = CGSizeMake(0,4);
zoomBtn.layer.shadowOpacity = 0.3;
[tappedView addSubview:zoomBtn];
[zoomBtn addTarget:self action:#selector(ZoomIn:) forControlEvents:UIControlEventTouchUpInside];
please guide me.
I want like this
Just play around with the frame of the button: e.g.
deleteBtn.frame = CGRectMake(-5, -5, 20, 20);
and
zoomBtn.frame = CGRectMake(tappedView.frame.size.width - 20, tappedView.frame.size.height - 20, 20, 20);
as the first 2 numbers are co-ordinates x and y and the frame is relative to the containing views frame.
Just use zoomBtn.center rather than zoomBtn.frame - that way, you don't have to account for the size of the button - it would work for any size button.
// Create the button's frame - doesn't matter the x & y
CGRect btnFrame = CGRectMake(0.0f, 0.0f, 20.0f, 20.0f);
zoomBtn.frame = btnFrame;
// Set the zoomBtn center to the bottom right corner
zoomBtn.center = CGPointMake(tappedView.frame.size.width, tappedView.frame.size.height);
deleteBtn.frame = btnFrame;
// Set the deleteBtn center to the top left corner
deleteBtn.center = CGPointMake(0.0f, 0.0f);
I'm trying to create a UIbutton that has the following characteristics:
* A custom image as its content
* Rounded corners
* A drop shadow
Using the following code will format the button to appear correctly and function but the highlight action (i.e., the darkening of the button when touched) is lost when the touch occurs. Any ideas?
+(void) styleButton:(UIButton*)button{
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height)];
CALayer *sublayer = [CALayer layer];
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height);
backgroundView.userInteractionEnabled = NO;
[backgroundView.layer addSublayer:sublayer];
[button insertSubview:backgroundView atIndex:0];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:#"myImage.png"].CGImage;
imageLayer.cornerRadius = 5.0f;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
}
Have you tried converting your backgroundView into a UIImage and add it to the button instead of adding backgroundView as a subview? That would preserve the darkening when the button is pressed:
UIGraphicsBeginImageContext(backgroundView.frame.size);
[backgroundView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[button setImage:image forState:UIControlStateNormal];
Like this (ARC enabled):
UIGraphicsBeginImageContextWithOptions(self.button.bounds.size, NO, [[UIScreen mainScreen] scale]);
CGContextRef context = UIGraphicsGetCurrentContext();
for (UIView *aView in self.button.subviews) {
CGContextSaveGState(context);
CGContextTranslateCTM(context, aView.frame.origin.x, aView.frame.origin.y);
[aView.layer renderInContext:UIGraphicsGetCurrentContext()];
CGContextRestoreGState(context);
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.button setImage:image forState:UIControlStateNormal];
[self.button.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
[self.button setAdjustsImageWhenHighlighted:YES];
Take a look at the following image:
As you can see the edges are sharp rectangle and they are coming out of the rounded corner button. How can I not show the edges and only show the round button?
UPDATE (Solution):
I used the following code to achieve the round corners:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.stopButton.bounds
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(12.0, 12.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.stopButton.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
self.stopButton.layer.mask = maskLayer;
NEW PROBLEM:
This code gives me the error on the startButtonRound.layer.cornerRadius line.
UIButton *roundStartButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
roundStartButton.frame = CGRectMake(10, 10, 100, 20);
[roundStartButton setBackgroundImage:[UIImage imageNamed:#"green_gradient.jpg"] forState:UIControlStateNormal];
roundStartButton.layer.cornerRadius = 12.0;
UIBarButtonItem *startButton = [[UIBarButtonItem alloc] initWithCustomView:roundStartButton];
You could do this with CALayer alone:
CALayer *myLayer = [CALayer layer];
[myLayer setMasksToBounds:YES];
[myLayer setCornerRadius:5.0f];
[myLayer setBorderWidth:1.0f];
[myLayer setBorderColor: [[UIColor blackColor] CGColor]];
[myLayer setBackgroundColor: [[UIColor whiteColor] CGColor]];
You'll also want to include the QuartzCore framework and include the frameworks header in your own.
#include <QuartzCore/QuartzCore.h>
Hope this helps
Tim
I think all that can be accomplished with:
self.stopButton.layer.cornerRadius = 12.0;
But did you try
self.stopButton.opaque = NO;
self.stopButton.backgroundColor = [UIColor clearColor];
?
form the look of the image you have set your UIButton bckground color to 'White'. Make it 'Clear Color'.