iOS - UITableView(2_TableViewCell 커스터마이징, 데이터전달)

TableViewCell 커스터마이징

1. 레이아웃 설정
   스토리보드를 통해 ViewController에 TableView를 추가하고,
   TableViewCell에 ImageView, Label, Switch를 넣었다.
   cell의 identifier를 "myCell"로 설정했다.
   

2. 테이블뷰를 해당 ViewController파일에 outlet으로 연결하고,
   TableViewCell 파일을 만들고 cell의 커스텀클래스로 지정해준 뒤
   cell안의 요소들을 outlet으로 연결해주었다.

3. ViewController 파일에서 extension 해서 UITableViewDataSource 프로토콜을 채택하고 delegat를 self로 설정하고 필수 메소드를 작성한다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
   let img = ["heart", "heart.fill", "heart.circle", "heart.circle.fill"]
    let label = ["1", "2", "3", "4"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }
    
}


extension ViewController: UITableViewDelegate {
      
}


extension ViewController: UITableViewDataSource {
    
    // 행의 개수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return img.count
    }
    
    // 등록했던 cell identifier인 "myCell"을 재사용한다.
    // as! 타입캐스팅으로 TableViewCell 타입으로 다운캐스팅 후 아울렛 변수에 접근한다.
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath) as! TableViewCell
        cell.myImage.image = UIImage(systemName: img[indexPath.row])
        cell.label.text = label[indexPath.row]
        return cell

    }
    
}

---

데이터 전달

1. 뷰컨트롤러를 하나 더 만들고 NextViewController 파일 생성 후 두번째 뷰컨트롤러 커스텀 클래스를 NextViewController로 설정했다.
   셀에서 NextViewController로 Segue를 연결하고 Segue Identifier를 "mySegue"로 설정했다.

2. NextViewController 파일에 ImageView와 Label을 연결했다.

3. NextViewController 파일에서 데이터를 전달받을 변수를 만들고 이미지뷰와 레이블을 연결해준다.

import UIKit

class NextViewController: UIViewController {

    @IBOutlet weak var myImage2: UIImageView!
    @IBOutlet weak var label2: UILabel!
    
    var nextImage: String?
    var nextLabel: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myImage2.image = UIImage(systemName: nextImage!)
        label2.text = nextLabel!
        
    }

}

4. ViewController 파일에서 override prepare 메소드를 구현한다.

  override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "mySegue"{
            if let destination = segue.destination as?
                NextViewController {
                if let selectdeIndex =
                    self.tableView.indexPathForSelectedRow?.row {
                    destination.nextImage=img[selectdeIndex]
                    destination.nextLabel=label[selectdeIndex]
                }
            }
        }
    }

---

전체코드

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    let img = ["heart", "heart.fill", "heart.circle", "heart.circle.fill"]
    let label = ["1", "2", "3", "4"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
    }
    
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "mySegue"{
            if let destination = segue.destination as?
                NextViewController {
                if let selectdeIndex =
                    self.tableView.indexPathForSelectedRow?.row {
                    destination.nextImage=img[selectdeIndex]
                    destination.nextLabel=label[selectdeIndex]
                }
            }
        }
    }
    
}

extension ViewController: UITableViewDataSource {
    
    // 행의 개수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return img.count
    }
    
    // 등록했던 cell identifier인 "myCell"을 재사용한다.
    // as! 타입캐스팅으로 TableViewCell 타입으로 다운캐스팅 후 아울렛 변수에 접근한다.
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath) as! TableViewCell
        cell.myImage.image = UIImage(systemName: img[indexPath.row])
        cell.label.text = label[indexPath.row]
        return cell

    }
    
}

import UIKit

class NextViewController: UIViewController {

    @IBOutlet weak var myImage2: UIImageView!
    @IBOutlet weak var label2: UILabel!
    
    var nextImage: String?
    var nextLabel: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myImage2.image = UIImage(systemName: nextImage!)
        label2.text = nextLabel!
        
    }

}

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var myImage: UIImageView!
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var mySwitch: UISwitch!
    
    
    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
    }

}