I am trying to use a button in place of the title on a UINavigationBar. I have been successful in getting the button to display with a custom image, but I am having a hard time figuring out how to resize it. I have tried a few things, including:
UIButton *titleButton = [[UIButton alloc]init];
UIImage *settingsButtonImage = [UIImage imageNamed:#"settingsButton2X.png"];
[titleButton addTarget:self action:#selector(settingsButtonPress:) forControlEvents:UIControlEventTouchDown];
[titleButton setBackgroundImage:settingsButtonImage forState:UIControlStateNormal];
[titleButton setFrame:CGRectMake(0, 0, 20, 20)];
self.navigationItem.titleView = titleButton;
This works great, except the resulting image in the navigation bar is only resized in the y-direction, resulting a smooshed appearance (unfortunately I can't post an image to show that because I don't have a reputation - you might be able to see it here: http://i.stack.imgur.com/fNh7O.png)
I can use a 20 x 20px image and it displays correctly, but that looks pixelated on the retina display.
So my main question is: what is the best way to add a button to the title area of a UINavigationBar? What is the best pixel size for an image for this button which will look sharp on both the older iphone screens, and the new retina displays? (clearly there is something about the pixel size of the images that I'm just not grasping - I thought that starting with a 40x40px or 60x60px image would be best).
Thanks for the help!
Why don't you try something like this :-------
UIButton *titleButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 20, 20)];
UIImage *settingsButtonImage = [UIImage imageNamed:#"settingsButton2X.png"];
[titleButton addTarget:self action:#selector(settingsButtonPress:) forControlEvents:UIControlEventTouchDown];
[titleButton setBackgroundImage:settingsButtonImage forState:UIControlStateNormal];
titleButton.center=self.navigationController.navigationBar.center;
titleButton.center=CGPointMake(titleButton.center.x, self.navigationController.navigationBar.frame.size.height/2);
[self.navigationController.navigationBar addSubview:titleButton];
Related
It is looks like a very simple question But i do not know where the mistake is.
I have an navigation bar i am placing a custom nav bar back button
The action is performed through out the "pink" color as shown in the image below
My code is below:
//-------back button start
UIImage *myImage1 = [UIImage imageNamed:#"Back.png"];
UIButton *myButton1 = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton1 setImage:myImage1 forState:UIControlStateNormal];
myButton1.showsTouchWhenHighlighted = YES;
myButton1.frame = CGRectMake(0.0, 3.0, 40,30);
[myButton1 addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithCustomView:myButton1];
self.navigationItem.leftBarButtonItem = leftButton;
//-------back button end
I tried even this way also like "myButton1.frame = CGRectMake(0.0, 3.0, 20,30);"
Even i tried by changing the button width and height also. Then it is decreasing the width of the back button only .
Thanks in advance
You can set your button size as image size.
myButton1.frame = CGRectMake(0.0, 0.0, 30.0,30.0);
And please check that you don't have any shadow and transparency around image.
So the code I have is as follows:
// Create a containing view to position the button
UIView *containingView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 23.5, 21.5)] autorelease];
// Create a custom button with the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"Settings.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(settings) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(-19, -3, 21.5, 21.5)];
[containingView addSubview:button];
// Create a container bar button
UIBarButtonItem *containingBarButton = [[[UIBarButtonItem alloc] initWithCustomView:containingView] autorelease];
self.navigationItem.rightBarButtonItem = containingBarButton;
The issue is that my Settings.png original image size is 21.5, 21.5 and there fore the button is super hard to click. I have to tap really hard in order to trigger the UITouchUpInside to be triggered. This will clearly be rejected if I put it in the app store, as it is not in compliance with apple's HIG. Is there a way around this? I still need to use UIView as the container for the UIButton as I'd like to position it correctly on the UINavigationBar
Try to set a bigger fram to the button like 40,40 and set the content mode to be the center so the image will apear to be in the center.
button.contentMode = UIViewContentModeCenter;
Tell me if that helped
I have a Bar Button Item and I wanna set a background image for it.
Both the button and the background image are set in the xib file.
Here how it looks like:
As you can see the image doesn't covers the whole width of the button.
Now, I tried setting up as background a larger image and here is how the result looks like:
The button gets larger itself and still the image doesn't fits its size.
Anyone any idea of how to make this work?
Try this, it works very well in these cases:
UIImage *btnImg = [UIImage imageNamed:#"myImg.png"];
UIImage *btnGreyImg = [btnImg stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[myBtn setBackgroundImage:btnGreyImg forState:UIControlStateNormal];
Of course, you can write this in one line or two lines, I just wanted to show it clearly...
In my case, I made the outlet of the BarButtonItem as backBack and in viewDidLoad: method I wrote this code:
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
btnBack.frame = CGRectMake(0, 0, 250, 300);
[btnBack setImage:[UIImage imageNamed:#"sample.png"] forState:UIControlStateNormal];
[btnBack addTarget:self action:#selector(callMethod:) forControlEvents:UIControlEventTouchUpInside];
backButton.customView = btnBack;
I hope this is helpful in your case.
I have a UIToolbar which I am trying to put some custom UIBarButtonItems on. However, when I use the code below, the button shows up with NO border.
UIImage *cameraRollButtonImage = [UIImage imageNamed:#"Flash.png"];
UIButton *cameraRollButton = [UIButton buttonWithType:UIButtonTypeCustom];
[cameraRollButton setImage:cameraRollButtonImage forState:UIControlStateNormal];
cameraRollButton.frame = CGRectMake(0.0, 0.0, cameraRollButtonImage.size.width, cameraRollButtonImage.size.height);
// Initialize the UIBarButtonItem
cameraRollButtonItem = [[UIBarButtonItem alloc] initWithCustomView:cameraRollButton];
[cameraRollButtonItem setStyle:UIBarButtonItemStyleBordered];
//Add the Buttons to the toolbar
NSArray *toolbarItems = [NSArray arrayWithObject:cameraRollButtonItem];
[self.cameraTabBar setItems:toolbarItems];
This displays the button just fine, however, there is NO button border (like standard the UIBarButtonItem). So the line [cameraRollButtonItem setStyle:UIBarButtonItemStyleBordered]; doesn't seem to do anything.
Does anyone have any experience with this?
I would like to be able to eventually rotate the image in the button when the device orientation is changed (keeping the toolbar static), so simply adding an image to the UIBarButtonItem doesn't work; I need to get this to work with by using the customView property.
Many thanks!
Brett
Have you considered creating your own button image with a border? You can use it as the backgroundImage of a UIButton:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:_backgroundImage_ forState:UIControlStateNormal];
// So that the button does not gray out when disabled
[button setBackgroundImage:_backgroundImage_ forState:UIControlStateDisabled];
[button setImage:_cameraImage_ forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, 125, 30);
You could then use button with initWithCustomView:.
The PSD file here might give you an overview of how to create your own button.
I must have overlooked something completely obvious?? but my button displays its image and size correctly, but I simply can't get the Title to show up.
I did a really simple test, the Title does not even show up when I do this:
CGRect frameBtn = CGRectMake(160.0f, 150.0f, 144.0f, 42.0f);
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"left_halfscreen_button.png"] forState:UIControlStateNormal];
[button setTitle:#"Hello" forState:UIControlStateNormal];
[button setFrame:frameBtn];
NSLog(#"Title:%#", [button currentTitle]);
//prints "Title:Hello
[self addSubview:button];
I have a factory class that generates custom buttons for me and I thought I messed some detail up there, so I moved the above code directly into my UIView, the title is still blank.
Is this a bug or am I simply missing something right in front of my eyes.
Thank you for the extra set of eyes:)
Image overrides title, you need to make the image a background image to show the title.
[button setBackgroundImage:[UIImage imageNamed:#"left_halfscreen_button.png"]
forState:UIControlStateNormal];
I just hab spome quite similar problem... Just set the title color, I guess the current one is white ;)
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
I found the problem!
It's not Image overriding the title. It is being push off frame by the image.
Try use this:
[btn setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -img.size.width, 0.0, 0.0 )];
Hope it helps!
When you use UIButton, button uses some built-in size for its frame.
You should set the frame:
button.frame = CGRectMake(0, 0, width, height);
or even better and comfortable:
[button sizeToFit];
I had a similar problem that the title was not shown. I forgot to set the frame property:
//set the position of the button
button.frame = CGRectMake(100, 170, 100, 30);