🫧 브랜드 상세 정보에서 셀 확장 시 자동 스크롤 구현하기
우리 앱에서 안드로이드에는 ‘사용안내’ 나 ‘교환안내’ 셀 오른쪽에 아이콘을 누르면 접힌 페이지가 부드럽게 펼쳐지는 모션이 있었는데, iOS 쪽에는 부드럽게 펼쳐지는 모션 없이 아래와 같이 뚝 끊기는 식으로 접힌 페이지가 펼쳐 졌었다. 넘 신경쓰였음,,, 그래서 구현해보았다!
먼저 이 셀들을 가져와 처리하는 테이블뷰를 찾아야겠지?
구성은 BrandDetailViewController의 테이블뷰에서 셀들을 처리한다는 것을 알아냈다.
그리고
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if indexPath.section == 1 {
guard let data = viewModel?.cellData else{ return }
if data[indexPath.row + 1].cellType == .foldedCell {
guard data[indexPath.row + 1] is BrandDetailFoldedTableViewCell.FoldedCellData else{ return }
guard let cell = tableView.cellForRow(at: indexPath) as? BrandDetailFoldedTableViewCell else{return}
self.updateExpandCell(dataIndex: indexPath.row + 2, touchedCell: cell )
}
}
}
Swift
복사
그리고 여기 코드를 보면
선택된 셀의 바로 다음 셀이 .foldedCell 타입인지 확인하고, 다음 셀의 데이터가 FoldedCellData 타입인지 확인한다.
그리고 현재 선택된 셀을 BrandDetailFoldedTableViewCell 타입으로 캐스팅한 후
updateExpandCell 메서드를 호출하여 셀을 확장한다.
dataIndex = 현재 선택된 셀의 인덱스에서 + 2
touchedCell = 선택된 셀
을 나타낸다.
기존 코드 요약해보면
•
특정 섹션의 셀을 선택했을 때, 그 다음 셀이 특정 타입이라면, 선택된 셀을 확장!
이제 요 펼치는 과정에서 자동 스크롤을 넣어보자!
셀을 확장해주는 함수는
private func updateExpandCell(dataIdx: Int, touchedCell: BrandDetailFoldedTableViewCell){
if self.expandedCells.contains(dataIdx) {
touchedCell.arrowDown()
if touchedCell.data?.infoTitle == "사용 안내" {
isNeedDivideViewHidden = false
}else{
self.tableView.backgroundColor = UIColor(hexString: "#FFFFFF")
}
expandedCells.remove(at: expandedCells.firstIndex(of: dataIdx)!)
}else{
touchedCell.arrowUp()
if touchedCell.data?.infoTitle == "사용 안내" {
isNeedDivideViewHidden = true
}else{
self.tableView.backgroundColor = UIColor(hexString: "#F9F9F9")
}
expandedCells.append(dataIdx)
}
self.tableView.reloadData()
}
Swift
복사
요 부분! 이 부분 코드를 자동 확장 스크롤 처리 코드를 넣어
private func updateExpandCell(dataIndex: Int, touchedCell: BrandDetailFoldedTableViewCell){
if self.expandedCells.contains(dataIndex) {
touchedCell.arrowDown()
if touchedCell.data?.infoTitle == "사용 안내" {
isNeedDivideViewHidden = false
}else{
self.tableView.backgroundColor = UIColor(hexString: "#FFFFFF")
}
expandedCells.remove(at: expandedCells.firstIndex(of: dataIndex)!)
}else{
touchedCell.arrowUp()
if touchedCell.data?.infoTitle == "사용 안내" {
isNeedDivideViewHidden = true
}else{
self.tableView.backgroundColor = UIColor(hexString: "#F9F9F9")
}
expandedCells.append(dataIndex)
}
self.tableView.reloadRows(at: [IndexPath(row: dataIndex, section: 1)], with: .automatic)
DispatchQueue.main.async {
let totalRows = self.tableView.numberOfRows(inSection: 1)
if dataIndex < totalRows {
self.tableView.scrollToRow(at: IndexPath(row: dataIndex, section: 1), at: .top, animated: true)
}
else if dataIndex == totalRows {
self.tableView.scrollToRow(at: IndexPath(row: dataIndex-1, section: 1), at: .bottom, animated: true)
}
}
}
Swift
복사
이렇게 구성하였다.
셀을 확장하거나 축소할 때 시각적인 변화와 해당 셀로 스크롤을 처리하기 위해서 비동기 처리를 하였다.
우선 섹션 1의 총 행수를 totalRows 라는 변수에 담고,
dataIndex가 totalRows 수보다 적으면 선택된 셀로 스크롤하고, dataIndex가 totalRows 수와 같으면 이전 셀로 스크롤하도록 구성하였다.
이렇게 구성하니,
이렇게 셀이 펼쳐질 때 자동 스크롤이 진행되어 초점이 맞춰졌다!
오늘의 슬기로운 인턴생활 끝 
그리고 이 업데이트도 다음 배포에 들어갔으면 하는 개인적인 작은 바램 ㅎㅎㅎ