How do I create a custom navigationController with image and name?

Question

My goal is to create a UI that looks like this

The only way that I could think of is to embed a navigationController on the UIViewController then add UIView

Storyboard

Code - ProfileViewController

  class ProfileViewController: UIViewController {

     override func viewDidLoad() {
        super.viewDidLoad()
        navigationBarColor()
     }

    func navigationBarColor() {
        navigationController?.navigationBar.backgroundColor = UIColor(red:0.91, green:0.04, blue:0.51, alpha:1.0)
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
      }
  }

Result

Is my approach correct? or do I need to use a different method to achieve this result?

You can hide the navbar in view will apper and add the view on that place. — Amrit Tiwari, Jul 19 '17 at 09:29
@AmritTiwari but if I do that, the background color of the status bar will be white — sinusGob, Jul 19 '17 at 09:33
hey bro, status bar color not display if you hidden navigation bar and display image in top of view] — Berlin, Jul 19 '17 at 09:44
Let me know if my answer helped or if you had any other questions. — Timmy, Jul 27 '17 at 15:43
everything is perfect just add self.navigationBar.isTranslucent = true — Jaydeep Vyas, Jul 31 '17 at 03:13

score 2 · Answer 1 · answered Jul 26 '17 at 10:16

The best way to do this is to make the navigationBar invisible basically. Here is what I did to achieve the look you want:

Step 1:

Add the navigation controller and a view controller and hold control and drag from the navigation controller to the view controller and select root view controller(which i am pretty sure you have already done). Also, drag and drop a UIBarButtonItem onto the navigationBar in the view controller, not the navigationBar in the navigation controller.

Step 2:

Subclass the navigation controller and the view controller, in my example, mine are called CustomNavController.swift and MainVC.swift. In the storyboard, set them as the class of the controllers.

Step 3: In the class you made for the view controller, set the code in the viewDidLoad to change the background color.

import Foundation
import UIKit

class MainVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor(red: 231/255, green: 11/255, blue: 129/255, alpha: 1)

    }

}

And in the navigation controller class, add this code.

import UIKit

class CustomNavController: UINavigationController {

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    self.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationBar.shadowImage = UIImage()
    self.navigationBar.isTranslucent = true

    self.navigationBar.tintColor = .white

}

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

override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

}

The Result:

Since you are using a navigation controller, you have to set the status bar style to lightContent in the navigation controller subclass like shown above. If you have other view controller that you want the status bar to be black in, you will have to implement the method preferredStatusBarStyle in the class and return .default unless, if the view controller has a navigation controller associated with it, the you would have to implement preferredStatusBarStyle in the navigation controller subclass like I showed in my example. If you have any questions feel free to leave a comment and I will answer when I can.

score 0 · Answer 2 · answered Jul 19 '17 at 09:27

0

You can subclass navigation bar, but with that amount of size, i think it's not a good approach. What you are doing seems ok. It's a solution.

answered Jul 19 '17 at 09:27

Pedro Pinho

652
3
6

What would be the solution? as you can see the status bar is filled with white color – sinusGob Jul 19 '17 at 09:29
Check if this link helps you: https://stackoverflow.com/questions/2133257/iphone-how-set-uinavigationbar-height – Pedro Pinho Jul 19 '17 at 09:31

score 0 · Answer 3 · answered Jul 24 '17 at 20:46

Your approach will work. To match your Sketch mockup as closely as possible, here are a few tips:

UINavigationBar's background color should be set using the barTintColor property. This will give the status bar the same background color.
Set the UINavigationBar's barStyle property to black. This will set the status bar's content color to white.
You might notice how the navigation bar's color is slightly different from the view you created beneath it. This is because UINavigationBar is translucent by default, so the background color has a reduced alpha value. You can set the UINavigationBar property isTranslucent to false to fix this.

An alternative approach (without UINavigationController) would involve creating a simple UIView to use as the status bar background, as shown here: https://stackoverflow.com/a/43264566/5223633.

Dedy Khaidir · Answer 4 · 2017-07-25T03:58:56.757

0

First step, add this 3 lines of codes in your viewDidLoad methods of your controller class:

navigationController?.navigationBar.barTintColor = UIColor(red:0.91, green:0.04, blue:0.51, alpha:1.0)
navigationController?.navigationBar.tintColor = UIColor.white
UIApplication.shared.statusBarStyle = .lightContent

And then, select your info.plist file. When it's opened, add a row by right clicking on it. Give the key name:

View controller-based status bar appearance

and set it's value into:

NO

as boolean value.

see this info.plist screenshot example

Then run it.

edited Jul 25 '17 at 03:58

answered Jul 25 '17 at 03:51

Dedy Khaidir

33
1
7

By adding the `View controller-based status bar appearance` on info.plist, I think it would overwrite the entire application's status bar? How to do it only on a specific view controller? – sinusGob Jul 25 '17 at 08:10
it should not, since the 3 lines code above written into the specific view controller. unless you write the code in the AppDelegate (then it would overwrite the entire screen). – Dedy Khaidir Jul 25 '17 at 08:38

score 0 · Answer 5 · answered Jul 29 '17 at 18:47

You can create custom viewcontroller with Xib file after that load and add its view inside your navigation bar. Hide back button if required and update navigationBar height accordingly

navigationItem.hidesBackButton = true
navigationController?.navigationBar.frame.size.height = 100
guard let yourCustomView = UINib(nibName: "yourCustomXib", bundle: nil).instantiate(withOwner: nil, options: nil).first as? YourCustomView else {
 fatalError("Missing yourCustomXib")
}
navigationController?.navigationBar.addSubview(yourCustomView)

How do I create a custom navigationController with image and name?

5 Answers5

Linked