I'm trying to change the back button image using a resizable image of just a 1x1 pixel (I just want to change the color of it basically and remove the tint). The code I'm using is the following:
UIImage *backButtonImage = [[UIImage imageNamed:#"backButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
But for some reason, the button seems like it is only allowing a 1 pixel line to be show:
You can see a sliver of the text of the title of the previous view.
Is there any way to just change the color of the back button and remove the tint so it's a solid color without having to create a new barButtonItem and remove the one already there?
Related
I am using a UITabBarController. In my AppDelgate I am setting the selectionIndicatorImage to a simple white line. This is showing up in the middle of the tab bar item. I want it to show in the top of my tab bar item, highlighting that it is selected. I tried making an image with a white line on top and transparent on the bottom but then it just showed up way above my tab bar. Is there a certain size I need to make this image to achieve what I am after?
Image I'm Using: https://www.dropbox.com/s/zva77z9yt6rcfsg/SelectedTab.png?dl=0
UIImage *selectedImage = [[UIImage imageNamed:#"SelectedTab"] stretchableImageWithLeftCapWidth:0 topCapHeight:0];
[[UITabBar appearance] setSelectionIndicatorImage:selectedImage]
You have to create translucent selectedTab (see zip file) with top white line and height should be 48 Pixel
check this link https://www.dropbox.com/s/j38mqj8sd0qgv8f/selectedTab.zip?dl=0
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:#"selectedTab.png"]];
[[UITabBar appearance] setBarTintColor:[UIColor blackColor]];
Results:
In iOS 6/7, I have used UISegmentedControl with background images to create an effect like so:
I accomplished this by setting the background image for the UISegmentedControl for each of standard states, like so:
UIImage *segmentedControlBackgroundImage = [UIImage imageNamed:#"profileSegmentedControlBackground"];
UIImage *segmentedControlBackgroundSelectedImage = [UIImage imageNamed:#"profileSegmentedControlBackgroundSelected"];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundImage forState:UIControlStateDisabled barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundSelectedImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundSelectedImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
When a segment becomes select or is highlighted, it has the nice blue bar underneath and I set text attributes to change the text color to be blue. There's some extra code for the dividers, but I think that's unrelated so I've omitted it.
My problem is that in iOS 8, there are a couple of actions that cause the background of the segment to turn gray and look bad; One being when you change your selection, the cell you tapped turns gray until the transition completes, and the other is that if you tap and hold an already selected segment, it turns gray. Both look identical and can be seen below.
Some extra pieces of possibly relevant information:
The tintColor for the segmentedControl is clear
I'm not subclassing UISegmentedControl
I haven't changed any properties for UISegmentedControl using its appearance proxy
I am using 1 point wide images for the background images and UISegmentedControl is automatically determining the capInsets and tiling the image
The reason the segment turns grey on selecting an already selected segment is because the segmented control is missing the state for selected and highlighted at the same time.
In your case calling:
[self.segmentedControl setBackgroundImage:segmentedControlBackgroundSelectedImage forState:UIControlStateSelected | UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
should fix that problem.
when you change your selection, the cell you tapped turns gray until
the transition completes
I couldn't reproduce that one, but perhaps this will fix both issues.
Just in case, in Swift that would be (UPD for Swift 4)
segmentedControl.setBackgroundImage(image, forState: .selected, barMetrics:.Default)
segmentedControl.setBackgroundImage(image, forState: .highlighted, barMetrics:.Default)
I am setting the background of my back buttons using:
UIImage *blueBorder = [[UIImage imageNamed:#"blue_border"] resizableImageWithCapInsets:UIEdgeInsetsMake(2, 2, 2, 2)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:blueBorder forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
The background image looks like this (this is the #2x):
Given my insets I am expecting the 2-point blue border to extend around the edge of the button and the remainder to be pink. Instead, I am seeing:
Note that not only is the background not right, the label in the button is also cropped. It's tricky to see against the blue nav bar but take my word for it. Without the custom background, this does not happen.
Curiously, all is well in the slimmer iPhone-landscape orientation:
I need to create a navBar back button in accordance to the designer's plan. The back button has a pattern image and stitched leather on the perimeter.
Here it is:
My question is it possible to create this without a great amount of hassle and headache? Or if it's possible at all, since the back button has varying width?
Thanks!
UPDATE
Alright, with the help of PartiallyFinite turns out this is very easy. If you set the UIEdgeInsets correctly it will keep the left side fixed, the right side fixed, and then duplicate the middle of the image considering the back button's width.
This is the image I used for my back Button:
And these are my inset settings. You can try them yourself:
backButtonImage = [backButtonImage resizableImageWithCapInsets:UIEdgeInsetsMake(5, 17, 5, 12)];
Hope this helps someone in the future.
You will need to provide a stretchable image for the button, so it knows how to display it correctly:
UIImage *buttonImage = [[UIImage imageNamed:#"backButtonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)]
You don't need to do anything special to the image itself, but you do need to specify appropriate edge insets for the resizable image to indicate the area around the edges of the image that should not be stretched, as shown above (the example shows an inset of 15 pixels from the left and 6 from the right). This area should cover the arrow head, and the curved right edge, so that the middle area can be stretched out as needed. Read the documentation for more information on this method.
UPDATE: By default, the resizable area of the image will be tiled to the new size, however if you want to have it stretch instead, you can use resizableImageWithCapInsets:resizingMode: and pass UIImageResizingModeStretch to achieve that behaviour. For your case obviously tiling is better as it preserves the stitching, but for some background images stretching is a better solution. Just putting this here to help anyone who sees this in the future.
Once you have the stretchable image, you can change the appearance your back button using this code:
[myBackButtonItem setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Alternatively, you can set this custom appearance for all back buttons in your app using this code:
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Run this when your app launches, and it will affect all back buttons in your app.
Note that, contrary to what some of the other answers suggest, you will not need to manually create any back buttons. If you create a UINavigationController and use it in the recommended way (read about that in the documentation, a navigation bar and back button will be created for you as you push view controllers using pushViewController:animated:. If you use the global UIAppearance code snippet to apply the custom button style, it will automatically be applied to all the back buttons that you have.
You can read more about setBackButtonBackgroundImage:forState:barMetrics: in the official documentation.
There are also numerous tutorials available online for a more in-depth explanation of how this works and how to do it, here are a few good ones:
http://useyourloaf.com/blog/2012/08/24/using-appearance-proxy-to-style-apps.html
http://nshipster.com/uiappearance/
You need to create your own BarButtonItem. You can't set image for system back button.
self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:buttonWithYourImage] autorelease];
You can create your own UIBarButtonItem and set it as the leftButtonItem on the navigation bar on the current view controller:
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"your_image"] style:UIBarButtonItemStyleBordered target:self action:#selector(yourFunction:)];
self.navigationItem.leftBarButtonItem = btn;
I use this in my Appdelegate.m to customize button. ("buttonBack" is the name of your image). Hope it may help you
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
UIImage *barButtonImage = [[UIImage imageNamed:#"buttonBack"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
[[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
return YES;
}
First you need to make your own back button.. and set that image to back button.
UIBarButtonItem * btn=[[UIBarButtonItem alloc]initWithTitle:#"Back" style:UIBarButtonItemStyleBordered target:self action:#selector(changed)];
self.navigationItem.leftBarButtonItem=btn;
[btn setImage:[UIImage imageNamed:#"yourimagename"]];
-(void)changed
{
[self.navigationController popToViewController:[[self.navigationController viewControllers] objectAtIndex:0] animated:YES];
}
try this one really helpful to you...
I have a UIBarButtonItem that I originally change the background image to. But I would like to be able to change the same UIBarButtonItem back to a default looking one (specifically a done button). Then again back to the way it was prior to (that shouldn't be a problem).
Here is how I change the appearance at first:
[menuButton setBackButtonBackgroundImage:[UIImage imageNamed:#"menuButton.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Then back I was trying things like:
menuButton.style = UIBarButtonItemStyleDone;
menuButton.title = #"Done";
//the above didn't do anything, so I tried to make my own image to
//replace the first image. But below did't do anything either.
[menuButton setBackButtonBackgroundImage:[UIImage imageNamed:#"doneButton.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Use setBackgroundImage:... instead of setBackButtonBackgroundImage:..., you're only setting the appearance of back buttons (in navigation bars).