-Today's Learning Content-

• RxSwift
• Compositional Layout

---

1. RxSwift 활용

내용 정리

프로젝트의 개인 파트를 진행하며 Rx를 활용하는 과정을 정리해 보았다.

1) BehaviorRelay에서 특정 인덱스 값 변경

• BehaviorRelay는 직접 값을 바꿀 수 없어서, 복사 후 업데이트하는 방식으로 해결해야 한다.

func updateRelay(at index: Int, with newValue: Bool) {
    var currentValues = relay.value
    guard index >= 0 && index < currentValues.count else { return }
    currentValues[index] = newValue
    relay.accept(currentValues)
}

2) RxCocoa로 UICollectionView DataSource 구현

컬렉션뷰의 섹션이 3개인 경우, RxCocoa로 데이터 바인딩을 간단히 할 수 있다.

let dataSource = RxCollectionViewSectionedReloadDataSource<SectionModel<String, String>>(configureCell: { _, collectionView, indexPath, item in
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = item
    return cell
})

data.bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

3) RxSwift에서 IndexPath로 특정 셀 작업

collectionView.rx.itemSelected
    .subscribe(onNext: { indexPath in
        if indexPath.section == 0 {
            print("첫 번째 섹션의 \(indexPath.row) 셀")
        }
    })
    .disposed(by: disposeBag)

2. Compositional Layout

내용 정리

프로젝트의 개인 파트를 진행하며 컬렉션뷰의 Compositional Layout를 활용하는 과정을 정리해 보았다.

1) 섹션 나누고 동일한 레이아웃 적용

컬렉션뷰의 섹션이 여러 개인데 모두 같은 레이아웃을 공유하는 경우 아래와 같이 구현할 수 있다.

func createLayout() -> UICollectionViewCompositionalLayout {
    let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(50)), subitems: [item])
    let section = NSCollectionLayoutSection(group: group)
    return UICollectionViewCompositionalLayout(section: section)
}

2) 데이터를 두 줄로 나누어 구성

데이터를 두 줄로 나눌 때는 이렇게 구현할 수 있다.

private lazy var layout: UICollectionViewLayout = {
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1/5),
            heightDimension: .fractionalHeight(1.0)
        )
        
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
        
        let firstGroupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(40)
        )
        
        let firstGroup = NSCollectionLayoutGroup.horizontal(
            layoutSize: firstGroupSize,
            repeatingSubitem: item,
            count: 5
        )
        firstGroup.interItemSpacing = .fixed(10)
        
        let secondGroupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(40)
        )
        
        let secondGroup = NSCollectionLayoutGroup.horizontal(
            layoutSize: secondGroupSize,
            repeatingSubitem: item,
            count: 5
        )
        secondGroup.interItemSpacing = .fixed(10)
        
        let containerGroupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(90)
        )
        
        let containerGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: containerGroupSize,
            subitems: [firstGroup, secondGroup]
        )
        containerGroup.interItemSpacing = .fixed(10)
        
        
        let section = NSCollectionLayoutSection(group: containerGroup)
        section.interGroupSpacing = 10
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        
        return layout
    }()

3. 결론

오늘 구현한 뷰는 아래와 같다.

구현 결과물

-Today's Lesson Review-

모든 기능을 rx를 활용해서 구현하려고 하니
너무 많은 난관에 부딪히게 된다...
지금도 버그가 너무 많아서 내일 열심히 고쳐야 한다.
하...