TableView 연결하기

주간 날씨를 보여주는 Table View를 만들어보자.

현재 뷰 상태

TableView 설정방법

1. TableView Cell 생성

(Cocoa Touch Class를 이용해서 생성하며, xib도 같이 생성하자.

class file과 xib 파일 outlet 연결

import UIKit

class WeaklyWeatherTableViewCell: UITableViewCell {

    @IBOutlet weak var weatherIconImageView: UIImageView!
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var weatherLabel: UILabel!
    @IBOutlet weak var maximumTeperatureLabel: UILabel!
    @IBOutlet weak var minimumTemperatureLabel: UILabel!
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}

xib의 Attribute Controller에서 id 설정

Tableview datasource, delegate 설정

애플 공식 문서

import UIKit

class ViewController: UIViewController {
    
    // delegate, datasource 설정
    @IBOutlet weak var weaklyWeatherTableView: UITableView! {
        didSet {
            weaklyWeatherTableView.dataSource = self
            weaklyWeatherTableView.delegate = self
        }
    }
    
    let weatherData = ["16", "24", "17", "34", "16", "24", "17"]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // xib 설정
        weaklyWeatherTableView.register(UINib(nibName: "WeaklyWeatherTableViewCell", bundle: nil), forCellReuseIdentifier: "weatherTableViewCell")
        
    }
}


extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        weatherData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = weaklyWeatherTableView.dequeueReusableCell(withIdentifier: "weatherTableViewCell", for: indexPath) as! WeaklyWeatherTableViewCell
        
        cell.maximumTeperatureLabel.text = weatherData[indexPath.row]
        
        return cell
    }
}