Table View Cell 내 Content View에 원하시는 Component를 추가합니다.
이제 View Controller에 연결된 Class(Source 단)로 이동합니다.
(연결된 Class 정보를 잘 모르시겠다면, 처음 기본적으로 생성된 Controller의 Class는 보통 ViewController.swift입니다. 좌측에서 ViewController.swift 파일을 선택하시거나, 하단의 이미지처럼 ViewController의 Class를 확인 후 이동해 주세요.)
여기까지 따라오셨다면, Storyboard에서 초기작업이 끝났습니다.
단, 완벽히 끝난건 아니고, 이후부터는 Class(Source)와 Storyboard(View)를 왔다갔다하시면서 작업을 해야합니다.
ViewController Class 작업
처음 생성된 ViewController
Table View를 이용하기 위해서는 이동하신 Controller에 Table View를 동작하기 위한 Class를 상속받아야 합니다.
여기서는 Table View의 기능을 처리할 delegate(대리자) - UITableViewDelegate와 Tablew View Cell등을 제어하여 데이터를 처리할 datasource(데이터 소스) - UITableViewDataSource를 상속해줘야 합니다.
(저는 extension(확장)하는 방식으로 진행했습니다.)
- UITableViewDelegate : Table View에서 Cell을 선택하거나, 어떠한 기능을 처리
- UITableViewDataSource : Table View에서 Cell을 보여주기 위해 Table View의 Row나 Section은 어떻게 구현을 할것이며, Cell은 어떻게 만들어줄 것인지를 제어
-> UITableViewDataSource 내에는 필수(Required) 함수들이 있습니다.
-> func tableView(func tableView(UITableView, numberOfRowsInSection: Int) -> Int
- 화면에 보여줄 row의 갯수를 나타냅니다. 여기서는 cellTitle.count 이므로 선언된 cellTitle 변수에는 3개의 값이 들어 있으므로 3을 return하게 됩니다.
extionsion ViewController class의 [func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell] 함수
- 화면에 보여줄 cell을 지정합니다. function내에는 cellName("customCell")의 customCell을 선언했고, 이 customCell에 있는 Component imageView_custom과 label_custom의 정보(이미지, 텍스트)를 변경해주고 있습니다. (즉, Cell 내부 이미지와 텍스트는 짝이 되어 보일겁니다.)
완성된 프로젝트 Run
이제 완성된 프로젝트를 실행해 봅시다!
아이폰 11 Simulator
ViewController.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tableView_custom: UITableView!
let cellName:String = "customCell"
let cellTitle : Array<String> = ["pencil.circle", "doc.circle", "bolt.circle"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
tableView_custom.delegate = self
tableView_custom.dataSource = self
}
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return cellTitle.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let customCell = tableView_custom.dequeueReusableCell(withIdentifier: cellName, for: indexPath) as! CustomCell
customCell.imageView_custom.image = UIImage(systemName: cellTitle[indexPath.row])
customCell.label_custom.text = cellTitle[indexPath.row]
return customCell
}
}
cellName = String 형식으로, 위에서 정의한Table View Cell의 Identifier 입니다. 저는 편의상 "customCell"로 지정하였으므로 cellName에는 "customCell" 대입해주고 있습니다.
cellTitle = Array 타입으로, ImageView의 iamge 정보를 나타냅니다. 더불어 Label의 text에 image값을 String 형식으로 넣어주기 위한 변수입니다.
viewDidLoad 함수의 [tableView_custom.delegate = self]
- 기존에 선언해둔 TableView - tableView_custom에 delegate를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDelegate의 정보를 대입합니다.)
viewDidLoad 함수의 [tableView_custom.dataSource = self]
- 기존에 선언해둔 TableView - tableView_custom에 dataSource를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDataSource의 정보를 대입합니다.)
- 화면에 보여줄 row의 갯수를 나타냅니다. 여기서는 cellTitle.count 이므로 선언된 cellTitle 변수에는 3개의 값이 들어 있으므로 3을 return하게 됩니다.
extionsion ViewController class의 [func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell] 함수
- 화면에 보여줄 cell을 지정합니다. function내에는 cellName("customCell")의 customCell을 선언했고, 이 customCell에 있는 Component imageView_custom과 label_custom의 정보(이미지, 텍스트)를 변경해주고 있습니다. (즉, Cell 내부 이미지와 텍스트는 짝이 되어 보일겁니다.)
CustomCell.swift
import UIKit
class CustomCell: UITableViewCell {
@IBOutlet weak var imageView_custom: UIImageView!
@IBOutlet weak var label_custom: UILabel!
@IBOutlet weak var button_custom: UIButton!
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
}
}
앞서 마우스 우클릭 드래그를 통해 선언해준 Componet 정보들이 담겨있습니다.
Cell 내부 ImageView -> imageView_custom
Cell 내부 Label -> label_custom
Cell 내부 Button -> button_custom
간단(?)하게 설명만 하려했더니 생각보다 길어져버렸네요;;;
스터디 하는 김에 겸사겸사 하긴했는데.. 내용이 너무 길어져버려서..;;;
혹시 이해안가시면 댓글 작성해주세요. 최대한 다시 설명드리겠습니다 ㅠㅠ
버전정보 (v1.0)
- v1.0 2020.07.22 배포
* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.
* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.
* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.
