I'm trying to put a UIBarButtonItem with a custom image on a UINavigationBar. When I do however, the image doesn't look right. I want the button on the navigation bar to look like the one below it.
(This is a screenshot from the simulator, by the way, not Interface Builder)
I created the custom UIBarButtonItem by creating a UIButton, using the cog-wheel image as a background, and then simply dragging it to the the right bar button item place in Interface Builder. Seeing as creating a UIBarButtonItem programmatically with the aforementioned UIButton as its 'custom view' (-initWithCustomView) has the same result, I believe this is what is happening as well.
What I don't understand is why the button image lost its nice edges and color gradient when I added it to the navigation bar wrapped in a bar button item. Can anyone tell me?
Thanks in advance.
The image hasn't changed. It is the same. Its just that when put on different backgrounds, it is showing differently. You should consider increasing the contrast.
Related
I have my swift 5 app working and I'm now adding a 'tool tips' feature, explaining what each part of the screen does.
The approach I have taken is from an article online - add a subview of grey to dim the background, then to that, add a subview of the item being described again, so it is now highlighted, then also, add a subview of an explainer bubble to explain the item highlighted.
This works fine, so long as the UIView I'm using isn't from a UIBarButtonItem. When it is, the bar buttons underneath the grey screen move around to accomodate what they believe is another bar button being added, which causes everything to miss-align. Other buttons do not have this problem, only UIBarButtons.
Any advice is greatly appreciated. Thanks.
Are you adding the duplicate subview to the bar itself? It'd probably be better to add it to the screen rather than the bar so it doesn't affect the bar's layout. In order to get its frame relative to the view controller so you can display your duplicate in the correct position, you could use:
barButtonItem.convert(barButtonItem.bounds, to: self.view)
Assuming self is a UIViewController.
Does anybody know what is going on with these tab bar buttons?
sample 1
sample 2
As you can see strange blue rectangle appears both on buttons with my custom images and with standard style bar button.
As far as I know instance of UIBarButtonItem doesn't have a background property, so this behavior seems to me very odd.
I am trying to achieve this look for my back button:
But no matter where I sample the shade of green in photoshop, it never comes out correct. For example:
Any suggestions on how I can achieve the exact same look?
The tint color is exactly that—a tint. iOS uses that color as a base to create a nice-looking button in the style of normal navigation bars.
If you want to control your button's appearance more precisely than tinting allows, your best bet is to create a set of images and use -setBackButtonBackgroundImage:forState:barMetrics: to use them. If you want this look for all bar button items in your app, use that method on +[UIBarButtonItem appearance], rather than a specific bar button item.
In order to produce the BackBarButtonItem's gradient, iOS does the following:
Applies the tint color that you specify
Applies a transparent overlay on top of the back button
Here are the retina-display overlays it uses for iPhone (these were obtained using UIKit-Artwork-Extractor):
Default Back Button Overlay
Pressed Back Button Overalay
Unfortunately, there is no way to tell iOS / UIBarButtonItem NOT to render these overlays on the back button (thereby, this gives the default navigation bar and buttons a pretty consistent look across all apps).
If you don't want to have this overlay applied (it will darken the button in both states), you have to create your own back button images - for the default and pressed states, portrait and landscape orientations, and retina and non-retina displays (8 total images).
As Brent Royal-Gordon mentions in his answer, you can apply these images using the appearance proxy for UIBarButtonItem to have them used throughout the app. In example, you'd set the default background image state like this for portrait orientation:
UIImage *defaultBackImage = [UIImage imageNamed:#"My-Default-Back-Button"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:defaultBackImage forState: UIControlStateNormal barMetrics:UIBarMetricsDefault];
It looks like the button is adding another semi-transparent gray layer over the button. I can't check right now but I would look for settings to disable the semi-transparent layer effect or try different button style/states.
Ideally I want to use a UIToolbar but I want the icons at the bottom to appear as they would in a UITabBar meaning with icon for default and highlighted states and title beneath. I know I can drag a UIButton onto the toolbar and it will create a UIButton inside of a UIBarButtonItem, but I can't seem to manipulate the UIButton to show a title beneath? The other problem I'm having is when I set the alignment of the button in IB (in the Control section) it only changes the alignment for the default state not the highlighted state. Can anyone give me some pointers here that would be great thanks!
rc
Putting the UIButton inside a UIBarButtonItem is the best way I've found to do it. Just set the text for the button and it should show up fine. When manipulating the positioning, remember you're manipulating the position of the UIBarButtonItem and not the UIButton. Hope that helps!
I am creating an iPad application for ios 5 using arc and storyboard in xcode 4.3. I need to customize the UInavigationbar to make it broader than its usual size (almost double sized) and add to it some custom logos (images) and buttons. Can anyone pls point me in the correct direction on how this can be acheived? any third party libraries are also welcome if required.
Thanks in advance for your help on this one.
To start, you'll want to subclass UINavigationBar. While it is possible to change the height, the UINavigationBar background isn't going to play nicely, so you'll probably want to use your own background image.
Here's some information about resizing the navigation bar
Change the height of NavigationBar and UIBarButtonItem elements inside it in Cocoa Touch
iPhone - How set uinavigationbar height?
And another article on how to add the images and buttons as subviews.
http://www.iosdevnotes.com/2011/09/custom-uinavigationbars-techniques/
I don′t know how you would change the size of the UINavigation bar.
To add custom buttons you can outlet your navigationItem in the storyboard to the interface of your view controller. Then use setLeftBarButtonItems: and setRightBarButtonItems: to put multiple buttons you previously created.
To add custom black and white logos to the buttons you can use [navigationButtonItem setBackgroundImage: yourImage].
If you want your logos in color you can create a UIButton with the colored logo ([newButton setImage: yourImage]) and then init your navigation button item with : initWithCustomView: newButton.