uibutton with image - iphone

I am having a button using IB. Now i want to add an image to the button programmatically. how can I set the button's size of image's size like we do in IB Layout -> Size to Fit . I want to do it programmatically
Thanks..

You can add an image to the button using UIButton's setImage:forState: method and then you set the content sizing using UIView's contentMode property.
An example would look like this:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *img = [UIImage imageNamed:#"myImage.png"];
button.frame = CGRectMake(20, 100, img.size.width, img.size.height);
[button setImage:img forState:UIControlStateNormal];
[button setImage:img forState:UIControlStateHighlighted];
[button setImage:img forState:UIControlStateSelected];
button.contentMode = UIViewContentModeScaleToFill; //Look up UIViewContentMode in the documentation for other options
[self.view addSubview:button];

[yourButton setImage:yourImage forState:UIControlStateNormal];
yourButton.contentMode = UIViewContentModeScaleToFill;
where the the values for contentMode can be any one of the below
typedef enum {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
} UIViewContentMode;
I think this could help you

Sample Code,
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *img1 = [UIImage imageNamed:#"image1.png"];
btn.frame = CGRectMake(20.0 , 270.0, img1.size.width, img1.size.height);
[btn setImage:img1 forState:UIControlStateNormal];
UIImage *img2 = [UIImage imageNamed:#"image2.png"];
[btn setImage:img2 forState:UIControlStateHighlighted];
[btn setImage:img2 forState:UIControlStateSelected];
[btn addTarget:self action:#selector(Action:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];

Use the sizeToFit method of UIButton (UIView actually).

Related

Unable to set Title of UIButton

I am new to iPhone,
xpos=30;
ypos=40;
for(int i=0;i<[MyArray count];i++)
{
if(i!=0)
{
if (i%4==0)
{
ypos+=180;
xpos=30;
}
else
{
xpos+=200;
}
}
button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(xpos, ypos, 110.0, 130.0);
[button setImage: [UIImage imageNamed:#"ibook2.png"] forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(ypos, xpos, 0.0, 0.0)];
[button setTitle:[NSString stringWithFormat:#"%#", [MyArray objectAtIndex:i]] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[self.view addSubview:button];
}
i am able to see button but unable to see my text on the UIButton.
Any help will be appreciated.
Please set buttons background image.You have set buttons image.
Please use this:
[button setBackgroundImage:[UIImage imageNamed:#"blue_button.png"]
forState:UIControlStateNormal];
For Wrapping button title User:
[button setTitle:#"Test button name 123" forState:UIControlStateNormal];
button.titleLabel.numberOfLines=2;
button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
You can't see the text because you have used setImage: function of button. At a time you can display image or button on text but you can add image as a background so you can see both image and tittle. In short set image as a background.
[btn setBackgroundImage:[UIImage imageNamed:#"imageName"] forState:UIControlStateNormal];
Please also remove the line of setting inset.
Rather then setting
[button setImage: [UIImage imageNamed:#"ibook2.png"] forState:UIControlStateNormal]; // This will not allow you to set Button title.
You have to use :
[button setBackgroundImage: [UIImage imageNamed:#"ibook2.png"] forState:UIControlStateNormal]; // This will allow you to set title along background button image.
if you image is too big then it will only show the image and text get truncated due to image as text will be visible after image, try using setBackground image or try small resolution image or setImageEdgeInsets .

rightbarbuttonitem not showing up?

NOTE: I can get this to work by switching leftbarbuttonitem to rightbarbutton item in my barbutton and barbutton2 methods. I'm just curious to know why it won't work normally!
For some strange reason, my leftbarbuttonitem is showing, but my rightbarbuttonitem just never pops up! Here's my code
-(void)barButton {
image = [UIImage imageNamed:#"BBut.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage: [image stretchableImageWithLeftCapWidth:7.0 topCapHeight:0.0] forState:UIControlStateNormal];
[button setBackgroundImage: [[UIImage imageNamed: #"BBut.png"] stretchableImageWithLeftCapWidth:7.0 topCapHeight:0.0] forState:UIControlStateHighlighted];
[button addTarget:self action:#selector(showlocations:) forControlEvents:UIControlEventTouchUpInside];
button.frame= CGRectMake(3.0, 0.0, image.size.width+1, image.size.height+0);
UIView *v=[[UIView alloc] initWithFrame:CGRectMake(3.0, 0.0, image.size.width+1, image.size.height) ];
[v addSubview:button];
UIBarButtonItem *modal = [[UIBarButtonItem alloc] initWithCustomView:v];
self.navigation.leftBarButtonItem = modal;
-(void)barButton2 {
image2 = [UIImage imageNamed:#"Refresh.png"];
UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
[button2 setBackgroundImage: [image2 stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0] forState:UIControlStateNormal];
[button2 setBackgroundImage: [[UIImage imageNamed: #"Refresh.png"] stretchableImageWithLeftCapWidth:0.0 topCapHeight:0.0] forState:UIControlStateHighlighted];
// [button2 addTarget:self action:#selector(viewDidLoad) forControlEvents:UIControlEventTouchUpInside];
button2.frame= CGRectMake(281.0, 5.0, image2.size.width, image2.size.height);
UIView *v2=[[UIView alloc] initWithFrame:CGRectMake(281.0, 5.0, image2.size.width, image2.size.height) ];
[v2 addSubview:button2];
UIBarButtonItem *refresh = [[UIBarButtonItem alloc] initWithCustomView:v2]; self.navigation.rightBarButtonItem = refresh;
NSLog(#"THE ACTION HAS BEEN RECIEVED!"); }
In my ViewDidLoad Method, I have this:
[self barButton2];
[self barButton];
The action does go through and I do receive my NSLog method. Does anyone know why this is happening? The Left Bar Button always shows up and if I change the the first barbutton to rightbarbuttonitem and change the barbutton2 to leftbarbutton item, and then change the CGRect coords, it works, and that's what I'm using right now to get it to work, but why is this happening? Thanks in advance.
You don't see the right button because you are drawing it outside the screen.
The button2 X coordinate is set to 281.0 and its parent view X coordinate is also set at 281.0. As a result your button is in x = 562, meaning it is outside the screen.
Set your button2 X coordinate to 0 and see if that helps:
button2.frame= CGRectMake(0.0, 5.0, image2.size.width, image2.size.height);
You seem to be creating a new view with each action and adding a button. So, you never see both buttons. You will need to access the same view in both the actions to make sure you add two button subviews.

Override Apple's UIButton Highlight

I have a button, where I set its image and its selected & highlighted state image as follows:
UIImage *buttonImage = [UIImage imageNamed:#"btn_learn_pad"];
self.learnMoreButton = [[UIButton alloc] initWithFrame:CGRectMake(50, 0, buttonImage.size.width, buttonImage.size.height)];
[self.learnMoreButton setImage:buttonImage forState:UIControlStateNormal];
[self.learnMoreButton setImage:[UIImage imageNamed:#"btn_learn_focus_pad"] forState:UIControlEventTouchUpInside | UIControlStateHighlighted | UIControlStateSelected];
[self.learnMoreButton addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
This still overlays Apple's darker alpha on top of the image upon selection. How do I remove this effect?
Thanks
In stead of setImage:forState use setBackgroundImage:forState:
[self.learnMoreButton setBackgroundImage:[UIImage imageNamed:#"btn_learn_pad"] forState:UIControlStateNormal];
[self.learnMoreButton setBackgroundImage:[UIImage imageNamed:#"btn_learn_focus_pad"] forState:UIControlStateHighlighted];

UIButton with rounded corners using square setBackgroundImage

So I create a button. I want it to have rounded corners with out making rounded .png files
I can set the background image ok. I can round the corners ok. However, when I set the background Image the rounded corners go away.
I did this once before a long time ago but can not seem to get it working again. How can this be done?
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[button1 addTarget:self action:#selector(goSpecials)
forControlEvents:UIControlEventTouchUpInside];
[button1 setTitle:#"Specials" forState:UIControlStateNormal];
button1.titleLabel.font = [UIFont fontWithName:#"Arial-BoldMT" size:(15.0)];
[button1 setTitleColor:[self colorWithHexString:buttonColor] forState:UIControlStateNormal];
button1.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: #"button.png"]];
//[button1 setBackgroundImage:[UIImage imageNamed:#"button.png"] forState:UIControlStateNormal];
button1.frame = CGRectMake(20.0, 232.0, 135.0, 32.0);
button1.layer.borderColor = [UIColor blackColor].CGColor;
button1.layer.borderWidth = 0.5f;
button1.layer.cornerRadius = 8.0f;
[self.view addSubview:button1];
button.png:
Add the maskToBounds property to your button.
button1.layer.masksToBounds = YES;

how to change the slider thumb image?

I have to create my own customized slider. I am trying to change the thumb image,background of the slider and in the some test like slide to unlock.
I have tried like this but its not working
CGRect frame = CGRectMake(0.0, 219.0, 323.0, 20.0);
UISlider *myslider = [[UISlider alloc] initWithFrame:frame];
[myslider addTarget:self action:#selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[myslider setBackgroundColor:[UIColor clearColor]];
[myslider setThumbImage: [UIImage imageNamed:#"sliderThumb#2x.png"] forState:UIControlStateNormal];
myslider.minimumValue = 0.0;
myslider.maximumValue = 50.0;
myslider.continuous = YES;
myslider.value = 15.0;
[self.view addSubview:myslider];
But in this the size of thumb pic is very big.How to reduce the thumb pic size....and how to give the slider background and text.Please help me out
[[UISlider appearance] setThumbImage:[UIImage imageNamed:#"ball.png"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:[[UIImage imageNamed:#"volume_slider_oragne.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];
[slider setMaximumTrackImage:[[UIImage imageNamed:#"volume_strap_gry.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];
To set the background colour of the slider, I would presume that you can set the property backgroundColor to [UIColor colorWithPatternImage:[UIImage imageNamed:#"slider background"]];
Also, images that have the appending ending of #2x, mean that they are twice the size of the standard copy. This is for retina displays only, you should not use it in a UIImage on a standard (legacy) device. Try setting the image name to #"sliderThumb.png" instead, as long as you have the legacy copy of the image.
Just provide a different size of sliderThumb#2x.png and all we work itself out.