iOS- memo 앱 만들기 # 7 메모 보기2

memo 앱 만들기 # 7 메모 보기2

 

tableView에 Prototype Cell 추가

 

 

 

이전에 말했던것 처럼 top 여백이 자동으로 추가되기 때문에 네비게이션 바와 겹치지 않는다.

 

그리고 cell의 style을 Basic으로 바꾼다

 

그리고 Identifier 추가

 

 

이어서 tableView에 cell을 추가한다

 

table VIew를 클릭하고 ProtoType Cells를 2로 바꾼다.

 

그리고 두번째 cell의 Identifier를 dateCel로 바꾼다.

 

두번째 cell의 Label을 선택하고

 

 

attribute Inspector에서 color 옵션을 light gray로 바꾸고 center로 설정

 

 

이제 해야하는 작업은 Data Source와 Delegate를 연결하는 것!!

 

보기화면에서는 tableView의 이벤트를 처리하지 않을 것이기 때문에 Data source만 연결

 

 

[DetailViewController.swift] 

 

Data Source를 구현하는 과정은 두단계

 

1. DetailViewController가 UITableViewDataSource 프로토콜을 채용한다고 선언해야 한다.

 

extension으로 선언

import UIKit

class DetailViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

extension DetailViewController: UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }
    
    
}

 

 

이제 두개의 메소드 안에 코드를 넣어 줘야함

extension DetailViewController: UITableViewDataSource{
    
    // 표시할 셀 숫자를 리턴해주는 메소드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    
    // tableView가 어떤 cell을 표시할지 나타내는 메소드
    //
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        switch indexPath.row {
        // 첫번째 cell
        case 0:
            let cell = tableView.dequeueReusableCell(withIdentifier: "memoCel", for: indexPath)
            return cell
            
        case 1:
            let cell = tableView.dequeueReusableCell(withIdentifier: "dateCel", for: indexPath)
            return cell
        default:
            fatalError() // 에러발생
        }
    }
    
    
}

그럼 위화면처럼 두개의 셀이 표시되는 것을 확인할 수 있음