[SLP] 테이블뷰 Self-Sizing셀 안에 컬렉션뷰 Left-Align Self-Sizing와 Drop-Down 이슈

 

 

 

 

새싹 커뮤니티 앱을 개발하면서 발생한 이슈를 정리한 페이지입니다.

이슈페이지는 평어체로 쓰도록 하겠습니다.

SLP란 현재 싹에서 진행하고 있는 Service Level Project의 약자입니다.

 

 

 

 

 

SLP를 하면서 Self-Sizing의 Advanced 버전이라고 할수 있는 Nested된 구조를 구현하게 되었음. 스토리 보드없이 Snapkit기반 Code-Base UI로만 구성함. Rxswift, RxCocoa, RxDataSource이용하였지만 이슈는 Rx를 사용하든 안하든 공통사항임 !

처음 보았을 땐 이게 뭔가 싶을정도로 난이도 있던 UI구성이였다..! 그럼 바로 시작

 

 

구현해야하는 피그마 디자인 화면

 

구조를 보면 우선 크게는 테이블뷰로 새싹 카드가 반복되고 있다.  차근차근 살펴보자면 이부분에서 테이블뷰의 셀은 고정사이즈가 아닌 AutoDemension으로 Self-Sizing을 해야함. 왜냐하면 [새싹리뷰] 부분이 Text 길이에 따라 가변적❗️으로 늘어나기 때문이다.

 

 

그리고 각 테이블뷰셸안에 컬렉션뷰를 넣어야한다.  [하고 싶은 취미] 에서 태그 상자 또한 최대 8개 까지 가능하기 때문이고 길이는 각각 다르다. 그럼 위의 디자인에서는 달리기, 뜨개질, 산책 과 같은 태그뷰는 컬렉션뷰안의 각각의 하나의 셀이 될 것이다. 그러면 결과적으로 컬렉션뷰 또한 Self-Sizing의 왼쪽정렬로 보여주어야 하는상황이 된다. 

 

여기에 더하여 각각의 테이블뷰 셀들은 토글버튼이 있어서 Drop-down이 가능해야한다.

키워드만 살펴봐도 어마어마함 Self-Sizing, Drop-down, Left-Align 이것들의 중첩...

 

 

구현해야할 UI를 정리를 하면 이렇다.

테이블 뷰로 전체를 구성하고 각각의 테이블뷰 셀들은 Self-Sizing으로 가변적이게 해주며, 각각 셀 안에 컬렉션뷰를 넣어 컬렉션 뷰 또한 Left-Align기반 Self-Sizing을 해준다. 그리고 테이블뷰는 토글 버튼이 있어 Drop-Down을 가능하게 해준다.

 

 

 

구현 동영상

 

 

 

이거 구현하는데 하루 온종일을 쏟은것 같음.. 의외로 테이블뷰 안에 컬렉션뷰를 넣어 Self-Sizing하는것은 Self-Sizing하는것에 익숙해서 그런가 그렇게 오래걸리지 않았는데, 드롭다운이 오래걸림

 

 

 

 

 

 

셀안의 또 다시 Self-Sizing

코드로 셀프사이징을 가능하게 하려면 반드시 모든 오토레이아웃이 정확히 맞아야하고, 그 뒤에 AutoDemension(테이블뷰) 또는 AutomaticSize(컬렉션뷰)으로 사용 가능하다. 불명확한 오토레이아웃이라면 셀프사이징 불가능🥲. 그리고 Snapkit으로 구성을 하려면 늘어나고자 하는 레이아웃 대상의 우선순위를 다른애들보다 낮추어 주면됨. 

 

profileView.snp.makeConstraints { make in
    make.top.left.equalToSuperview().offset(16)
    make.right.equalToSuperview().offset(-16)
    make.height.equalTo(profileView.snp.width).multipliedBy(194.0 / 343)
}
cardView.snp.makeConstraints { make in
    make.top.equalTo(profileView.snp.bottom)
    make.left.equalToSuperview().offset(16)
    make.right.equalToSuperview().offset(-16)
    make.bottom.equalToSuperview().offset(-16).priority(.low) // 늘어날 부분 우선순위 낮추어 주기
}

 

 

 

