tableview

안드로이드의 listview, recyclerview 처럼 ios에서도 여러 개의 동일한 형태의 아이템을 리스트 형태로 보여주는 UI 라이브러리가 있는데 바로 tableview 다. ios의 tableview는 크게 여러 개의 아이템을 바인딩하는 tableview와 각 table 안에 item을 그리는 cell로 이뤄져 있는데 안드로이드의 recyclerview와 viewholder 간의 관계와 동일하게 보면 될 것 같다. 이번 포스트에서는 view controller에서 가지고 있는 데이터를 tableview를 이용해서 리스트의 형태로 보여주는 간단한 예제를 다뤄보려고한다. 

 

1. cell 생성 

 

테이블에서 보여줄 아이템의 UI를 스토리보드의 형태로 그리는 작업이다. New File -> Cocoa Touch Class -> Subclass Of UITableViewCell 선택, Also create XIB file 선택 으로 아이템의 UI를 직접 그릴 수 있다. 스토리보드에서 했던것 처럼 디자인 하고, Cell의 identifier 값을 입력해둔다.

 

cell도 storyboard처럼 assitant를 사용해서 편집 할 수 있다.

 

2. tableview 초기화 

 

선작업으로 스토리보드에 추가한 TableView를 ViewController에 바인딩하고 리스트에 보여줄 아이템을 messages 변수 내에 담았다.

class ChatViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var messageTextfield: UITextField!
    
    var messages: [Message] = [
        Message(sender: "1@2.com", body: "Hey"),
        Message(sender: "a@b.com", body: "Hello!"),
        Message(sender: "1@2.com", body: "What's up")
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        title = K.appName
        tableView.delegate = self
        navigationItem.hidesBackButton = true
        
        tableView.register(UINib(nibName: "MessageCell", bundle: nil), forCellReuseIdentifier: "ReusableCell")
    }
}

extension ChatViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // click listener
        print(indexPath.row)
    }
}

ViewController 내에서 tableview의 delegate과 datasource를 초기화해준다. tableView의 변수 delegate는 tableview 내의 item을 클릭 할 때 이벤트를 받기 위한 콜백이고 dataSource는 ViewController에서 갖고 있는 아이템을 바인딩하기 위함이다. 

 

그 아래 tableView.register() 함수를 호출하는데 이것은 tableview에서 사용할 cell을 등록하는 작업이다. nibName으로 커스텀 디자인한 cell을 선택할 수 있는데 앞서 디자인한 파일인 "MessageCell"을 선택하고 forCellReuseIdentifier로는 앞서 정의한 "ReusableCell"을 둔다. 

 

3. data 바인딩

 

 extension ChatViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messages.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ReusableCell", for: indexPath) as! MessageCell
        
        cell.label.text = messages[indexPath.row].body
        return cell 
    }
}

 

tableView.dataSource = self 을 구현하는 부분이며 실제로 ViewController에서 갖고 있는 메시지에 넣는 작업이다. 첫번째 함수에서는 item으로 표시할 메시지의 개수를 리턴하고 두번째 함수에서는 tableview에서 만든 cell에 데이터를 등록한다. 앞서 cell의 identifier을 ReusableCell으로 지정했으므로 withIdentifier로 동일한 값을 넣어서 받을 수 있는 메시지 셀을 받고 MessageCell로 타입캐스팅해서 클래스에 값을 입력하는 용도로 쓸 수 있다.

 

4. 구현 결과