I downloaded from a free icon DB a thumb up icon, its size is too large for a button and it had white background.I decided to open it in pixelmator resized the icon and removed the background. when opening it with preview it looks great but when its set to be the button's image in xcode it appears as a white circle.
here is the icon after edit (30x30 png)
and this is how it looks on the button
what should I do to fix this?
edit/ upadte:
I tried #yunas code and it works in the navigation bar not for the toolbar (didn't even show the button).
Trying this code:
UIImage* image = [UIImage imageNamed:#"imageName"];
UIBarButtonItem *likeBtn = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:#selector(action_clicked:)];
NSArray* toolbarItems = [NSArray arrayWithObjects:likeBtn,nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
resulted again in a button with the white drawing
So I was wondering: Is it even possible to have colored buttons in the toolbar? maybe i'm trying the imposible...
edit/ upadte II - the solution: wrapping a UIButton inside a UIBarButtonItem
#interface StatusUIBarButtonItem : UIBarButtonItem
- (id) initWithStatus: (enum StatusEnum)p_statusEnum;
#end
#implementation StatusUIBarButtonItem
- (instancetype)initWithStatus:(enum StatusEnum)p_statusEnum
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[self getStatusImage] forState:UIControlStateNormal];
[button addTarget:self action:#selector(status_Clicked:) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 20, 20)];
self = [super initWithCustomView:button];
if (self)
{
self.statusButton = button;
}
return self;
}
#end
then in the ViewController class:
-(void) viewDidLoad
{
StatusUIBarButtonItem* stausBtn = [[StatusUIBarButtonItem alloc] initWithStatus:self.status];
NSArray* toolbarItems = [NSArray arrayWithObjects: stausBtn, nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
}
I hope this will help others that like me want colored images in the toolbar
UIImage *buttonImage = [UIImage imageNamed:#"imageName.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.adjustsImageWhenDisabled = NO;
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action:#selector(action:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = customBarItem;
Related
I would like to make a custom UIBarButtonItem that contains both image and text and also customise(reduce) the UIButton tap area. To achieve this programmatically, I am using the following code snippet. But UIButton disappears when added in UIView as subview. Could somebody guide me what is wrong ?
To reduce tap area of bar button, I am embedding custom UIButton in custom UIView.
//Set Navigation Bar
UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
//Set title if needed
UINavigationItem * navTitle = [[UINavigationItem alloc] init];
navTitle.title = #"";
UIView *customBackView = [[UIView alloc] initWithFrame:CGRectMake(220,0,50,40)];
customBackView.backgroundColor = [UIColor clearColor];
//Here you create info button and customize it
UIButton * tempButton = [UIButton buttonWithType:UIButtonTypeSystem];
tempButton.frame=CGRectMake(240,2,40,40);
[tempButton setImage:[UIImage imageNamed:#"offline_bk.png"]
forState:UIControlStateNormal];
//Add selector to info button
[tempButton addTarget:self action:#selector(onTapDone:) forControlEvents:UIControlEventTouchUpInside];
[customBackView addSubview:tempButton];
[customBackView bringSubviewToFront:tempButton];
UIBarButtonItem * infoButton = [[UIBarButtonItem alloc] initWithCustomView:customBackView];
//In this case your button will be on the right side
navTitle.rightBarButtonItem = infoButton;
//Add NavigationBar on main view
navBar.items = #[navTitle];
[self.view addSubview:navBar];
Because your tempbutton is going out of bound of custom back view. You set the y origin value to 2 and x origin value to 240 which is causing button to go out of bound of custom back view.
Try this code:
UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
//Set title if needed
UINavigationItem * navTitle = [[UINavigationItem alloc] init];
navTitle.title = #"";
UIView *customBackView = [[UIView alloc] initWithFrame:CGRectMake(0,0,50,50)];
customBackView.backgroundColor = [UIColor clearColor];
//Here you create info button and customize it
UIButton * tempButton = [UIButton buttonWithType:UIButtonTypeSystem];
tempButton.frame=CGRectMake(4,2,40,40);
[tempButton setImage:[UIImage imageNamed:#"offline_bk.png"]
forState:UIControlStateNormal];
//Add selector to info button
[tempButton addTarget:self action:#selector(onTapDone:) forControlEvents:UIControlEventTouchUpInside];
[customBackView addSubview:tempButton];
[customBackView bringSubviewToFront:tempButton];
UIBarButtonItem * infoButton = [[UIBarButtonItem alloc] initWithCustomView:customBackView];
//In this case your button will be on the right side
navTitle.rightBarButtonItem = infoButton;
//Add NavigationBar on main view
navBar.items = #[navTitle];
[self.view addSubview:navBar];
[self.view bringSubviewToFront:navBar];
I'm experiencing excessive UIBarButtonItem padding/spacing when using the LeftBarItems and RightBarItems (see image below). The icons used on the UIBarButtonItems do not contain extra padding. So I would like to know what's causing this?
I use this in order to remove space before the first item.
However it doesn't work between system items like UIBarButtonSystemItemAdd, only with UIBarButtonItem that has an image.
#interface UIBarButtonItem (NegativeSpacer)
+(UIBarButtonItem*)negativeSpacerWithWidth:(NSInteger)width;
#end
#implementation UIBarButtonItem (NegativeSpacer)
+(UIBarButtonItem*)negativeSpacerWithWidth:(NSInteger)width {
UIBarButtonItem *item = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
target:nil
action:nil];
item.width = (width >= 0 ? -width : width);
return item;
}
#end
Use it like this:
UIBarButtonItem *item0 = [UIBarButtonItem negativeSpacerWithWidth:13];
UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"sidebar.png"]
style:UIBarButtonItemStylePlain
target:vc
action:#selector(sideMenuAction:)];
NSArray* items = #[item0, item1];
[vc.navigationItem setLeftBarButtonItems:items animated:NO];
[vc.navigationItem setLeftItemsSupplementBackButton:YES];
You can move the image
self.myBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 25, 0, -25);
Apple silently increased the horizontal spacing constraints for UIBarButtonItems and sadly, still hasn't added any UIAppearance methods to adjust the horizontal positioning of UIBarButtonItems.
The best solution (which worked for me) is to wrap your UIBarButtonItems in a UIView using initWithCustomView: and adjust the bounds of that custom view to get your desired positioning. Here's a good answer on how to do this.
If you want to take things a step further, you can create a category on UIBarButtonItem with class methods that return the bar buttons you use throughout your app. That way, when you a need a bar button, you can call something like:
self.navigationItem.leftBarButtonItem = [UIBarButtonItem mySearchBarButtonItemWithTarget:self selector:#selector(search)];
There are two kinds of button on the navigation bar in iOS 7: button with image and button with text. I wrote a class to do it. Here is how:
GlobalUICommon.h:
#interface UIBarButtonItem(CustomUIOfONE)
+ (UIBarButtonItem*)barItemWithImage:(UIImage*)image highlightedImage:(UIImage*)highlightedImage xOffset:(NSInteger)xOffset target:(id)target action:(SEL)action;
+ (UIBarButtonItem*)barItemWithTitle:(NSString*)title xOffset:(NSInteger)xOffset target:(id)target action:(SEL)action;
#end
GlobalUICommon.m:
#implementation UIBarButtonItem(CustomUIOfONE)
+ (UIBarButtonItem*)barItemWithImage:(UIImage*)image highlightedImage:(UIImage*)highlightedImage xOffset:(NSInteger)xOffset target:(id)target action:(SEL)action
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
[button setImage:image forState:UIControlStateNormal];
[button setImage:highlightedImage forState:UIControlStateHighlighted];
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
[button setImageEdgeInsets:UIEdgeInsetsMake(0, xOffset, 0, -xOffset)];
}
UIBarButtonItem *customUIBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
return customUIBarButtonItem;
}
+ (UIBarButtonItem*)barItemWithTitle:(NSString*)title xOffset:(NSInteger)xOffset target:(id)target action:(SEL)action
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setTitle:title forState:UIControlStateNormal];
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
[button.titleLabel setFont:[UIFont systemFontOfSize:15]];
[button setFrame:CGRectMake(0, 0, [button.titleLabel.text sizeWithFont:button.titleLabel.font].width + 3, 24)];
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
[button setContentEdgeInsets:UIEdgeInsetsMake(0, xOffset, 0, -xOffset)];
}
UIBarButtonItem *customUIBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
return customUIBarButtonItem;
}
#end
YourViewController.m:
Example for Button with Image:
UIBarButtonItem* leftButtomItem = [UIBarButtonItem barItemWithImage:[UIImage imageNamed:#"yourImage"]
highlightedImage:[UIImage imageNamed:#"yourImage"]
xOffset:-11
target:self
action:#selector(yourHandler)];
self.navigationItem.leftBarButtonItem = leftButtomItem;
UIBarButtonItem* rightButtonItem = [UIBarButtonItem barItemWithImage:[UIImage imageNamed:#"yourImage"]
highlightedImage:[UIImage imageNamed:#"yourImage"]
xOffset:11
target:self
action:#selector(yourHandler)];
self.navigationItem.rightBarButtonItem = rightButtonItem;
Example for Button with Text:
self.navigationItem.leftBarButtonItem = [UIBarButtonItem barItemWithTitle:#"yourText" xOffset:-11 target:self action:#selector(yourHandler:)];
self.navigationItem.rightBarButtonItem = [UIBarButtonItem barItemWithTitle:#"yourText" xOffset:11 target:self action:#selector(yourHandler:)];
That's it.
I solved this by using storybord interface.
1.Select the Bar item.
2.Select the Size Inspector.
Here you can find image Inset,using top,bottom AND left , right you can change the position of Bar Item.
As #Luda comments, the solution is to
self.myBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 25, 0, -25);
However, #andrrs also points a problem here when inset is large: the hit area. In this case,we have to implement a way to setHitTestEdgeInsets. Below is an category method:
#implementation UIButton (Extensions)
#dynamic hitTestEdgeInsets;
static const NSString *KEY_HIT_TEST_EDGE_INSETS = #"HitTestEdgeInsets";
-(void)setHitTestEdgeInsets:(UIEdgeInsets)hitTestEdgeInsets {
NSValue *value = [NSValue value:&hitTestEdgeInsets withObjCType:#encode(UIEdgeInsets)];
objc_setAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS, value, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(UIEdgeInsets)hitTestEdgeInsets {
NSValue *value = objc_getAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS);
if(value) {
UIEdgeInsets edgeInsets; [value getValue:&edgeInsets]; return edgeInsets;
}else {
return UIEdgeInsetsZero;
}
}
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
if(UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets, UIEdgeInsetsZero) || !self.enabled || self.hidden) {
return [super pointInside:point withEvent:event];
}
CGRect relativeFrame = self.bounds;
CGRect hitFrame = UIEdgeInsetsInsetRect(relativeFrame, self.hitTestEdgeInsets);
return CGRectContainsPoint(hitFrame, point);
}
#end
- (void)viewDidLoad
{
[super viewDidLoad];
//Load the image
UIImage *buttonImage = [UIImage imageNamed:#"1.png"];
//create the button and assign the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
//sets the frame of the button to the size of the image
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
//creates a UIBarButtonItem with the button as a custom view
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
customBarItem.target = self;
customBarItem.action = #selector(click:);
self.toolbarItems = [NSArray arrayWithObjects:customBarItem, nil];
}
- (void)click:(id)sender {
NSLog(#"action");
}
I think my console will print "action" when I push down the barItem.
However "action" is not printed.
Did I miss anything?
Thanks for advance!
Try this
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithTitle:#"Click ME!" style:UIBarButtonItemStyleBordered target:self action:#selector(click)];
.
.
.
-(void)click{
NSLog("hello");
}
I believe the problem is that you are using a UIButton for the [[UIBarButtonItem alloc] initWithCustomView when you should simply pass a UIView, the action is probably going to the UIButton and not the UIBarButtonItem.
Instead do this:
UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"1.png"];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:myImageView];
I think you're trying to do something more like this:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
[button setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 25.0f)];
[button addTarget:self action:#selector(click) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
Apple's iPad Mail app has a few icons that appear embedded in the setRightBarButtonItems area of the navigationItem of the detail view of the split view controller:
How can I add icons to the navigationItem bar like this (I have the icons already).
My issue is that the UIBarButtonItem class reference doesn't seem to have an appropriate UIBarButtonItemStyle that allows for no border around the button. I've tried configuring the UIBarButtonItem via initWithCustomView yet tapping the button doesn't work.
Thanks in advance for any suggestions
Cheers
EDIT: I could use UIBarButtonItemStylePlain however it doesn't look 'embedded' like the apple buttons, which is the look I am after.
I've worked it out and can produce the following result:
Here is the code I use. It could be optimised however is nice and repetitive for demonstration purposes:
- (void)setupNavigationItemButtons {
float buttonWidth = 60;
float buttonHeight = 40;
UIImage *imageA = [UIImage imageNamed:#"212-action2.png"];
UIImage *imageB = [UIImage imageNamed:#"111-user.png"];
UIImage *imageC = [UIImage imageNamed:#"122-stats.png"];
UIButton *buttonA = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
UIButton *buttonB = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
UIButton *buttonC = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
[buttonA addTarget:self action:#selector(doSomething:) forControlEvents:UIControlEventTouchUpInside];
[buttonB addTarget:self action:#selector(doSomethingElse:) forControlEvents:UIControlEventTouchUpInside];
[buttonC addTarget:self action:#selector(doSomethingRandom:)forControlEvents:UIControlEventTouchUpInside];
[buttonA setImage:imageA forState:UIControlStateNormal];
[buttonB setImage:imageB forState:UIControlStateNormal];
[buttonC setImage:imageC forState:UIControlStateNormal];
UIBarButtonItem *buttonItemA = [[UIBarButtonItem alloc] initWithCustomView:buttonA];
UIBarButtonItem *buttonItemB = [[UIBarButtonItem alloc] initWithCustomView:buttonB];
UIBarButtonItem *buttonItemC = [[UIBarButtonItem alloc] initWithCustomView:buttonC];
[self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:buttonItemA, buttonItemB, buttonItemC,nil]];
}
I want to set background image for every navigation item(button) (universal).
How should these images look?
Are there fixed dimensions or it is possible to create repeating background image?
How to programmatically change then this background image?
Thank's for help
UPDATE:
I found this code for changing background of this button but it's no working.
UIImage *barButton = [UIImage imageNamed:#"button_background.png"];
[[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
And I don't know which dimensions should be.
P.S. I want to change background of button just like you can change background color (self.navigation.controller.nvigationBar.tintColor..)
The code below might solve your problem
UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *backBtnImage = [UIImage imageNamed:#"button_background.png"] ;
[backBtn setBackgroundImage:backBtnImage forState:UIControlStateNormal];
[backBtn addTarget:self action:#selector(goback) forControlEvents:UIControlEventTouchUpInside];
backBtn.frame = CGRectMake(0, 0, 54, 30);
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithCustomView:backBtn] ;
self.navigationItem.leftBarButtonItem = cancelButton;
u need to create Custom Back Button i m afraid
check this code out
UIBarButtonItem *backButton = [[UIBarButtonItem alloc]
initWithImage:[UIImage imageNamed:#"yourImage.png"]
style:UIBarButtonItemStyleBordered
target:nil
action:nil];
self.navigationItem.backBarButtonItem = backButton;
[backButton release];
Let me know if it worked
Cheers
what about categories?
For example, you can do so:
#interface UIBarButtonItem(JFAdditions)
- (id)initWithTitle:(NSString *)title image:(UIImage*)img;//add target and action if need
#end
#implementation UIBarButtonItem(JFAdditions)
- (id)initWithTitle:(NSString *)title image:(UIImage*)img
{
UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
//add background image and text on button, target and action if need, also
self = [self initWithCustomView:btn];
return self;
}