만약 셀안에 또다시 테이블뷰나 컬렉션뷰가 셀프사이징을 하고 있는 경우라면 셀프사이징에 대해 완벽히 이해하여야 한다. 때려맞추기로 하나의 테이블뷰 정도는 셀프사이징 하긴 쉬울지라도 셀안에 또 셀프사이징기반 테이블뷰나 컬렉션뷰를 넣게 된다면 매우매우 어려워 질 것임 ❗️❗️ 원리만 이해한다면 이부분은 쉽게 해결가능하다. 

 

아 ! 그리고 마지막으로 스크롤이 포함된 것들은 반드시

isScrollEnabled = false

이거 잊지 않고 해주기... 다해놓고 삽질하는 경우!

 

 

 

 

 

CollectionView cellForItem이슈

 

 

 

노란박스가 컬렉션 뷰이다. 동영상에서 보면 안에 태그가 여러개 있을 수도 있고 한개만 있을수도 있음을 확인 할 수있음.

이전에 구현했던 Left-Align Self-Sizing 컬렉션뷰와 다르게 cellForItem이 실행되지 않는 이유가 있었다.

 

 

CollectionView로 코드기반 UI를 구성할 때, 마주했던 cellForItem가 실행 되지 않았던 이유는 크게 2가지였다.

• UICollectionVIewFlowLayout()를 초기화할때 넣어주지 않거나, 실수로 UICollectionVIewLayout()을 넣어주어서.
• CollectionView의 크기가 너무 작아서.

 

첫번째 이슈는 이제는 뼈저리게 느꼇는데 2번째 경우는 처음 겪는 이슈였음. 보통은 CollecionView의 오토레이아웃과 사이즈는 정해주고 시작하는데 이번경우는 셀안에 있기 때문에 사이즈가 초기때 없어서 cellForItem가 실행되지 않았던것

 

class DynamicCollectionView: UICollectionView {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        if bounds.size != intrinsicContentSize {
            invalidateIntrinsicContentSize()
        }
    }

    override var intrinsicContentSize: CGSize {
        return self.contentSize
    }
}

 

초기에 컬렉션뷰 사이즈가 너무 작다면 위의 코드로 커스텀하여 사용해주면 초기에 사이즈가 없어 cellforItem이 실행되지 않는것을 방지할 수 있다.

 

 

 

 

 

 

🔮🔮 테이블뷰 셀 드롭다운 이슈 

 

이 화면에서 날 가장 힘들게 하였던 이슈... ! 😢😢

 

테이블뷰 셀이 버튼에의해 드롭다운 될 수 있으려면 테이블뷰가 rowheight을 결정하는 것과 셀이 재사용된다는 것 2가지 숙지하여야 한다.  그러면 셀의 높이를 가변적으로 바꾸어 줄때 해주어야 할 것의 크게 순차는 이렇다. 

 

• 드롭다운 대상 Cell안의 뷰 인스턴스들의 Constraints를 다시 그려주기
• TableView의 RowHeight을 알맞게 재설정해주기 (얘는 cell전체를 대상으로 해주어야함 재사용 문제 때문)

 

만약 2가지 중 하나라도 제대로 해주지 않는다면 셸은 늘어났는데 테이블뷰 height는 그대로라던가, 셀의 재사용문제 등등으로 화면이 심각하게 깨지게 될 것. 반면 두가지를 완벽히 해주면 reloadRows만으로 드롭다운 성공적으로 가능!

 

❗️주의 야매로 구현해서 전체 테이블을 다시 그려주며 드롭다운을 구성하지 말 것. 보기엔 문제 없을시라도 드롭다운때마다 테이블뷰를 reloadData로 전체 다시 그려주는 것은 오버헤드

 

 

 

 

 

 

 

 

 

Rxswift 이용시 Tip

    override func prepareForReuse() {
        super.prepareForReuse()
        disposeBag = DisposeBag()
    }

Rxswift로 구성을한다면 셀에서 재사용을위해 disposeBag시켜주는 거 잊지 않아야함

 

 

 

cell.cardView.sesacReviewView.toggleButton.rx.tap.asSignal()
    .map { index }
    .emit(to: self.reviewDetailButtonTap)
    .disposed(by: cell.disposeBag)

그리고 cell외부에서 cell에 관한 인스턴스를 바인딩에 사용할 때에는 cell deinit이 되기 위하여 cell의 있는 dispose로 dispose설정 이거 안해주면 재사용되어야할 셀이 deinit되지 않아 생기는 오류들이 발생