iOS Tutorials: Triggering TableViewCell to visit site

Objective: 

Create a list of table with a link, when click upon each link, it will redirect you to the website of that link.

Steps:

Create your project and go to the Main.storyboard. On the Main.storyboard, these are the some of the things that needs to be done:

  1. Drag WebKit View from the Object library onto ViewController and stretch it all out.
  2. Drag TableViewController from Object library
  3. Select TableViewController on Main.storyboard, look on the menu bar and click Editor > Embed in > Navigation Controller

Click on the TableViewCell and drag control to the view controller and click Show. With that, you will notice that a back button will show up allowing you to move back and forth the screen. This couldn’t have been done without embedding the navigation controller. 

I usually love to rename it to “cell” to make things easy. 

Let’s rename the segue

Lastly, we’ll have to implement some features on the Info.plist or else we won’t be able to access any of the links.

Now lets jump into coding section:

Here i will create an array that contains the name of the site and the link of the site. There are definitely a lot of different way to achieve this but this is what I am going to use here.

class TableViewController: UITableViewController {

    var name = ["Facebook","Twitter","Instagram","Linkedin"]
    var links = ["http://www.facebook.com","http://www.twitter.com","http://www.instagram.com","http://www.linkedin.com"]

We’ll have to implement some of the protocol for the UITableViewController.

  1. The first function is required and we will return 1 since we only need 1 section.
  2. The second function basically how many data we have in our array. Notice that I am asking it to track name’s array and return however many information that are stored in the array.
  3. The third function projects the information, remember that I have rename the cell, this is where it is being implemented. This is where I am calling the information to be projected on the tableview with the data that I have in name.
  4. The fourth function is where I implement the function of moving between screen. Remember that we have rename the segue to showLinks, this is where it will be connected to the next screen. We are also passing some links information into the next screen here.
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

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

    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        cell.textLabel?.text = name[indexPath.row]

        return cell
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showLinks" {
            if let indexPath = tableView.indexPathForSelectedRow {
                let destination = segue.destination as? ViewController
                destination?.links = links[indexPath.row]
            }
        }
    }

In the next screen, we will have to import WebKit to implement some of the features.

  1. Here a variable is created to hold the information passed by the previous screen.
  2. Then we will passed the links onto the web to be accessed.
import UIKit
import WebKit

class ViewController: UIViewController {

    var links: String = ""
    
    @IBOutlet weak var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL (string: links)
        let request = URLRequest(url: url!)
        webView.load(request)
    }


}

The end result would look the following GIF.

The code is available at GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*