삽화 신청

일부 작품과 아티스트 이름을 표시하는 iOS 애플리케이션을 만들어 보겠습니다. 내용 목록을 표시하려면 TableView를 사용할 수 있습니다.

삽화보기 컨트롤러

먼저 기본 ViewController.swift를 삭제하고 ArtworksViewController라는 새 ViewController를 만듭니다. 이것은 앱의 메인 페이지가 될 것입니다.
Main.storyboard를 열고 테이블 보기를 추가하십시오. 그런 다음 테이블 보기 내부에 테이블 보기 셀을 추가하십시오. 셀에는 그림의 이미지, 제목 및 아티스트 이름이 포함되므로 테이블 보기 셀에 ImageView와 두 개의 레이블을 추가합니다.

// 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!
}

아트웍 배열 만들기

테이블 셀 보기 내부의 각 보기에 이름을 지정하고 연결합니다.

총 셀 수를 결정하는 함수를 만듭니다.

배열의 총 길이를 반환합니다.

테이블 셀 보기의 식별자 이름을 'cell'로 지정합니다. 그런 다음 각 보기의 값을 설정합니다.

디테일뷰 컨트롤러

모달을 표시하는 다른 ViewController를 만듭니다.

여기에는 ImageView와 두 개의 레이블이 포함됩니다. 닫기 버튼도 필요합니다.

// 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)
    }

}

보기의 이름을 지정하고 연결합니다.

두 개의 ViewController 연결

Storyboard Segue의 이름을 'showDetail'로 지정합니다

.

ArtworksViewController.swift에서 '준비' 기능을 만듭니다.

행이 선택되면 segue를 수행하는 함수를 만듭니다.

DetailViewController.swift에서 각 보기의 값을 업데이트하는 함수를 만듭니다. 뷰가 로드될 때 호출합니다.