UINavigation with UITextField as subview

Question

I want to make UI like following,

I tried to increase the height of UINavigationController like

[self.navigationController.navigationBar setFrame:CGRectMake(0, 0, 320, 110)];

but navigation title and BarButtonItem appears down. i can not add hide navigation as i am using third party side menu which uses Left BarButtonItem.

i can very well keep navigation as it is and below i have added uiview as subview with same background colour as that of navigation but there is fine line appears in between...:(

score 3 · Accepted Answer · edited May 23 '17 at 12:13

You can't increase height of UINavigationBar. Add an UIView with those elements just below the UINavigationBar.

Then there will be extra line below UINavigationBar. You can remove that line. Refer How to hide iOS7 UINavigationBar 1px bottom line

or else use this code(I have just copied it from that link in swift, convert it to Objective-C)

import UIKit

class ViewController: UIViewController {

    private var shadowImageView: UIImageView?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        if shadowImageView == nil {
            shadowImageView = findShadowImage(under: navigationController!.navigationBar)
        }
        shadowImageView?.isHidden = true
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        shadowImageView?.isHidden = false
    }

    private func findShadowImage(under view: UIView) -> UIImageView? {
        if view is UIImageView && view.bounds.size.height <= 1 {
            return (view as! UIImageView)
        }

        for subview in view.subviews {
            if let imageView = findShadowImage(under: subview) {
                return imageView
            }
        }
        return nil
    }
}

This is the result

score 0 · Answer 2 · answered Dec 22 '16 at 06:56

Actually you cant change height of UINavigationBar. Your actual ViewController's view will start from 64 pixel from TopLayoutGuide (Vertical Space) Status Bar Height is 20 Pixel Navigation Bar Height is 44 Pixel

So to design such UI, simply do these steps

Hide NavigationBar on that view controller like

self.navigationController.navigationBarHidden = YES;
self.navigationItem.hidesBackButton = YES;
Then add View from storyboard with vertical space as 0 from TopLayoutGuide. And design it as per your requirement. So you can simply give this look and handle it using IBOutlets and IBActions for each item

Also you can add UILable to show title of screen.

i can not add hide navigation as i am using third party side menu which uses Left BarButtonItem. — user2813740, Dec 22 '16 at 07:26

score 0 · Answer 3 · answered Dec 22 '16 at 07:05

You can't increase the size of the UINavigationBar. That is of standard size 44 (Nav Height) + 20 (size of the status bar). Here you've two options to achieve.

First, by adding menu, dashboard title label & notification icon to the UINavigationBar. Add Jobs, Conditions, and Interview as a separate view below to navigation bar.

Second by customizing the entire view, as mentioned by @Pushkraj i.e, by hiding the current Navigation Bar and adding your own view which contains all the UI elements.

UINavigation with UITextField as subview

3 Answers3