I have a UIButton with no text and have 2 images I'd like to use (one for normal state and the other for selected state). The images are smaller than the button size.
How do I ensure that neither of the images are scaled when the button is drawn? Setting the imageView properties only change the scale correctly for normal state but not for selected.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:imageNormal forState:UIControlStateNormal];
[button setImage:imageSelected forState:UIControlStateSelected];
// this shows the correct scale in normal mode but not when button is tapped
button.imageView.contentScaleFactor = 1.0;
button.imageView.contentMode = UIViewContentModeCenter;
Assuming you have the image height and width you could do this:
int topBottom = (button.frame.size.height - imageHeight) / 2;
int leftRight = (button.frame.size.width - imageWidth) / 2;
button.imageEdgeInsets = UIEdgeInsetsMake(topBottom,leftRight,topBottom,leftRight);
And then you don't need to set the contentMode/scalefactor.
Related
I have two UIButtons in my app, which are custom buttons with background images, so they look like two dice. When my app is run on something not-iPhone 5 (not 4.0 inch screen) I want the to resize the buttons. I already have the code that checks for non-iPhone 5 devices(and it works), I just need to know how to change the size of the UIButtons.
I have tried lots of answers for similar questions, but so far I have not written any code that actually changes the size of my UIButtons.
I have written something like this in the "viewDidLoad" inside my "check-if-screen-is-non-iPhone-5"-statement:
button.frame = CGRectMake(90, 200, 100, 100);
The answer will depend on whether you're using Interface Builder or creating yoru button programatically. Most likely, you want to set the "content mode" of the button's imageView; then update the button's frame.
Here is an example:
UIImage *image = [UIImage imageNamed:#"close"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height);
button.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[button.imageView setContentMode:UIViewContentModeScaleAspectFit];
[button setImage:image forState:UIControlStateNormal];
Good luck.
I tried tintColor = [UIColor redColor] and it does the job, but it only show the expected color when the button is being pressed.
In Coloration of UIButtons of type UIButtonTypeRoundedRect they answer the same question but you need an image to implement it, is there any way to do it without an image?
Here is what i want: image
Here is what i'm getting using images: image
Remember... NO IMAGES!
well using an image is one way of doing it, but i guess you already clear that in your question that you do not wish to use an image. here is button that i created and colored programmatically.
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(100, 100, 100,50);
[btn setTitle:#"Hello" forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor colorWithRed:128.0/255.0f green:0.0/255.0f blue:0.0/255.0f alpha:0.7]];
btn.frame = CGRectMake(100.0, 100.0, 120.0, 50.0);//width and height should be same value
btn.clipsToBounds = YES;
btn.layer.cornerRadius = 20;//half of the width
btn.layer.borderColor=[UIColor redColor].CGColor;
btn.layer.borderWidth=2.0f;
[self.view addSubview:btn];
you can change the [UIColor ColorWithRed: wo whatever you want or even use [UIColor redColor] or any other things you want to do with this.
here is a screen shot:
adding a background color to rounded button is not possible, change the type of the button to custom and then use quartz core to set a round button. so add that to your project and import it in the .m and it should work. hope this works for you man.
to change the button to something similar to the image you showed change the frame to :
btn.frame = CGRectMake(50.0, 100.0, 200.0, 50.0);
and change the radius to :
btn.layer.cornerRadius = 7;
that should do it.
You can create a method to generate an UIImage from a UIColor and then set the returned image as the background of the button, for example:
- (UIImage *)imageWithColor:(UIColor *)color {
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
UIImage *image = [self imageWithColor:[UIColor colorWithRed:151.0/255.0
green:36.0/255.0
blue:40.0/255.0
alpha:1.0]];
[self.button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self.button setBackgroundImage:image forState:UIControlStateNormal];
self.button.layer.cornerRadius = 6.0;
self.button.layer.borderWidth = 1.0;
self.button.layer.borderColor = [UIColor darkGrayColor].CGColor;
self.button.clipsToBounds = YES;
Using this I get
here's how I should do it:
download a button image from the internet or create an image yourself, to make it look like you want it to look like. Photoshop might be your best shot for this. make sure you have a transparent background and save it as a .png.
then add it to your xcode project. to make the button:
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundImage:[UIImage imageNamed:#"yourImage.png"] forState:UIControlStateNormal];
[btn addTarget:self action:#selector(buttonAction)
forControlEvents:UIControlEventTouchDown];
[btn setTitle:#"Use it!" forState:UIControlStateNormal];
btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
btn.titleLabel.font = [UIFont systemFontOfSize:20];
btn.frame = CGRectMake(position and size of your button);
[self.view addSubview:btn];
yourImage.png needs to be replaced with the name of your image.
The buttonAction is the action your button performs when it's tapped. if you just add:
- (void) buttonAction
{
}
anywhere in your file, anything you added between those brackets will be performed.
Make sure the size of your button is the same as the size of your CGRect, to make sure it doesn't look stretched out or anything you don't want it to look like.
If you have any questions, feel free to ask them.
Hope this helped you
I want to create a round circular button. This button should look like a circle.
This code gives round rectangular button.
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(100, 100, 100, 30);
UIImage *image = [UIImage imageNamed:#"01.png"];
[button setImage:image forState:UIControlStateNormal];
[image release];
I figured out how to create a rounded rectangular button but I want to create a round circle button. What do I need to change?
Tested Code:
.h
#import <QuartzCore/QuartzCore.h>
-(void)roundButtonDidTap:(UIButton*)tappedButton;
.m
#define ROUND_BUTTON_WIDTH_HEIGHT YourButtonWidthToBeSetHere
-(void)roundButtonDidTap:(UIButton*)tappedButton{
NSLog(#"roundButtonDidTap Method Called");
}
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"TimoonPumba.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(roundButtonDidTap:) forControlEvents:UIControlEventTouchUpInside];
//width and height should be same value
button.frame = CGRectMake(0, 0, ROUND_BUTTON_WIDTH_HEIGHT, ROUND_BUTTON_WIDTH_HEIGHT);
//Clip/Clear the other pieces whichever outside the rounded corner
button.clipsToBounds = YES;
//half of the width
button.layer.cornerRadius = ROUND_BUTTON_WIDTH_HEIGHT/2.0f;
button.layer.borderColor=[UIColor redColor].CGColor;
button.layer.borderWidth=2.0f;
[self.view addSubview:button];
Result
Geometry in this concept
Storyboard Option (should apply to Swift or ObjC) -
If you prefer to work in Storyboards, there's another option.
First, set the width and height to be the same value to make a perfect square.
Second, type in the following attributes. IMPORTANT- make the value of your layer.cornerRadius half the size of your width.
Then, when you run the app, your button will be round.
Try this, it worked for me. It will make your button or any view in circular shape only if you have taken it in square i.e width should be equals to height.
yourButton.layer.cornerRadius = yourButton.bounds.size.width/2;
In Xcode 7.0.0 on IOS 8 this code works perfectly for me.
Provided the length and height of button frame is same.
myButton.clipsToBounds = YES;
myButton.layer.cornerRadius = myButton.layer.frame.size.width/2;
UIButton *myButton=[UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame = CGRectMake(50,50,30,30);
[myButton addTarget:self action:#selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
[myButton setImage:[UIImage imageNamed:#"sarabjit.png"] forState:UIControlStateNormal];
[self.view addSubView:myButton];
Using Swift like the answer of
Vijay-Apple-Dev.blogspot :
let ROUND_BUTTON_WIDTH_HEIGHT YourButtonWidthToBeSetHere
override func viewDidLoad() {
super.viewDidLoad()
var button = UIButton.buttonWithType(.Custom) as UIButton
button.frame = CGRectMake(160, 100, ROUND_BUTTON_WIDTH_HEIGHT, ROUND_BUTTON_WIDTH_HEIGHT)
button.layer.cornerRadius = ROUND_BUTTON_WIDTH_HEIGHT / 2.0
button.layer.borderColor = UIColor.redColor().CGColor
button.layer.borderWidth = 2.0
button.setImage(UIImage(named:"TimoonPumba.png"), forState: .Normal)
button.addTarget(self, action: "roundButtonDidTap", forControlEvents: .TouchUpInside)
button.clipsToBounds = true
view.addSubview(button)
}
func roundButtonDidTap() {
NSLog(#"roundButtonDidTap Method Called");
}
override func viewDidLoad() {
super.viewDidLoad()
let facebookButton = UIButton()
facebookButton.frame = CGRectMake(30, 200, 150, 150)
facebookButton.layer.cornerRadius = 75
facebookButton.layer.masksToBounds = true
self.view.addSubview(facebookButton)
}
** To make round button you have to give same height and same width for the button and half of the value should be given to corner radius **
Step 1. Use [UIButton buttonWithType:UIButtonTypeCustom] to create the button.
Step 2. CGRectMake(100, 100, 100, 30) is a rectangular shape. Maybe you want to use the size of your image instead, like this:
CGRect frame = CGRectMake(100, 100, 0, 0);
frame.size = img.size;
button.frame = frame;
a round-rect button with circular image does not satisfy the need of a round Button. Nor even if they are made custom buttons. This is because, This buttons will respond to taps even outside the circular part ( which is a just a .png image ) if it is inside the button size range and not clipped.
The first answer(and only the first one by #vijay-apple-dev) given here is correct. You need to clip the boundary of the button frame in order to stop it responding just outside the image
make a
[UIButton buttonWithType:UIButtonTypeCustom];
and try to use the corner radius property
button.layer.cornerRadius = button.bounds.size.width/2 / 2.0
I've got a little problem as seen below:
The cell has a background color, and the button doesn't. Still, it doesn't give me rounded edges, but corners. How can I fix that?
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[[meerKnop layer] setCornerRadius:8.0f];
meerKnop.backgroundColor = [UIColor whiteColor];
meerKnop.frame = CGRectMake(11.0, (60.0 + (teller * 52.5)), 299.0, 50.0);
...
[meerKnop addSubview:locationLabel];
...
[meerKnop addSubview:categoryLabel];
UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(handleSwipe:)];
swipe.direction = UISwipeGestureRecognizerDirectionRight;
[meerKnop addGestureRecognizer:swipe];
[swipe release];
[meerKnop addTarget:self action:#selector(alertPressed:) forControlEvents:UIControlEventTouchUpInside];
meerKnop.tag = incId;
[cell addSubview:meerKnop];
Try setting the corner radius of the layer of the button.
[button.layer setCornerRadius:10];
Remember to import if you are using layer property
Also, use:
[[button layer] setMasksToBounds:YES];
With this code the layer gets a corner radius of 10.0 and the -setMasksToBounds: tells the button’s layer to mask any layer content that comes below it in the layer tree. This is necessary in order for the layer to mask off the rounded corners.
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeRoundedRect];
Change this to:
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeCustom];
Edited:
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeCustom];
[[meerKnop layer] setCornerRadius:8.0f];
meerKnop.backgroundColor = [UIColor redcolor];
meerKnop.frame = CGRectMake(11.0, (60.0 + (teller * 52.5)), 299.0, 50.0);
show me where the big white rectangle is appearing? (I hope u have cleared the cell background color).
change the background colour of the button to same as that of cell.. it will take care of the rounded edges as there colour will become same as that of the background. sry i new.. i can think of this way only at the moment.. Hope it helps..
I put a rounded-rect button into table-view footer.
But the button is streached to the left and to the right no matter how I change the BUTTON_WIDTH. But it's height is adjustable.
What's the problem? Below is the code I used.
#define BUTTON_WIDTH 80
#define BUTTON_HEIGHT 45
- (void)viewDidLoad {
CGRect frame = CGRectMake(0, 0, BUTTON_WIDTH, BUTTON_HEIGHT);
// btnSeeResult is decleared in header file
btnSeeResult = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btnSeeResult setTitle:#"Result" forState:UIControlStateNormal];
[btnSeeResult addTarget:self action:#selector(seeResult) forControlEvents:UIControlEventTouchUpInside];
btnSeeResult.frame = frame;
self.tableView.tableFooterView = btnSeeResult;
}
It's because you're setting the button to be the tableView.tableFooterView, so that view's width will always be set to the width of the tableView.
Try using a black UIView as the footer view then adding the button to it, like this:
#define BUTTON_WIDTH 80
#define BUTTON_HEIGHT 45
- (void)viewDidLoad {
CGRect frame = CGRectMake(0, 0, BUTTON_WIDTH, BUTTON_HEIGHT);
// btnSeeResult is decleared in header file
UIButton *btnSeeResult = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btnSeeResult setTitle:#"Result" forState:UIControlStateNormal];
[btnSeeResult addTarget:self action:#selector(seeResult) forControlEvents:UIControlEventTouchUpInside];
btnSeeResult.frame = frame;
// the width (320.0) actually doesn't matter here
UIView *footerView = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 80.0, 320.0)] autorelease];
footerView.backgroundColor = [UIColor clearColor];
[footerView addSubview:btnSeeResult];
self.tableView.tableFooterView = footerView;
}
#SeniorLee as per your question that you left in a comment-
The reason why it wasn't working when you were using the button as the footerview is because the footer view HAS to be the width of the table view. That is why when your button WAS your footerview, it was following the rule that it HAS to be the width of the table.
Now, when you use a regular old UIView, it takes the place of the footerview, and it's width is the same width as the table. Anything you add to that view, then, can be however you want it to be. Does that make sense?
The reason why the height could be changed is because the footerview's height doesn't have the same mandatory stipulations as the width does, so you can change the footer's height all you want, just not the width.