DEV Community

loading...

[Swift] Creating a Simple App Using TableView

Nina Hwang
πŸ‘©πŸ»β€πŸ’» ν™©μ±„μ˜ 🐣 Junior Backend Developer
・3 min read

Artworks Application

Let's create an iOS application that shows some artworks and the name of the artists. To show a list of contents, you can use TableView.
Alt Text

ArtworksViewController

First, delete the default ViewController.swift and create a new ViewController called ArtworksViewController. This will be the main page of the app.
Open Main.storyboard and add a Table View. Then, add a Table View Cell inside of the Table View. A cell will contain the image, title, and artist name of a painting, so add an ImageView and two Labels in the Table View Cell.
Alt Text

// ArtworksViewController.swift

import UIKit

class ArtworksViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    struct Painting {
        let title: String
        let artist: String
    }
    let paintingArray = [
        Painting(title: "Dance", artist: "Henri Matisse"),
        Painting(title: "Impression, Sunrise", artist: "Claude Monet"),
        Painting(title: "Over the Town", artist: "Marc Chagall"),
        Painting(title: "Portrait of Adele Bloch-Bauer", artist: "Gustav Klimt"),
        Painting(title: "Starry Night", artist: "Vincent van Gogh"),
        Painting(title: "The Garden of Earthly Delights", artist: "Hieronymus Bosch"),
        Painting(title: "The Lovers II", artist: "RenΓ© Magritte"),
        Painting(title: "μ²­μ‹¬λŒ€", artist: "김홍도"),
        Painting(title: "ν™©μ†Œ", artist: "이쀑섭"),
    ]

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showDetail" {
            let vc = segue.destination as? DetailViewController
            if let index = sender as? Int {
                vc?.art_title = paintingArray[index].title
                vc?.artist = paintingArray[index].artist
            }
        }
    }

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

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? ListCell else {
            return UITableViewCell()
        }

        let img = UIImage(named: "\(paintingArray[indexPath.row].title).jpg")
        cell.imgView.image = img
        cell.titleLabel.text = paintingArray[indexPath.row].title
        cell.artistLabel.text = paintingArray[indexPath.row].artist

        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        performSegue(withIdentifier: "showDetail", sender: indexPath.row)
    }
}

class ListCell: UITableViewCell {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var artistLabel: UILabel!
}


Enter fullscreen mode Exit fullscreen mode
  1. Create an array of artworks
  2. Name each views inside of the Table Cell View and connect them. Alt Text
  3. Create a function which determines the total number of cells Alt Text It will return the total length of the array.
  4. Name the identifier of the Table Cell View as 'cell'. Then, set the values of each views. Alt Text

DetailViewController

Create another ViewController which shows a modal.
Alt Text
It contains an ImageView and two Labels. It also needs a close button.

// DetailViewController.swift

import UIKit

class DetailViewController: UIViewController {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var artistLabel: UILabel!

    var art_title: String?
    var artist: String?

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

    func updateUI() {
        if let title = self.art_title, let artist = self.artist {
            let img = UIImage(named: "\(title).jpg")
            imgView.image = img
            titleLabel.text = art_title
            artistLabel.text = artist
        }
    }

    @IBAction func close(_ sender: Any) {
        dismiss(animated: true, completion: nil)
    }

}
Enter fullscreen mode Exit fullscreen mode
  1. Name the views and connect them. Alt Text

Connect two ViewControllers

  1. Name the Storyboard Segue as 'showDetail'
  2. Create a 'prepare' function in ArtworksViewController.swift Alt Text
  3. Create a function that perform segue when a row is selected. Alt Text
  4. In DetailViewController.swift, create a function that updates values of each view. And call it when the view is loaded. Alt Text

Discussion (0)