[UIKit] UICollectionViewDiffableDataSource에 대해 알아보자

 

What is 

iOS 13 부터 지원되는 CollectionView 와 TableView 에서 정보를 화면에 뿌려주는 방법중하나이다.

보통 datasource delegate method 를 통해 화면에 뿌려주곤한다. 하지만 델리게이트를 사용하지 않고도 UICollectionViewDiffableDataSource 를 사용하면 보자 자연스럽게 애니메이션을 더해서 화면에 정보를 뿌려줄수 있다.

 

Why

delegate method 를 통해 구현된 화면은 보여줘야할 정보가 변경될때 

예를 들면 검색창을 통해 입력이 들어와 필터링 해줘야한다면 화면이 바뀌어야하는데

기존에는 reloadData() 를 통해 화면을 새로 그려주었는데 그렇게 되면 화면이

애니메이션없이 뚝뚝 끊기게 된다면 그렇기 때문에 좋지 못한 UX 라고 할수 있었다

 

 

위 화면은 diffable 로 구현된 화면이다

보여줘야할 출력값이 바뀌더라도 자연스럽게 애니메이션을 통해 화면이 바뀐다.

보여줘야할 array는 Hashable을 상속받고 있어야 한다.

struct Follower: Codable, Hashable {
    var login: String
    var avatarUrl: String
}

enum Section { case main }

var followers: [Follower] = []
var filteredFollowers: [Follower] = []
var dataSource: UICollectionViewDiffableDataSource<Section, Follower>!
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<Section, Follower>!

func configureDataSource() {
    dataSource = UICollectionViewDiffableDataSource<Section, Follower>(
        collectionView: collectionView,
        cellProvider: { collectionView, indexPath, follower in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FollowerCell.reuseID, for: indexPath) as! FollowerCell
        cell.set(follower: follower)
        return cell
    })
}

func updateData(on followers: [Follower]) {
    var snapshot = NSDiffableDataSourceSnapshot<Section, Follower>()
    snapshot.appendSections([.main])
    snapshot.appendItems(followers)
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }
        self.dataSource.apply(snapshot, animatingDifferences: true)
    }
}

func updateSearchResults(for searchController: UISearchController) {
    guard let filter = searchController.searchBar.text,
          !filter.isEmpty else
    {
        filteredFollowers.removeAll()
        isSearching = false
        updateData(on: followers)
        return
    }
    isSearching = true
    filteredFollowers = followers.filter { $0.login.lowercased().contains(filter.lowercased()) }
    updateData(on: filteredFollowers)
}

 

 

UI Diffable Data Source란?

Apple Developer Documentation