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
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
Creating a segue
Create a segue
from first scene to second scene
control drag from first scene to second
Choose ‘show’
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
var imagesArray = ["1","2","3"] //for images that we added to assetsvar 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: ‘
forcellForRowAt
methodin 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.indexPathForSelectedRowlet selectedImage = imagesArray[(selectedRow?.row)!]let destinationVC = segue.destination as! SecondScenedestinationVC.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 barnavigationController?.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