Swift: How to navigate in between views using buttons and tableViewCells in ViewCode (Programmatically)

This is a step by step tutorial made for the current version of the UIKit in swift 5, hope you enjoy ;)

1- Let's setup our project in Xcode

• With your Xcode open, create a new project

Its going to be an app

• Choose whatever name you like and were you want your project file to be.

remove the Main reference on the Main Interface, keep it empty

Delete the Main.view file and MOVE IT TO TRASH 🗑

Finally, remove the Main reference in the Info.plist

2- Let's setup the SceneDelegate

• In your scene function, setup the window that your app will show to come from a navigationController that contains our viewController, just as I did here:

this is the scene function

guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
let navigationController = UINavigationController()
navigationController.viewControllers = [ViewController()]
window.rootViewController = navigationController
self.window = window
window.makeKeyAndVisible()

It might look like this

• You can test if it worked out by going to your ViewController and setting the backgroundColor to a different color, it might look like this:

(I'm testing on the IPod Touch 7th generation)

3. Navigating with a button

• First let's create our button in our ViewController:

let button: UIButton = {
    let button = UIButton()
    return button
}()

• Let's define some properties to the button:

let button: UIButton = {
    let button = UIButton()
    button.setTitle("Show 2nd View", for: .normal)
    button.backgroundColor = .blue
    button.frame = CGRect(x: 50, y: 50, width: 200, height: 30)
    button.layer.cornerRadius = 15
    return button
}()

• Now, add the button to your ViewController View using:

view.addSubview(button)

• It might be looking like this:

• Ok, let's make the other view that will be shown when we tap the button

class SecondViewController: UIViewController{
    override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .green
    }
}

• Make an instance and call it on you first view controller

let secondViewController = SecondViewController()

• And then we'll add the function to the button in our main ViewController if the button was in a separated view we would have to make a delegate, fortunately we are using the default view of our viewController so we can make it directly on it.

@objc func tappedButton(){
    navigationController?.pushViewController(secondViewController, animated: true)
}

• Finally , let's add this function to our button's target so it calls it every time we tap the button, so go back to your buttons properties and add the target:

button.addTarget(self, action: #selector(tappedButton), for: .touchUpInside)

your code might look like this

it's done 🎉

4- Navigating with a tableViewCell

• First, lets create our tableView and add some properties

let tableView: UITableView = {
    let tableView = UITableView()
    tableView.frame = CGRect(x: 50, y: 90, width: 200, height: 400)
    tableView.backgroundColor = .systemPink 
    tableView.rowHeight = 50
    return tableView
}()

• make an extension for the UITableViewDelegate and UITableViewDataSource:

extension ViewController: UITableViewDelegate, UITableViewDataSource{
}

press the fix button to get the protocols

• Set the numberOfRows to 8:

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

• And set the cell you are going to show, in this tutorial we are using this one:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath as IndexPath)
    cell.backgroundColor = .purple
    cell.textLabel?.text = "\(indexPath.row + 1)˚ TableViewCell"
    return cell
}

• And then let's call it in our viewDidLoad to see what happens:

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "MyCell")
tableView.delegate = self
tableView.dataSource = self
view.addSubview(tableView)

your code might look like this

your simulator like this

• Finally you implement in your viewControllerDelegate a function called didSelectRowAt:

• and add this two little functions:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    navigationController?.pushViewController(secondViewController, animated: true)
    tableView.deselectRow(at: indexPath, animated: false)
}

its working! 🎉❤️

GitHub Repository: https://github.com/RinaldoJr4/NavigationMedium
For more tutorials follow me on Instagram: https://www.instagram.com/rinaldo_sbj/
Useful links:https://youtu.be/SzSTLZTL0_A https://stackoverflow.com/questions/40220905/create-uitableview-programmatically-in-swift https://stackoverflow.com/questions/24102191/make-a-uibutton-programmatically-in-swift https://www.raywenderlich.com/27854768-uibutton-configuration-tutorial-getting-started