I want to create Custom UIButton with rectangular shape. for this I am using rectangular view as a Background for UIButton and making UIbuttons background colour as clearcolor. But border of UIbutton still remains. any suggestions on how to make border disappear?
Thanks for any help in advance..
Try this:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.layer setBorderColor:[[UIColor clearColor] CGColor]];
but don't forget to add in your .h or .m file
#import <QuartzCore/QuartzCore.h>
I wasted a few minutes and got frustrated that the border was not showing up even though I was setting the layer property as suggested above.
When I set the width using the following, I saw the button border.
[[button layer] setBorderWidth:2.0f];
button.layer.borderColor = UIColor.orangeColor().CGColor
swift example for orange border
You can set the border properties on the CALayer by accessing the layer property of the button.
Add Quartz
#import <QuartzCore/QuartzCore.h>
Set properties of the button:
[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor AnyColor].CGColor];
You should set type of your UIButton to Custom, not Rounded Rect (if you are creating button via IB).
If you are creating UIButton programmatically then you this code:
UIButton *but = [UIButton buttonWithType:UIButtonTypeCustom];
And after that you can make your own customizations.
Related
I have images in an array, and when I display those images on view, it should appear with the border. How do I set the border color?
for(UIImage *img in imagesArray)
{
//for bordercolor
}
First Add QuartzCore.framework framework in your project from Build Phases => Link Binary with Libraries => Add button(+) and after import its file in your class like bellow...
#import <QuartzCore/QuartzCore.h>
and use bellow code for set color..
yourImageView.layer.borderWidth = 2.0;
yourImageView.layer.borderColor= [UIColor redColor].CGColor;
UPDATE:
-(IBAction)lockword:(id)sender {
for (UIImage *img3 in imagesArray) {
UIImageView *imgview1=[[UIImageView alloc]initWithImage:img3];
imgview1.layer.borderWidth = 2.0;
imgview1.layer.borderColor = [UIColor redColor].CGColor;
[imgview1 release];
// your other code write here
// Add this UIImageView as a subview of your view with its frame...
}
}
#import <QuartzCore/QuartzCore.h>
[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];
To allow editing the border color property of your imageview, you need to add Quartzcore framework
Add it from : Link Binary with Libraries option and then write the following code where you want to change the border color :
[imageview.layer setBorderWidth:2.0]; // set the border width to any value you want so that your bordercolor would appear accordingly
[imageview.layer setBorderColor:[[UIColor blueColor].CGColor]; // set the color to whatever background color you want to set to your image
I want to draw an Item that similar as item of iPhone. I have also draw with UIView like this
But the item I want like this :
How can I draw like round buttton?
USE THIS CODE
UIButton *bt = [UIButton buttonWithType:UIButtonTypeCustom];
[bt setFrame:CGRectMake(10, 10, 50, 50)];
[bt setImage:[UIImage imageNamed:#"abc.png" ] forState:UIControlStateNormal];
// Get the Layer of any view
CALayer * l = [bt layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];
// You can even add a border
[l setBorderWidth:4.0];
[l setBorderColor:[[UIColor blueColor] CGColor]];
[self.view addSubview:bt];
Set the corner Radius of your view and insert the label below it.
iPhone supports the cornerRadius property on the CALayer class. Every view has a CALayer instance that you can manipulate.
First of all #import <QuartzCore/QuartzCore.h> and link to the QuartzCore framework to get access to CALayer's headers and properties.Then,
yourView.layer.cornerRadius = 8;
You can make round edges by
yourview.layer.cornerRadius = 8.0; // or other value
I've found the GradientButton class for gradients on a UIButton - however I can't figure out how to get a matching stroke around the button. How do you create a gradient stroke on the button?
You need to use CALayer for this:
[[button layer] setCornerRadius:8.0f];
[[button layer] setMasksToBounds:YES];
[[button layer] setBorderWidth:1.0f];
And dont forget to import:
#import <QuartzCore/QuartzCore.h>
Here is a good tutorial of making tutorial with Core Animation by Matt Long
http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/
I have searched but could not find the reason for this behavior.
I have a UIButton whose image I am setting. Here is how the button should appear. Note that this is just a photoshop of the intended button design:
Essentially, it is a square custom UIButton with a white border and a little surrounding shadow. In the upper right corner, there is a "X" mark, that will be added programmatically as a subview.
Here is the screenshot of the button within the actual app. At this point, I have only added a shadow and the X mark as a subview:
How, when I try to add the white border, here is what it looks like:
It seems that the white border is appearing above the X mark sublayer. I don't know why.
Here is the code that I am using:
// selectedPhotoButton is the UIButton with UIImage set earlier
// At this point, I am adding in the shadow
[selectedPhotoButton layer] setShadowColor:[[UIColor lightGrayColor] CGColor]];
[[selectedPhotoButton layer] setShadowOffset: CGSizeMake(1.0f, 1.0f)];
[[selectedPhotoButton layer] setShadowRadius:0.5f];
[[selectedPhotoButton layer] setShadowOpacity:1.0f];
// Now add the white border
[[selectedPhotoButton layer] setBorderColor:[[UIColor whiteColor] CGColor]];
[[selectedPhotoButton layer] setBorderWidth:2.0];
// Now add the X mark subview
UIImage *deleteImage = [UIImage imageNamed:#"nocheck_photo.png"];
UIImageView *deleteMark = [[UIImageView alloc] initWithFrame:CGRectMake(53, -5, 27, 27)];
deleteMark.contentMode = UIViewContentModeScaleAspectFit;
[deleteMark setImage:deleteImage];
[selectedPhotoButton addSubview:deleteMark];
[deleteMark release];
I don't understand why the border is appearing above the deleteMark subview. Is there any way to get the intended effect?
Thank you!
From Apple's docs on CALayer:
The border is drawn inset from the receiver’s bounds by borderWidth. It is composited above the receiver’s contents and sublayers and includes the effects of the cornerRadius property.
In order to get the effect you want, I suggest you put the image into an own subview/sublayer and set that sublayer's borderWidth property.
You can set the layer's zPosition to -1. That worked for me.
I had similar problem (I wanted to prevent border line to be on top of my subviews)
CAShapeLayer * _border = [CAShapeLayer layer];
_border.strokeColor = [UIColor colorWithRed:119/255.0f green:119/255.0f blue:119/255.0f alpha:1.0f].CGColor;
_border.fillColor = nil;
[bgRoundView.layer addSublayer:_border];
_border.path = [UIBezierPath bezierPathWithRoundedRect:bgRoundView.bounds cornerRadius:20.f].CGPath;
i'm creating a button programmaticly for an iPad application. when i see the button, there looks to be a shadow type thing below it. what is it and how can i get rid of it?
here is the code that creates it:
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.titleLabel.font = [UIFont fontWithName:#"Trebuchet MS" size:12];
[myButton setTitle:#"test" forState:UIControlStateNormal];
myButton.frame = CGRectMake(0, 0, self.leftScrollView.frame.size.width, 50);
UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"gear12.png"]];
[myButton addSubview:myImageView];
[self.leftScrollView addSubview:myButton];
UPDATE:
ok, i notice i only get that effect when its in my scrollview. if i add it to the view, no shadow effect.
the top test button, the button is a subview of the view. the bottom button is a subview of the scrollview which is a subview of the view (button/view vs button/scrollview/view).
white section is the view, grey is the scrollview/view.
UPDATE 2:
as pointed out by robmayor, UIButtons always have that double line effect, just not noticeble when the background color is white. the blue is a view and the grey is the subview scrollview.
This question is old (6 months) but i'have found a solution to delete/mask this bad effect of double lines.
[yourButton.layer setBackgroundColor: [[UIColor blackColor]CGColor]];
[yourButton.layer setBorderWidth:1.0f];
[yourButton.layer setBorderColor:[[UIColor blackColor]CGColor]];
[yourButton.layer setShadowOpacity:0.1f];
[yourButton.layer setCornerRadius:10];
UIColor selected is depending of the current background of your view.
Result :
On iPads, a rounded-rect UIButton always draws a white line along its bottom edge. You can't see that white line if the button's superview is white, but it's still there.
You have a few options:
Make the superview white. This is the easiest but you might not like the way it looks.
Make some rounded rect images in your favorite image editor. Set the button type to custom and set your rounded rect images as the button's images.
Make a subclass of UIButton and override its drawRect: method.
Set the button type to custom and use the button's layer properties (button.layer.backgroundColor, button.layer.borderColor, button.layer.borderWidth, button.layer.cornerRadius) to give the button a rounded rect appearance. You'll have to update button.layer.backgroundColor when the button is touched if you want it to turn blue like a normal one does. (Actually a normal one uses a blue gradient.)
Replace [UIButton buttonWithType:UIButtonTypeRoundedRect] with:
UIButton *myButton = [UIButton new];
or:
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
You want to have your customized button. You can still make it with rounded corners if needed.