Creating a custom UINavigationbar for iPad in iOS 5 with ARC - ios

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.

Related

In iOS, is there a way to add (overlay) a subview of a UIBarButtonItem image without it moving the buttons already in the bar?

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.

Autolayout UITabBar items in iOS

I am trying to implement a simple mobile browser in iOS. I am trying to include two UIToolbars; one at the top and one at the bottom. The top toolbar will consist of a UITextField and a GO button. The bottom toolbar will consist of back and forward buttons.
I want this to work correctly in both portrait and landscape modes. However, I noticed that autolayout does not work for UIToolbar items. So I cannot set constraints for my UITextField and the buttons. How do I fix this?
Yes autolayout does not work for UIToolbar items because they are mostly UIBarItem instead of subclass of UIView.
You can still set up constraints by using special items

Achieving iOS 7.1 UINavigationBar blur

I have another UIView under the navigation bar like this.
I want the slight blur of the navigation bar for that UIView too. Currently I have its alpha value reduced but it doesn't give the desired effect as you can see.
How can I get the frosty look of the navigation bar for the UIView as well? I'm on iOS 7.1.
Don't use a UIView - you will never achieve a consistent result with the navigation bar.
Use a UIToolbar and place it below the navigation bar. Set the delegate of the toolbar to your view controller and implement positionForBar: to return UIBarPositionTop or UIBarPositionTopAttached. You can then add all the subviews you have in your view to the toolbar.
you can use UIToolbar, it's the quickest way.
If you want to customize it, you have to use 3rd library like ILTrasparentView, FXBlurView ...

uitoolbar with icons/text similar to uitabbar

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!

Button image in navigation bar has different appearance. Why?

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.

Resources