I have a UINavigationBar with a custom UIBarButtonItem (which uses a UIButton as its custom view). The problem is: the active area of the custom button is much too large, if I tap at least 40 pixels outside the button, it still gets registered as a tap on the button. This results in accidental taps. How can I reduce the active area on these buttons?
I noticed this weirdness too. I found that using a container UIView fixes this. For example:
UIButton *menuButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButton addTarget:self action:#selector(revealMenu:) forControlEvents:UIControlEventTouchUpInside];
[menuButton setImage:[UIImage imageNamed:#"menuIcon"] forState:UIControlStateNormal];
UIView *menuButtonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[menuButtonContainer addSubview:menuButton];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:menuButtonContainer];
I think u haven't changed the size of the custom button...
Try doing this...
In Interface builder select the button which u want to reduce the active area and then press "Command+3" or "tools --> Size inspector" in that reduce 'W' and 'H' values...
this will make the custom button smaller and so the active area also get reduced...
~Raviraja
Are you adding the button through Interface Builder or are you doing it programmatically? Either way, you can use this line of code to set the bounds of the image:
yourButton.bounds = CGRectMake( 0, 0, yourImage.size.width, yourImage.size.height );
If you want a full example, here's one I used in one of my apps:
UIImage *image = [UIImage imageNamed:#"audio-off.png"];
UIButton *myMuteButton = [UIButton buttonWithType:UIButtonTypeCustom];
myMuteButton.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[myMuteButton setImage:image forState:UIControlStateNormal];
[myMuteButton addTarget:self action:#selector(mute) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *myMuteBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:myMuteButton];
navBar.leftBarButtonItem = myMuteBarButtonItem;
[myMuteBarButtonItem release];
Related
I've subclassed UIBarButtonItem and am trying to make a button which dispays a refresh image normally, but an activity spinner when loading. The problem I have is I can't get the bordered style to display a custom view inside. It just doesn't appear.
This is my code (from my UIBarButtonItem subclass's constructor):
self = [super initWithTitle:#"" style:UIBarButtonItemStyleBordered target:self action:nil];
UIView *viwInner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 24,24)];
[self.customView addSubview:viwInner];
self.btnStandard = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btnStandard setFrame:CGRectMake(0, 0, 24,24)];
UIImage *initialImage = [[UIImage imageNamed:#"refresh_24.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateNormal];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateHighlighted];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateSelected];
[self.btnStandard addTarget:self action:#selector(didTapInitialButton:) forControlEvents:UIControlEventTouchUpInside];
[viwInner addSubview:self.btnStandard];
self.btnLoading = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btnLoading setFrame:CGRectMake(0, 0, 24,24)];
self.loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActionSheetStyleBlackOpaque];
[self.loadingView setHidesWhenStopped:true];
[self.loadingView stopAnimating];
[self.btnLoading addSubview:self.loadingView];
[self.btnLoading addTarget:self action:#selector(didTapAbortButton:) forControlEvents:UIControlEventTouchUpInside];
[viwInner addSubview:self.btnLoading];
return self;
Is there a reason this isn't working?
In iOS5, there is a trick to get an animated image into a UIBarButtonItem and maintain the UIBarButtonItemStyleBordered:
UIImage *image = [UIImage animatedImageNamed:#"refresh-" duration:1.f];
self.button = [[UIBarButtonItem alloc] initWithImage:image
style:UIBarButtonItemStyleBordered
target:self
action:#selector(doSomething:)];
Then, create a set of images, one image for each frame of the animation, and name then "refresh-0.png", "refresh-1.png" and so forth:
When you want to stop the animation, replace the image of the button with a static version:
self.button.image = [UIImage imageNamed:#"refresh-0.png"];
It's still a significant hassle having to create all these images yourself, but it's probably more consistent than creating your own Button-border background.
To accomplish this using UIActivityIndicatorView, rather than your replacement for it, you have to render the button border yourself. What I do is set the UIBarButtonItem's customView to a UIImageView containing the border, and add the activity view as a subview of that image.
That leaves you with the problem of getting the border image. If you only need it on one bar color, then you can just crop it out of a simulator screenshot; if you need it on multiple bar colors, then you'll want to get not just border pixels, but also border transparency, for which I wrote a Python script.
It is not possible to do what you are trying to do as UIBarButtonItems (created with -initWithImage:style:target:action: or -initWithTitle:style:target:action:) don't support arbitrary views inside the button.
You could try placing the the UIActivityIndicatorView on top of a image that simulates the border of a button. You could then use initWithCustomView: to add the view to your button.
Hope this helps.
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 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.
Take a look at the Droplr iPhone app:
Notice how the UIBarButtonItems are able to touch the right, left, top, and bottom of the screen/navigation bar?
How can I achieve something similar? Here's how I make a sample UIBarButton and set it to the right item:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
button.frame= CGRectMake(0.0, 0.0, image.size.width, image.size.height);
[button addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *bb = [[[UIBarButtonItem alloc] initWithCustomView:button]autorelease];
[self.navigationItem setRightBarButtonItem:bb animated:YES];
However, it is not right aligned, and has quite a bit of margin from the top & the bottom. My image size is correct (44px), and it looks like it shrinks it to fit a frame of sorts.
So, how can I do this?
Edit: Whoops, the top/bottom spacing was my fault. However, I can't figure out how to align the bar button flush with the left/right side. Here's what I mean: (sorry for the ugly button, it was just a test)
I tried setting the image inserts, but it didn't seem to do anything.
UIView *rightview = [[UIView alloc] initWithFrame:CGRectMake(0,0,30,30)];
UIButton *searchbutton = [[UIButton alloc] initWithFrame:CGRectMake(2,2,50, 30)];
[searchbutton setImage:[UIImage imageNamed:#"some-pic.png"] forState: UIControlStateNormal];
[rightview addSubview:searchbutton];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:rightview];
self.navigationItem.rightBarButtonItem = customItem;
[customItem release];
I use a customView for the rightBarButtonItem and I get it right aligned.
Just try a bit with the CGRectMake-Numbers for the x-coordinate, for testing I added to high numbers...
I am trying to add an image to the UIBarButtonItem which I have to use in a UIToolbar.
I have managed to read the image and even get it to display with a UIImageView, but when i add it to the UIBarButtonItem and then add that item to the UIToolbar, the toolbar just displaces a "Blank White" space the size and shape of the image that I am trying to load.
here is what I am trying.
UIImage *image = [UIImage imageNamed:#"6.png"];
//This is the UIImageView that I was using to display the image so that i know that it is being read from the path specified.
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 50, image.size.width, image.size.height);
[self.view addSubview:imageView];
UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
[button1 setImage:image forState:UIControlStateNormal];
//This is the first way that I was trying to accomplish the task but i just get a blank white space
//This is the Second way but with the same blank white result.
UIBarButtonItem *systemItem1 = [[UIBarButtonItem alloc] initWithCustomView:button2];
NSArray *items = [NSArray arrayWithObjects: systemItem1, nil];
//Adding array of buttons to toolbar
[toolBar setItems:items animated:NO];
//Adding the Toolbar to the view.
[self.view addSubview:toolBar];
Your help will be much appreciated.
Thank You!
Shumais Ul Haq
Other than you'd normally expect in UIKit stuff, you might need to set a frame for the button explicitly. Maybe that's your problem.
This is what I wrote for a custom styled back button, as a category to UIBarButtonItem (but you can just take the pieces you need from it).
Note that this was used for the navigation bar, not the toolbar, but I presume the mechanics are the same, since it is a UIBarButtonItem as well. For UIToolbar you can just use IB to get it right at compile time.
#define TEXT_MARGIN 8.0f
#define ARROW_MARGIN 12.0f
#define FONT_SIZE 13.0f
#define IMAGE_HEIGHT 31.0f
+(UIBarButtonItem*)arrowLeftWithText:(NSString*)txt target:(id)target action:(SEL)selector
{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *img = [[UIImage imageNamed:#"arrow_left.png"]
stretchableImageWithLeftCapWidth:15 topCapHeight:0];
[btn addTarget:target action:selector forControlEvents:UIControlEventTouchDown];
[btn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
[btn setContentEdgeInsets:UIEdgeInsetsMake(0.0f,0.0f,0.0f,TEXT_MARGIN)];
[btn.titleLabel setFont:[UIFont fontWithName:#"Helvetica-Bold" size:FONT_SIZE]];
[btn.titleLabel setShadowOffset:CGSizeMake(0.0f,-1.0f)];
/**** this is the magic line ****/
btn.frame = CGRectMake(0.0f,0.0f,
[txt sizeWithFont:[btn.titleLabel font]].width+ARROW_MARGIN+TEXT_MARGIN,
IMAGE_HEIGHT);
[btn styleBarButtonForState:UIControlStateNormal withImage:img andText:txt];
[btn styleBarButtonForState:UIControlStateDisabled withImage:img andText:txt];
[btn styleBarButtonForState:UIControlStateHighlighted withImage:img andText:txt];
[btn styleBarButtonForState:UIControlStateSelected withImage:img andText:txt];
return [[[UIBarButtonItem alloc] initWithCustomView:btn] autorelease];
}
usage:
[UIBarButtonItem arrowLeftWithText:#"Back" target:self action:#selector(dismiss)];