λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
🍎 iOS/UIKit

[iOS/Swift] TableView λ₯Ό μœ„ν•œ Protocol :: Datasource, Delegate

by Danna 2021. 3. 1.
728x90
728x90

TableView λ₯Ό μœ„ν•œ Protocol

UITableView λ₯Ό μœ„ν•œ Protocol 은 UITableViewDataSource, UITableViewDelegate κ°€ μžˆλ‹€. μ—¬κΈ°μ„œ Protocol 은 TableViewλ₯Ό μ΄μš©ν•˜κΈ° μœ„ν•΄ ν•΄μ•Όν•  μΌλ“€μ˜ λͺ©λ‘, 즉 κ΅¬ν˜„ν•΄μ•Όν•  method 듀이닀. 

 

protocol μ€€μˆ˜λŠ” ν΄λž˜μŠ€κ°„ 상속을 ν•˜λ“―μ΄ μž‘μ„±ν•΄μ£Όλ©΄ λœλ‹€. UITableViewDataSource protocol μ˜ 경우, ν•„μˆ˜ κ΅¬ν˜„ ν•¨μˆ˜λ₯Ό μΆ”κ°€ν•˜μ§€ μ•ŠμœΌλ©΄, μ•„λž˜μ™€ 같은 μ—λŸ¬κ°€ λ°œμƒν•œλ‹€. Fix λ₯Ό λˆ„λ₯΄λ©΄ μžλ™μœΌλ‘œ μΆ”κ°€ν•΄μ€€λ‹€.

extension BountyViewController: UITableViewDataSource {
	
}

 

UITableViewDataSource

protocol UITableViewDataSource
πŸ’‘ The methods adopted by the object you use to manage data and provide cells for a table view.

Table view data source object λŠ” ν•΄λ‹Ή ν”„λ‘œν† μ½œμ„ μ±„νƒν•œλ‹€. Table view λŠ” 데이터 기반이고, 일반적으둜 제곡된 data source object λ₯Ό 톡해 데이터λ₯Ό μ–»λŠ”λ‹€. data source object λŠ” μ•±μ˜ 데이터λ₯Ό κ΄€λ¦¬ν•˜κ³ , table 의 cell 을 μƒμ„±ν•˜κ³  관리할 μ±…μž„μ„ κ°–λŠ”λ‹€. 

 

Data source object μ˜ μ±…μž„μ€ λ‹€μŒκ³Ό κ°™λ‹€. 

  • table 의 section κ³Ό row 의 개수λ₯Ό μ•Œλ €μ£ΌλŠ” 것
  • table 의 각 row 에 cell 을 μ œκ³΅ν•˜λŠ” 것
  • section header 와 footer 에 title 을 μ œκ³΅ν•˜λŠ” 것
  • table 의 index λ₯Ό μ„€μ •ν•˜λŠ” 것
  • κΈ°λ³Έ 데이터λ₯Ό λ³€κ²½ν•΄μ•Ό ν•˜λŠ” user λ˜λŠ” table 초기 μ—…λ°μ΄νŠΈμ— μ‘λ‹΅ν•˜λŠ” 것

TableView λ₯Ό μ΄μš©ν•˜κΈ° μœ„ν•΄μ„œ ν•„μˆ˜λ‘œ κ΅¬ν˜„ν•΄μ•Ό ν•˜λŠ” method κ°€ μžˆλ‹€. TableView 의 cell 이 λͺ‡κ°œμΈμ§€? Table view λ₯Ό μ–΄λ–»κ²Œ 보여쀄 것인지? μ— λŒ€ν•œ μ§ˆλ¬Έμ΄λ‹€. ν•΄λ‹Ή μ§ˆλ¬Έμ€ λ‹€μŒ method λ₯Ό κ΅¬ν˜„ν•¨μœΌλ‘œ λ‹΅λ³€ν•  수 μžˆλ‹€.

 

1. tableView(_:numberOfRowsInSection:)

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
  • νŠΉμ • section 에 ν‘œμ‹œν•  row 의 개수λ₯Ό λ¬»λŠ” method
  • return κ°’μœΌλ‘œ λͺ‡ 개의 셀을 보여쀄지에 λŒ€ν•œ 닡변을 κ΅¬ν˜„ν•˜λ©΄ λœλ‹€. 
  • section 에 따라 λ‹€λ₯Έ μ…€μ˜ 개수λ₯Ό λ°˜ν™˜ν•˜λ„λ‘ κ΅¬ν˜„ν•  수 μžˆλ‹€. 

