박스오피스II [STEP 2] Erick, kyungmin #105

YaRkyungmin · 2023-08-15T07:52:45Z

@July911
안녕하세요 July!!
리뷰이 Erick🐶, Kyungmin🐼 입니다!
박스오피스II의 두번째 스탭입니다!
이번에도 많은 조언 부탁드립니다🙇

🤔 고민했던 점

1️⃣ 화면 모드 변경

alert의 버튼을 눌렀을 때 CollectionView의 layout과 cell을 어떻게 바꿀지 고민했습니다.
CollectionViewMode라는 열거형을 만들어 Controller가 프로퍼티로 열거형 인스턴스를 들고 있고 collectionViewMode를 분기처리하여 layout과 cell을 결정하도록 설정했습니다.

CollectionViewMode 코드

private enum CollectionViewMode {
    case list
    case grid
}

dataSource 코드

UICollectionViewDiffableDataSource<Section, DailyBoxOffice>(collectionView: collectionView) { collectionView, indexPath, dailyBoxOffice in
    switch self.collectionViewMode {
    case .list:
        // ...

        return listCell
    case .grid:
        // ...

        return gridCell
    }
}

2️⃣ 모드 변경 애니메이션

처음에는 모드 변경을 할 때 collectionView.reloadData()로 모든 셀을 다시 로드하였습니다. 하지만 이럴 경우 애니메이션 효과 없이 화면이 한번에 바뀌어 사용자 경험을 저하시킬 수 있기에 setCollectionViewLayout과 reloadSections을 사용하여 layout이 바뀌는 순간과 section이 리로드 되는 순간에 애니메이션 효과를 주었습니다.

layout이 업데이트 될 때 애니메이션

switch collectionViewMode {
case .list:
    collectionView.setCollectionViewLayout(listLayout(), animated: true)
case .grid:
    collectionView.setCollectionViewLayout(gridLayout(), animated: true)
}

reloadSections와 apply를 사용하여 section이 업데이트 될 때 애니메이션

var snapshot = NSDiffableDataSourceSnapshot<Section, DailyBoxOffice>()
snapshot.appendSections([.main])
snapshot.appendItems(boxOfficeManager.dailyBoxOffices, toSection: .main)
snapshot.reloadSections([.main])

dailyBoxOfficeDataSource.apply(snapshot, animatingDifferences: true)

3️⃣ dynamic하게 cell의 높이를 변경하기

처음 label들의 text에만 adjustsFontForContentSizeCategory속성을 true로 변경해줬을때는 collectionView의 cell높이가 dynamic하게 변경되지 않았습니다.
centerY로 설정돼있던 label들의 제약을 topAnchor와 bottomAnchor를 contentView의 topAnchor와 bottomAnchor를 잇고, .estimated를 활용해 dynamic하게 cell의 높이가 변경 되게 해줬습니다.

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                      heightDimension: .estimated(80))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), 
                                       heightDimension: .estimated(80))

🙇‍♂️ 조언을 얻고싶은 점

1️⃣ 영화 상세화면 dynamic type 적용

요구사항에서는 dynamic type을 적용했을때 감독, 제작년도, 개봉일 등의 titleLabel이 크기가 커져서 모두 같은 크기를 갖는 것처럼 보였습니다. titleLabel의 Compression priority를 .required로 설정하는 방법이 제일 바람직하다고 판단하여 적용했지만, 세로 줄이 요구사항과는 다르게 맞지 않았습니다.

이를 해결하기 위해 titleLabel과 오른쪽 정보를 닮는 label을 각각 다른 세로 스택뷰에 따로 담아서 해결하려 했으나 오른쪽 정보를 닮는 label크기가 유동적이기때문에 이 방법으로도 해결하지 못했습니다.

미리 titleLabel의 크기를 고정시켜놓는 방법 이외에 이 문제를 어떻게 해결할 수 있을까요?