My first Swift blog is about Navigation bar

How to hide navigation bar excepting bar button

In this tutorial I’m going to make an app thats going to have two scenes. First scene will be tableview and second scene will have a picture that will display on top. Today we will learn how to hide navigation bar excepting bar button to see full image in second scene.

Go to the bottom if you are good at all for this tutorial and want to see the code for hiding navigation bar

Let’s do it

I suppose that you already created a new project, made two scenes and simple tableview

Added first and second scenes

If you are new to swift then you can go and watch these videos of my friend.

To understand the programming language well these videos were very helpful to me

after that add an UIImageView to the second scene

adding imageView to second scene

Creating a segue

Create a segue from first scene to second scene

control drag from first scene to second

Creating segue between first and second scenes

Choose ‘show’

Creating segue

By the way do not forget to add Navigation Controller to the first scene, click on the first scene’s yellow (View Controller icon) button — go to the editor — select embed in and then select navigation controller

Then we are going to name our segue identifier, Select the segue (The arrow between two scenes) and go to the attribute inspector, in the attribute inspector you will see identifier field , type ‘goToSecondScene’ to give it a name

add some images to assets folder and name them as 1, 2, 3

Adding images to assets folder

var imagesArray = ["1","2","3"] //for images that we added to assets
var titlesArray = ["1","2","3"]

create two arrays (as you can see above) in first scene View Controller (FirstScene.swift in my case)

in this example we are going to have 3 rows in section so it will look like this

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}

or you can alsoreturn imagesArray.count instead of 3

and here is how we are going to handle ‘cellForRowAt IndexPath’ method

do not forget to name your cell’s identifier in main.storyboard and then type the same name in ‘withIdentifier: ‘ for cellForRowAt method

in my case it is "Cell"

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = titlesArray[indexPath.row]
cell.imageView?.image = UIImage.init(named: imagesArray[indexPath.row])
return cell
}

After that we are going to add ‘didSelectRowAt IndexPath’ method to the FirstScene.swift file then add performSegue method and then name withIdentifier parameter as same as what we have named in segue identifier

in my case it is ‘goToSecondScene’

it must be the same if you are following me 😉

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
performSegue(withIdentifier: "goToSecondScene", sender: nil)
}

For passing data from first scene to second you have to implement prepare method so you can prepare your datas to pass to another scene, here’s how you do it

First go to the SecondScene.swift file and create a string variable so when we pass string format data from first scene to the second scene we can handle it

in my case:

var imageFromFirstScene = ""

Second we are going to pass our datas (which are images) to the second scene so add this prepare method to your FirstScene.swift file

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let selectedRow = tableView.indexPathForSelectedRow
let selectedImage = imagesArray[(selectedRow?.row)!]
let destinationVC = segue.destination as! SecondScene
destinationVC.imageFromFirstScene = selectedImage
}

Create a @IBOutlet for image view

Control + click and drag it to the SecondScene.swift file name it ‘imageView’

you have to see this in SecondScene.swift file

@IBOutlet weak var imageView: UIImageView!

in SecondScene.swift file’s ViewDidLoad() add these

override func viewDidLoad() {
super.viewDidLoad()
//To see our image which has been sent from first scene
imageView.image = UIImage.init(named: imageFromFirstScene)
//Optional 
navigationController?.navigationBar.tintColor = UIColor.black 
}

if you now run you will see that disappointing navigation bar in second scene. Let’s get rid of that

Start from here if you are just going to see how to hide navigation bar

Hide Navgitation bar in SecondScene excluding bar button

Add viewWillAppear() and viewWillDisappear() methods so we can hide it when the second scene appears and show it back when the second scene disappears.

Check this out

override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
//To see background Image instead of navigation bar
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
//To hide shadow of the navigation bar navigationController?.navigationBar.shadowImage = UIImage()
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
//Back to default navigation bar
navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
navigationController?.navigationBar.shadowImage = nil
}

Now if you run it will look awesome,

Here you go, 😉

Well done. 👏🏻

Feel free to comment

Resource

youngideveloper/HiddenNavigationBar