2. tableView(_:cellForRowAt:)

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
  • νŠΉμ • μœ„μΉ˜μ— ν‘œμ‹œν•  cell 을 μš”μ²­ν•˜λŠ” method
  • cell 을 생성할 λ•Œ, custom cell 을 μž¬μ‚¬μš©ν•˜λ €λ©΄ dequeueReusableCell(withIdentifier:for:) method λ₯Ό μ΄μš©ν•œλ‹€.
  • cell 을 λ§Œλ“  후에, data 값듀을 톡해 cell 의 속성듀을 μ—…λ°μ΄νŠΈν•  수 μžˆλ‹€.
  • return κ°’μœΌλ‘œ UITableViewCell 을 상속받은 object λ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•œλ‹€. (nil λ°˜ν™˜μ‹œ μ—λŸ¬ λ°œμƒ)

 

UITableViewDelegate

protocol UITableViewDelegate
πŸ’‘Methods for managing selections, configuring section headers and footers, deleting and reordering cells, and performing other actions in a table view.

Table view delegate objectλŠ” ν•΄λ‹Ή ν”„λ‘œν† μ½œμ„ μ±„νƒν•œλ‹€. Table view 내에 클릭된 셀을 λ§€λ‹ˆμ§•ν•˜κ±°λ‚˜, μ„Ήμ…˜μ˜ header와 footer μ„€μ •, 셀을 μ‚­μ œν•˜κ±°λ‚˜ μž¬μ‘λŸ΄ν•˜κΈ° μœ„ν•΄ μ΄μš©ν•œλ‹€.

 

ν•΄λ‹Ή ν”„λ‘œν† μ½œμ˜ method 듀은 λ‹€μŒ κΈ°λŠ₯듀을 μ œκ³΅ν•œλ‹€.

  • custom header 와 footer view λ₯Ό λ§Œλ“€κ³  κ΄€λ¦¬ν•˜λŠ” 것
  • row, header, footer 의 높이λ₯Ό μ§€μ •ν•˜λŠ” 것
  • 더 λ‚˜μ€ 슀크둀 지원을 μœ„ν•΄ λ†’μ΄μ˜ μΆ”μ •μΉ˜λ₯Ό μ œκ³΅ν•˜λŠ” 것
  • row 의 λ“€μ—¬μ“°κΈ° μˆ˜μ€€μ„ μ§€μ •ν•˜λŠ” 것
  • μ„ νƒλœ row 에 λŒ€ν•΄ μ‘λ‹΅ν•˜λŠ” 것
  • table row λ₯Ό μŠ€μ™€μ΄ν”„ν•˜λŠ” λ“± μ•‘μ…˜μ— μ‘λ‹΅ν•˜λŠ” 것
  • table content λ₯Ό νŽΈμ§‘ν•  수 μžˆλ„λ‘ μ§€μ›ν•˜λŠ” 것

UITableViewDelegate ν”„λ‘œν† μ½œμ€ ν•„μˆ˜ κ΅¬ν˜„ method κ°€ μ—†λ‹€. λ‹€μŒμ€ 주둜 μž‘μ„±ν–ˆλ˜ method 이닀.

 

tableView(_didSelectRowAt:) 

optional func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)

 

  • delegate (λŒ€λ¦¬μΈ)μ—κ²Œ rowκ°€ μ„ νƒλ˜μ—ˆμŒμ„ μ•Œλ €μ£ΌλŠ” ν•¨μˆ˜. 
  • 셀을 μ„ νƒν–ˆμ„ λ•Œ μ–΄λ–»κ²Œ 할지에 λŒ€ν•΄ κ΅¬ν˜„ν•  수 μžˆλŠ” ν•¨μˆ˜μ΄λ‹€.
  • μ˜ˆμ‹œλ‘œ, TableView κ°€ List page 이고 Detail page κ°€ μžˆλ‹€λ©΄ ν•΄λ‹Ή method μ—μ„œ performSegue λ₯Ό ν˜ΈμΆœν•΄ Detail page 둜 λ„˜μ–΄κ°€λŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆλ‹€.
extension ListViewController: UITableViewDelegate {

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

곡식 λ¬Έμ„œ

μ°Έκ³  λ¬Έμ„œ

728x90
728x90