[TIL / 25.02.13] 다중 섹션 및 헤더가 포함된 사이드 메뉴 구현

1. 오늘 진행한 작업

지난 포스트에서 사이드메뉴에 대한 토대를 마련했다면, 이번 포스트에선 그 안에 들어가는 메뉴들에 대한 UI를 구현해보았다.

화면에서 보았듯, 포인트를 이렇게 잡았다.

 

1. 일정 UI 구조의 반복되는 컴포넌트가 두 형태를 가짐(내 블로그 같은 Label 위주의 메뉴, Developers 하단에 있는 여러 컴포넌트가 종합되어있는 카드 셀)

2. 메뉴의 개수 혹은 Developers의 멤버 수가 많아질수록 전체 뷰의 높이는 더 커져야 함.

3. 스크롤할 수 있어야 함.

 

제일 먼저 스크롤할 수 있어야 하는 부분 때문에, 상위 ScrollView를 두고 안에 컴포넌트들을 배치할까 했으나 동적 높이를 컨트롤하기엔 효율적이지 못함 -> 스크롤뷰를 상속받고 내부 요소 주입만 해주면 알아서 높이 지정이 되고 일정 구조를 다루기에 용이한 테이블뷰

 

역시 이 사이드 메뉴에 대한 UI도 테이블뷰 베이스로 진행하기로 했다.

 

Section 0 - HeaderView

Section 0 - 메뉴 셀

Section 1 - HeaderView

Section 1 - 개발자 셀

 

반복되는 형태는 따로 나눴고, 그 반복되는 영역 위엔 항상 저렇게 뷰가 하나씩 있었으니 헤더로 구현했음.

 

---

2. 겪었던 문제와 해결

하단으로 스크롤 시 첫번째 헤더 뷰가 상단에 고정되는 현상이 있었는데, 이 부분은 테이블뷰 선언 당시

private(set) var tableView = UITableView().then {
        $0.backgroundColor = UIColor(named: "Bg 1")
        $0.register(MenuStringCell.self, forCellReuseIdentifier: MenuStringCell.identifier)
        $0.register(DevelopersCell.self, forCellReuseIdentifier: DevelopersCell.identifier)
        $0.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: ProfileHeaderView.identifier)
        $0.register(DevelopersHeaderView.self, forHeaderFooterViewReuseIdentifier: DevelopersHeaderView.identifier)
        $0.sectionHeaderTopPadding = 0
        $0.separatorStyle = .none
    }

테이블뷰의 스타일에 아무 값이 없어 .plain으로 설정되어있었기 때문이다.

 

대신 UITableView(frame: .zero, style: .grouped)로 스타일을 grouped로 설정해서 해결했다.

 

---

다른 문제는 하단 스크린샷과 같이 첫번째, 그리고 마지막 셀에 특정 모서리에만 Radius를 적용해야 했는데, 이 부분은 maskedCorners를 통해 해결했다.

case 1:
            guard let cell = tableView.dequeueReusableCell(withIdentifier: DevelopersCell.identifier, for: indexPath) as? DevelopersCell else {
                return UITableViewCell()
            }
            let isLastCell = indexPath.row == sideMenuViewModel.developers.count - 1
            cell.configure(user: sideMenuViewModel.developers[indexPath.row], isLastCell: isLastCell)
            
            // 첫 번째 셀인 경우
            if indexPath.row == 0 {
                cell.containerView.clipsToBounds = true
                cell.containerView.layer.cornerRadius = 16
                cell.containerView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]  // 상단 왼쪽, 오른쪽 코너
            }
            // 마지막 셀인 경우
            else if indexPath.row == sideMenuViewModel.developers.count - 1 {
                cell.containerView.clipsToBounds = true
                cell.containerView.layer.cornerRadius = 16
                cell.containerView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]  // 하단 왼쪽, 오른쪽 코너
            }
            // 중간 셀들
            else {
                cell.containerView.layer.cornerRadius = 0
            }
            
            return cell

 

cellForRowAt 메서드에서 정의해주었다.

 

---

 

생각보다 스크롤이 필요한 화면들에 있어 테이블뷰의 유연성이 훨씬 좋은 것 같다. 이전에 감도 있다고 생각했던 어플의 메인 화면 UI를 어떻게 구성했는지에 대한 개발 팀의 포스트를 본 적 있는데, 스크롤뷰보다 테이블, 컬렉션 뷰를 적재적소로 유연하게 활용하고 있었다.

요구사항과 와이어프레임을 보고 어떤 구조가 좋을지 좀 더 나은 방향으로 생각하는 능력이 필요하다고 생각이 들었던 작업이었다.