How to give style in left nav bar button in iphone - iphone

I added 2 button with images in top left navigation bar. But I am getting problem in its style. Here is my screenshot of button. And this is code of button which I have written in application.
UIView *viewButtons = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 150, 32)];
UIButton *button1 = [[UIButton alloc] init];
button1.frame=CGRectMake(0,0,40,35);
[button1 setBackgroundImage:[UIImage imageNamed: #"remainder.png"] forState:UIControlStateNormal];
[button1 addTarget:self action:#selector(sortByremainder) forControlEvents:UIControlEventTouchUpInside];
[viewButtons addSubview:button1];
UIButton *button2 = [[UIButton alloc] init];
button2.frame=CGRectMake(45,0,60,35);
[button2 setBackgroundImage:[UIImage imageNamed: #"like_symbol.jpg"] forState:UIControlStateNormal];
[button2 addTarget:self action:#selector(sortByMostFaved) forControlEvents:UIControlEventTouchUpInside];
[viewButtons addSubview:button1];
[viewButtons addSubview:button2];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:viewButtons];
[viewButtons release];
But i want my button style should be like this image. I want to keep images in button but below screen is more specific with button. It has border and convex area.

For that you need to use grayscale images and that would look better. See example like attached.
You need to use UIBarButtonItem and set this type of images in that and that assign that UIBarButtonItem to self.navigationItem.leftBarButtonItem.
Also, Use BarButtonItemStyle Border like below so you will get as you want.
UIBarButtonItem *btnSetting = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"setting.png"] style:UIBarButtonItemStyleBordered target:self action:#selector(setting:)];
self.navigationItem.rightBarButtonItem = btnSetting;

Related

Making custom back button for navigation bar

I have made at least 10 buttons for my navigation bar, but it never seems to work right.
The rounded edges get pixelated. I cant have that in an app, so can anyone tell me how to make a good icon that looks like an apple one? Also what is the proper size? The code in the app for the button is
UIButton *backbtn = [UIButton buttonWithType:UIButtonTypeCustom];
backbtn.frame = CGRectMake(0, 0, 55, 30);
[backbtn setBackgroundImage:[UIImage imageNamed:#"button.png"] forState:UIControlStateNormal];
[backbtn addTarget:self action:#selector(goBackOne) forControlEvents:UIControlEventTouchUpInside]; forState:UIControlStateNormal ];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backbtn];//set new button
self.navigationItem.hidesBackButton = YES;//hide original back button
Try this code:
UIImage *backButtonImage = [UIImage imageNamed:#"backButton.png"];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setImage:backButtonImage forState:UIControlStateNormal];
backButton.frame = CGRectMake(0, 0, backButtonImage.size.width, backButtonImage.size.height);
[backButton addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBackBarItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.leftBarButtonItem = customBackBarItem;
and, the back method:
-(void)back {
[self.navigationController popViewControllerAnimated:YES];
}
The code above just set the image for normal state. You can also set highlighted state for a better appearance. Add some codes Like:
UIImage *backButtonImageHighlighted = [UIImage imageNamed:#"backButtonHighlighted.png"];
[backButton setImage:backButtonImageHighlighted forState:UIControlStateHighlighted];

How can I display a UIBarButtonItem without a border?

In IB I can select a UIBarButtonItem, set it to Plain, Custom and apply an Image and it looks fine in a UIToolbar or UINavigationBar.
When I try to do this in code, I get a border:
backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"arrowBack"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(backButtonClicked:)];
How can I get a UIBarButtonItem without a border? I want it to be Plain and Custom
This works for me (example for the leftButton):
UIButton *bt=[UIButton buttonWithType:UIButtonTypeCustom];
[bt setFrame:CGRectMake(0, 0, 15, 30)];
[bt setImage:[UIImage imageNamed:#"backBT"] forState:UIControlStateNormal];
[bt addTarget:self action:#selector(popViewController:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftButton=[[UIBarButtonItem alloc] initWithCustomView:bt];
self.navigationItem.leftBarButtonItem=leftButton;

iPhone . UIToolbar not working with some buttons

I have a UIToolbar.
If I create a UIBarButton like this, it works:
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:iOB style:UIBarButtonItemStylePlain target:self action:#selector(myStuff)];
[button setTitle:#"Hi"];
If I create the UIBarButton like this, cause I want it to be colored:
UIImageView *vUP = [[UIImageView alloc] initWithImage:iUP];
UIBarButtonItem *UPButton = [[UIBarButtonItem alloc] initWithCustomView:vUP];
[UPButton setAction:#selector(anotherStuff)];
[UPButton setTitle:#"Hi";
[UPButton setTarget:self];
[vUP release];
The button shows, WITHOUT title and will doesn't respond to any touch...
am I missing something?
UIImage* image3 = [UIImage imageNamed:#"plain_btn-75-30.png"];
CGRect frameimg = CGRectMake(0, 0, image3.size.width, image3.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(backButtonPress:)forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
[someButton setTitle:#"Back" forState:UIControlStateNormal];
someButton.titleLabel.font = [UIFont fontWithName:#"Helvetica" size:13];
[someButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
UPButton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
If you want image and title both then image must be set as a background image with title.
Use a UIButton instead of the UIImageView as a UIImageView does not respond to touch events.
You will, under no circumstance get a title as you provided a custom view.

Can't see my navigationbar custom button, but it is clickable

I want to add a custom button (to the right) in my navigation bar.
I have the following code in my "viewDidLoad" function :
UIButton *audioBtn = [[UIButton alloc] init];
[audioBtn setTitle:#"Play" forState:UIControlStateNormal];
UIImage *buttonImage = [UIImage imageNamed:#"play.png"];
[audioBtn setBackgroundImage:buttonImage forState:UIControlStateNormal];
[audioBtn addTarget:self action:#selector(toggleAudioPlayback:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithCustomView:audioBtn];
self.navigationItem.rightBarButtonItem = button;
[audioBtn release];
[button release];
I can't see the button in my navigation bar, but if I click to the right (where the button is supposed to be), it triggers the function "toggleAudioPlayback", so the only problem is that I don't see the button!
I tried with different image, setting a background color, nothing works...
By the way, I use this image somewhere else in the code, and I see it (on a custom button, but not in a navigationBar).
Help me please!
Make your life easier and instead of a customView just use a UIBarButtonItem with a custom image:
UIBarButtonItem *audioBtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"play.png"] style:UIBarButtonItemStylePlain target:self action:#selector(toggleAudioPlayback:)];
self.navigationItem.rightBarButtonItem = audioBtn;
[audioBtn release];
UPDATE
Since you have indicated you want your button to not have a border, then you will need to use a CustomView afterall, but I have modified your code to make this work (the key difference is the assigning of the frame, which is set to the size of the image, but you could set it to a custom size to have the image centered):
UIButton *audioBtn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *playImg = [UIImage imageNamed:#"play.png"];
[audioButton setBackgroundImage:playImg forState:UIControlStateNormal];
[audioButton setBackgroundImage:playImg forState:UIControlStateHighlighted];
audioBtn.frame = CGRectMake(0,0,playImg.size.width,playImg.size.height);
[audioBtn addTarget:self action:#selector(toggleAudioPlayback:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithCustomView:audioBtn];
self.navigationItem.rightBarButtonItem = button;
[audioBtn release];
[button release];
Instead of [[UIButton alloc] init] try the +buttonWithType: method on UIButton.

UIButton as UINavigationbar button

I have a Tab bar application. and in one of the tab bars I have a navigation contorller.
Im trying to set a UIButton with an image as the right button the navigation bar.
UIButton *refreshButton = [[UIButton alloc] init];
[refreshButton setImage:[UIImage imageNamed:#"refresh_icon.png"] forState:UIControlStateNormal];
[refreshButton addTarget:self action:#selector(refreshSection) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:refreshButton];
//[rightButton setImage:[UIImage imageNamed:#"refresh_icon.png"]]; << DOESN'T WORK EITHER
self.navigationItem.rightBarButtonItem = rightButton;
[refreshButton release];
[rightButton release];
but the image doesn't show up. I get an invisible button.
EDIT:
I want the button style to be plain or background to be transparent, so that only the image shows. Hence I am using a UIbutton instead of using a UIBarButton directly.
You don't have to create a UIButton and use it as custom view in the UIBarButtonItem. You can create a UIBarButtonItem directly with an image:
UIImage *myImage = [UIImage imageNamed:#"myImage.png"];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:myImage style:UIBarButtonItemStyleBordered target:self action:#selector(refreshSection)];
self.navigationItem.rightBarButtonItem = button;
[button release];
--
Updated, according to comments
Use a UIImageView as custom view in the UIBarButtonItem:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myImage.png"]];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:imageView];
self.navigationItem.rightBarButtonItem = rightButton;
[imageView release];
[rightButton release];
--
Updated
Tried the last approach and while this does visually look like you want it to, I can't seem to get it to handle taps. Although the target and action has been set.
--
Final update
I've gotten your initial code in the question up & running. The reason the image is not showing, is because you haven't set the frame of the button. Once you set the frame, the image is shown in the navigation bar.
Here's my snippet I used & tested:
UIImage *myImage = [UIImage imageNamed:#"paw.png"];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setImage:myImage forState:UIControlStateNormal];
myButton.showsTouchWhenHighlighted = YES;
myButton.frame = CGRectMake(0.0, 0.0, myImage.size.width, myImage.size.height);
[myButton addTarget:self action:#selector(tapped:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:myButton];
self.navigationItem.rightBarButtonItem = rightButton;
[rightButton release];
[myButton release];
Note: I have set the showsTouchWhenHighlighted property of the UIButton to visually hightlight the button when it is pressed.
I ended up doing this
UIButton *refreshButton = [[UIButton alloc] initWithFrame:CGRectMake(292, 9, 27, 27)];
[refreshButton setImage:[UIImage imageNamed:#"refresh_icon.png"] forState:UIControlStateNormal];
[refreshButton addTarget:self action:#selector(refresh) forControlEvents:UIControlEventTouchUpInside];
[self.navigationController.navigationBar addSubview:refreshButton];
[refreshButton release];
It works fine now but I am not really sure if this is the right way of doing it.