[Cheliz] UITableView 사용성 향상

 

  문제  

UITableView에서는 기본적으로 cell을 탭하면 cell의 백그라운드 컬러가 짙은 회색으로 바뀌게 된다. 손가락을 떼더라도 회색으로 유지된다. 내가 구현한 설정화면의 경우, 셀의 선택 여부를 기억할 필요 없이 유저가 ‘버튼이 잘 눌렸다’라는 것만 인지할 수 있도록 구현하고 싶었다.

 

먼저 유저가 손가락을 뗐을 때 기존 컬러가 나타나도록 하여 ‘눌렀고, 뗐다’라는 것을 인지할 수 있도록 했다.

 

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
	tableView.deselectRow(at: indexPath, animated: true)
}

위처럼 UITableViewDelegate의 didSelectRowAt 메서드에서 해당 row를 바로 deselect해서 인지가 가능하도록 했다!

 

 

 

 

하지만 기본 짙은 회색의 컬러는 앱의 전반적인 무드와 맞지 않아 유저에게 이질감을 불러 일으켰다..

이를 해결하기 위해 셀을 선택했을 때의 컬러를 바꾸기 위한 방법을 모색했다.. .

 

 

 

 

 

  Table View에서 Select한 Row의 backgroundColor 바꾸기  

 

 

 

UITableViewCell의 selectedBackgroundView 프로퍼티를 이용해, 누를 때만 셀의 backgroundColor가 바뀌도록 구현할 수 있었다.

 

 

UIView() 인스턴스를 생성하고 그 뷰의 backgroundColor를 지정 후, cell의 selectedBackgroundView프로퍼티를 해당 뷰로 설정했다.

 

 

 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: BackupFileTableViewCell.reuseIdentifier, for: indexPath) as? BackupFileTableViewCell else {
        print("Cannot find BackupFileTableViewCell")
        return UITableViewCell()
    }
    
    let backgroundView = UIView()
    backgroundView.backgroundColor = .selectedBackgroundColor
    cell.selectedBackgroundView = backgroundView
    
    cell.fileNameLabel.text = backupFileNames[indexPath.row]
    
    return cell
}

셀의 프로퍼티에 UIView를 할당하기 때문에, 각 셀마다 다른 UIView 인스턴스를 할당할 수 있다.

 

이를 활용해서 시각적으로 더욱 완벽하게 구현하자면, 현재 화면의 경우 배경색이 단일색이 아니므로, 각 셀이 선택되었을 때 배경화면과 유사한 컬러를 띄도록 구현할 수 있을 것 같다.

하지만 테이블 뷰가 길어지고, 스크롤이 발생하는 경우에는 오히려 더 복잡한 문제가 될 수도 있을 것이라고 생각한다.. 🫠