[IOS] TableView 알아보기!

오늘은 tableView를 사용했는데 지금까지 사용했던 UI중 신경쓸게 가장 많았습니다...

그래서! 오늘은...

---

TableView  알아보기!

tableView 추가하기

처음으로 간단하게 tableView를 추가했는데 아무것도 없는 모습입니다.

셀을 추가하고 어떻게 사용하는지 간단하게 알아보도록 하겠습니다!

 

tableview inspector

TableView를 선택하고 속성Inspector를 확인하면 prototype Cell 속성을 이용해 셀의 수를 조정할 수 있습니다.

 

다른방법으로 cell 추가하기

위와 같은 방식으로 끌어다 cell을 생성할 수 있습니다.

 

cell Inspector

 

셀은 스타일을 가지고 있고 위의 화면처럼 스타일이 존재합니다.

 

• Basic - 좌측에 title을 표시합니다.
• Right Detail - 우측에 Detail을 표시합니다.
• Left Detail - title과 detail이 좌측에 표시됩니다.
• Subtitle - 좌측 title 밑에 detail을 표시합니다.

그리고 셀에는 식별자를 부여할 수 있습니다!

코드로도 식별자를 부여할 수 있는데, 아래처럼 셀의 식별자를 부여할 수 있습니다.

tableView.register(UITableViewCell.self,forCellReuseIdentifier: "HMCell")

셀의 식별자를 부여하는 이유는 셀 재사용시 사용되기 때문인데, 아래에서 다른 함수와 함께 알아보겠습니다.

 

Cell까지 알아봤으니 이제 table에 값을 추가하는 법을 알아보겠습니다

 

먼저 ViewController에 TableView의 Outlet변수를 생성해줍니다.

@IBOutlet weak var tableView: UITableView!

그리고 delegate를 채택해줍니다.

override func viewDidLoad() {
        super.viewDidLoad()
        //delegate 위임
        self.tableView.dataSource = self
        self.tableView.delegate = self
} 

extension ViewController: UITableViewDataSource, UITableViewDelegate {
}

꼭 extenstion을 하여 채택을 하지 않아도 되지만 코드가 많을땐 밖으로 빼 주는 것이 가독성에 도움이 된다고 합니다!

그리고 viewDidLoad에 delegate를 위임하는 코드도 꼭 넣어줍니다.

 

이렇게 하면 끝나는게 아니라 필수 메서드를 작성해야 합니다.

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.arr.count //row 갯수를 반환하는 함수
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //cell을 반환하는 함수! 
    }
}

extension ViewController: UITableViewDelegate {
	//얘는 필수 없음.
}

numberOfRowsInSection은 row갯수를 반환하여 tableView의 row를 표시해줍니다.

 

cellForRowAt은 return이 UITableViewCell인 걸 보면 indexPath로 각 row의 cell의 정보를 반환하는 함수입니다.

그렇다면 cell의 정보를 만들어서 반환하는 코드를 만들어보겠습니다.

 

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //재사용 가능한 셀을 가져오고 값을 넣어줌
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        let task = self.tasks[indexPath.row]
        
        //cell.textLabel?.text = task.title //label을 가져와서 하는 방식은 deprecated
        //defaultContentConfiguration을 사용해 content 내용을 정의해주고 cell에 넣어준다.
        var content = cell.defaultContentConfiguration()
        content.text = task.title
        cell.contentConfiguration = content
        
        return cell
    }

코드를 차근차근 알아보도록 하겠습니다.

먼저 tableView에 dequeueReusableCell이란 함수를 알아보겠습니다.

 

dequeueReusableCell

"재사용 가능한 테이블 뷰 셀 개체를 식별자로 찾은 후 반환합니다."

 

설명을 보면 알 수 있듯이 셀을 재사용해서 메모리를 관리할 수 있는 함수입니다!

예를 들어 100개의 셀 데이터를 다 뿌리는 것 보다, 화면에 보이는 10개만 셀을 표시해주고 나머지는 스크롤 시 마다 사라지는 셀을 재사용 하는 것입니다.

 

dequeueReusableCell에 들어가는 파라미터는 두 개 입니다.

1. withIdentifier -> 재사용 할 객체의 식별자 (위에 셀에 식별자를 부여했던 그 String을 사용하면 됨)

2. for -> indexPath를 사용하여 셀의 위치를 지정

indexPath는 override한 함수에 파라미터로 입력이 들어오니 그대로 사용하시면 됩니다!

 

dequeueReusableCell을 통해 셀을 가져왔다면 이제 정보를 넣어 반환을 해야하는데...

 

주석 친 부분을 보시면 deprecated된 방식을 쓴게 보입니다.

deprecated

IOS14 부터 deprecated 됐다고 합니다.

설명을 잠깐 보면 defaultContent를 사용하라는게 보이네요

코드가 멀어졌으니 다시 한 번 코드를 보고 알아보겠습니다.

var content = cell.defaultContentConfiguration()
content.text = task.title
cell.contentConfiguration = content

cell에 있는 defaultContentConfiguration()을 통해 UIListContentConfiguration 를 반환하게 됩니다.

cell에 들어가는 text, image에 데이터를 넣을 수 있게 해 줍니다.

위 코드와 공식 문서의 코드를 보면 별로 다를 건 없어요...

마지막으로 cell.contentConfiguration에 수정한 content 데이터를 집어넣으면 완성되어 반환을 하면 끝입니다!

 

셀 정보가 추가되거나 삭제되었을 땐

self?.tableView.reloadData()

reloadData() 메서드를 사용해 갱신할 수 있습니다.

---

tableViewDataSource에는 필수 메서드 말고도 

editingStyle, canMoveRowAt, moveRowAt등 row를 움직이고 table Edit을 위한 메서드도 존재합니다. 

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        self.tasks.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
        if self.tasks.isEmpty { //셀이 없을 때 edit 빠져나옴
            self.doneButtonTab()
        }
    }
func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
        return true
    }
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
        var tasks = self.tasks
        //source에서 destination으로 이동시키기
        let task = tasks[sourceIndexPath.row]
        tasks.remove(at: sourceIndexPath.row)
        tasks.insert(task, at: destinationIndexPath.row)
        
        self.tasks = tasks
    }