iOS ) tableView Delegate, Datasource tutorial

안녕하세요 :)

오늘은 테이블뷰에대해 공부해볼게요 :)

다들 아시다시피 Xcode에는 

Table View Controller와 Table View가 있습니다.

저번에는 Table View Controller를 가지고 놀아봤고, 

오늘은 저 밑의 Table View를 가지고 놀아봅시다.

Table View의 장점은 컨트롤러 처럼 꽉 찬 테이블이 아닌,

부분적인 테이블뷰를 보여줄 수 있죠. 

바로 이렇게요. 

오늘은 저거를 만들어볼겁니다!!!!!!!!!!!!!!! 넘 쉽죠..

하지만 왕초보분들은 어려울 수도 있으니!! 같이 해봐요 ㅎㅎ 간단하답니다. 

오늘은 초보자모드로 돌아가서 하나하나 차근차근 해보려고해요 :-)

자.. 이렇게 프로젝트를 하나 만들어주시고, 

우리는 Table View Controller가 아닌 Table View를 쓴다고 했죠?

스토리보드로 가봅시다. 

Table View를 추가해줍시다!

그러면..이제 뭘해야하죠?

네! 아울렛을 추가해주어야겠죠 ㅎㅎ

자, 여기까지 잘 따라오셨나요? ㅎㅎ

이제, Delegate를 채택해줄 시간이에요. 

 UITableViewDataSource와 UITableViewDelegate를 채택해주세요.

그러면...

이러한 오류를 보실 수 있게...됩니다.....ㅎ..

"너의 viewController가 UITableViewDataSource의 프로토콜을 준수하고 있지 않은 것 같네 ㅎㅁㅎ;;"

이 글에서 오류가 나는 이유를 자세하게 설명했어요. 자세하게 알고싶으시면 한번 읽어보세요 XD

생각나는 분 계신가요?

네!! 바로 UITableViewDataSource에 정의된 optional이 붙지 않은 함수들을 구현하지 않아서 그렇죠? 

optional이 붙지않은 함수들은 반드시 구현해주어야 한답니다XD

UITableViewDataSource가 문제니 UITableViewDataSource에 가서 뭘 구현해야 하는지 알아보죠.

(옛날에는 막 인터넷찾아서 구현해야 할 함수가 뭔지 찾고 그랬는데.. 그냥 문제가 되는 프로토콜에 가서 optional이 붙지 않은 애들을 복붙해오면 된답니다XD)

Command를 누른채 UITableViewDataSource를 누르면, UITableViewDataSource가 정의된 곳으로 갈 수 있다는 것. 아시죠? 아니면, UITableViewDataSource를 오른쪽클릭하고, Jump to Definition을 클릭하여 가시면 된답니다.

자..오긴 왔는데..optional이 붙은 메소드와 안붙은 메소드가 보이네요.

위 두개가 구현이 안되어서 오류를 냈던거였어요..!!

그럼 어떡하면 된다구요?

이렇게 드래그 하신 뒤에,  복사(Command + C)를 눌러주시고,

viewController.swift에 돌아오셔서 (왼쪽으로 스와이프 하시면 가집니다.)

붙혀넣기를 해주시면 된답니다..!!

우리는 프로토타입?만 복사했으니 구현을 시작해야겠죠? 

그러니까 중괄호를 열고 닫아주는 것도 잊지마세요!!

그러면 이제 "너 프로토콜 준수 안하는데 ㅎㅎ;"라는 오류는 없어졌지만...

너 리턴값 빠졌다는 오류가 나오게 됩니다.

당연하겠죠! 리턴값을 저렇게 적어놨는데 아무것도 리턴을 안하니까요 ㅎㅎ

자, 하나하나 구현을 해볼까요?

그 전에!!! Delegate를 채택했으면, 대리자를 위임하는과정이 반드시 필요하다고 그랬죠?

너가 대신해줘~~이렇게요.

viewDidLoad()에 가셔서.

대리자를 위임하는 코드를 작성해주세요. 

tableView는 아까 아울렛으로 만든 Table View의 이름이겠죠?

그리고, 우리는 A,B,C,D,E를 테이블에 넣고싶은거죠? 그러니까 TableViewController에서 했던 것 처럼, 배열을 하나 만들어주자구요.

또!! TableView는 dequeueReusableCell 메소드를 사용하죠? 

이때 필요한게 뭐가 있었는지 기억나시나요?

네..ㅎㅎ

바로 cell의 identifier가 필요합니다.

하나 정해주자구요.

cell Identifier의 이름을 유심히 봐주세요 XD

그리고 이제 구현해야하는 함수로 가봅시다.

먼저 이함수. TableViewController에서도 본거죠? ㅎㅎ

이 함수가 무슨 역할을 한다고 그랬죠?

