[Swift] ExpandableCell 만들기

안녕하세요. 리양입니다 :)

제가 예전에 공부하려고 만들었던 프로젝트를 고치면서 같이 공유를 하면 좋을 거 같은 내용이 있어 남겨봅니다!!

우선 제가 설명하고자 하는 부분은 iOS UI를 구현하면 TablewView로 많이 구현하시나요?

저는 작은 화면의 디바이스도 지원하고자 항상 TablewView로 Base로 만듭니다.

그래서 저는 iOS 개발자는 TablewView를 잘 다루는게 중요하다 생각하는데요.

그래서 알고보면 쉬운데, 어려울 수 있는 부분을 소개해보려고 합니다.

그중 하나인 접었다 폈다 같은 더보기인 Expande Cell를 구현하고자 합니다.

ExpandableCell 만들기

쉽게 생각하면 접었다 폈다가 해당 Cell을 삽입하고 삭제하는 것입니다.

insertRows / deleteRows를 사용하면 됩니다.

insertRows(at:with:)

Inserts rows in the table view at the locations identified by an array of index paths, with an option to animate the insertion.

func insertRows(at indexPaths: \[IndexPath\], with animation: UITableView.RowAnimation)

deleteRows(at:with:)

Deletes the rows specified by an array of index paths, with an option to animate the deletion.

func deleteRows(at indexPaths: \[IndexPath\], with animation: UITableView.RowAnimation)

Code

tableView.insertRows(at: [IndexPath(row: 4, section: 0)], with: .none)

삽입 / 삭제 하려는 위치에 하면 됩니다.

다만 주의할 점이 있습니다.

tablewView의 row 관련 이벤트를 발생 시 beginUpdates() / endUpdates() 를 짝으로 써야 합니다.

---

beginUpdates() / endUpdates()

beginUpdates()

Begins a series of method calls that insert, delete, or select rows and sections of the table view.

endUpdates()

Concludes a series of method calls that insert, delete, select, or reload rows and sections of the table view.

Code

tableView.beginUpdates() 
tableView.insertRows(at: \[IndexPath(row: 4, section: 0)\], with: .none) 
tableView.endUpdates() 

tableView.beginUpdates() 
tableView.deleteRows(at: \[IndexPath(row: 4, section: 0)\], with: .none) 
tableView.endUpdates()