네. 섹션하나에 들어갈 row의 개수라고 했죠?

우리는 지금 섹션은 없고..A, B, C, D, E가 들어갈 건데,

return 5를 해주면 되겠죠? 

하지만..우리는 데이터가 바뀌면 코드가 바뀌는 그런 불편함을 줄이기 위해

배열의 카운트를 리턴해주자구요 ㅎㅎ

그리고 다음 함수!!

이 역시... TableViewController에서 봤던거죠? 

자...UITableViewCell타입을 리턴하니까, 

UITableViewCell타입의 cell을 하나 만들어줍시다.

let cell : UITableViewCell

그리고 이제..대망의 dequeueReusableCell메소드를 쓸 시간..

dequeueReusableCell에 대해서는 여기에서 자세하게 썼으니, 자세한 것을 알고싶으시면, 읽어보시고 오세요!!

ㅎㅎ

withIdentifier에는 우리가 위에서 지정해줬던 cell의 Identifier를 써주고,

 for에는 indexPath를 써줍시다.

그리고 이제 cell에다가 데이터를 넣어야겠죠?

저 textLabel은 따로 만들어주지 않아도 cell에 있는거랍니다 XD

왜 indexPath.row를 넣어주는지는 여기에 잘 설명해놓았습니다. 참고하세요!!

그리고 cell을 반환해줍니다.

자...이제 다 끝난것 같네요.

실행해볼까요? 

그러면!

네..이러한 오류를 보실 수 있으십니다...

왜 오류를 냈는지 한번 볼까요?

unable to dequeue a cell with identifier this is zedd's cell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard

this is zedd's cell로 identifier를 가지는 셀을 디큐할 수 없습니다.

- 반드시 nib 또는 클래스를 등록해야 합니다. 또는 스토리보드에서 프로토타입 셀을 연결시키세요.

라고 하네요..

왜 이런 오류가 난 걸까요?

네 정답은.. 우리는 Identifier를 만들어줘서 파라미터로 넘겨주기 했지만, 

cell에 너의 Identifier는 "this is zedd's cell"이야!!라고 해주는 과정이 없는거죠. 

그럼 어떻게하면 될까요? 

dequeueReusableCell에 대한 애플 문서를 보게되면, 

중요!

당신은 반드시 클래스 또는 nib파일을 register (_ : forCellWithReuseIdentifier :)를 사용하여 등록하거나, register(_ : forCellWithReuseIdentifier :) 메소드를 이 메소드(dequeueReusableCell) 전에 호출해야 합니다. 

라고 하네요.

한번 등록해볼까요?

viewDidLoad()로 가주세요.

self.tableView.register(UITableViewCell.self,forCellReuseIdentifier: cellIndentifier)

그리고 위 코드를 넣어주세요. 

저렇게 cellIdentifier라는 변수를 만들지 않고, 바로 스트링을 통해 지정해주어도 괜찮답니다. 그렇게하면, dequeueReusableCell에서도 똑같은 스트링으로 파라미터에 값을 주어야겠죠?

자, 이제 한번 실행해볼까요?

짠!!! ㅎㅎ 잘 나오죠?

그리고.. Xcode가 추천해준 다른방법. 스토리보드에가서 프로토타입 셀을 연결시켜봐!!

한번 해볼까요?

Table View Cell을 원래 있던 Table View에 추가해주시면,

cell의 Identifier를 지정해줄 수 있게 됩니다.

여기에 자기가 쓰고싶은 Identifier를 써주세요. 엔터를 치시는 것도 잊지마세요!!

우리는 지금 register메소드가 하는 일을 스토리보드를 통해서 해준거니,

viewDidLoad()에 있는 register부분은 필요없게됩니다!

이 부분을 주석처리 해주시고, 다시 실행시켜볼게요.

그러면!!

아까와 똑같은 결과를 얻을 수 있게 된답니다 :-)

전체 소스코드도 올려드릴게요.(register메소드를 사용한 버전)

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    

    let cellIndentifier = "your cell Identifier"

    

    let arr = ["A","B","C","D","E"]

    

    override func viewDidLoad() {

        super.viewDidLoad()

        tableView.delegate =  self

        tableView.dataSource = self

    self.tableView.register(UITableViewCell.self,forCellReuseIdentifier: cellIndentifier)

        

   }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{

        

        return arr.count

    }

    

    

    

    

    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{

        

        let cell : UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellIndentifier , for: indexPath)

        

        cell.textLabel?.text = arr[indexPath.row]

        

        return cell

    }

}

ㅎㅎ 어떠신가요? 

궁금한 점이나, 지적할 부분이 있으시다면

 댓글이나, PC화면에서 볼 수 있는 채널서비스를 이용해주세요 XD

도움이 되었으면 좋겠어요!!!