소개

iOS12 이전의 CollectionView나 TableView의 데이터를 다루는 방법이나 재정렬 애니메이션의 이미지를 한마디로 나타내면 '번잡하고 어려운'이었습니다.

그런데, iOS13부터 CollectionView나 TableView에서의 데이터의 취급 방법이 간단하게 된 & 뭔가 애니메이션도 자동으로 해 주게 되었습니다!

다만, 되었다는 것은 좋지만 iOS12 이전의 애니메이션의 구조를 생각하면 매우 그 자동 애니메이션의 동작이 정말 실용에 견딜 수 있을지 의문이 남는 곳...

이런 식으로 실제로 자동 애니메이션을 몇 패턴인가 시험해 보았습니다!

어떻게 바뀌었는지

iOS12 이전

데이터 처리

특히 데이터를 취급하기 위한 클래스 등은 없고, 스스로 데이터를 잘 처리할 필요가 있었습니다.
또, 이 데이터와 표시되는 셀의 대응등을 UICollectionViewDataSource로 스스로 제대로 취급할 필요가 있었습니다.
어쩌면 이런 느낌으로 취급하는 사람이 많았지 않을까

struct Section {
    /// 何か必要なデータ
    let datas: [Data]
}

struct Data {
    /// 何か必要なデータ
}

extension ViewController: CollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        /// セクション数を返す
        /// 自動でやってほしい...
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        /// セクション内のアイテムの数を返す
        /// 自動でやってほしい...
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        /// セルの値を設定する
    }
}

애니메이션

iOS12 이전의 정렬 애니메이션은 매우 복잡하며 조금이라도 실수하자마자 충돌하므로 매우 다루기가 어렵습니다 ...
자세하게 알고 싶은 분은, 이쪽의 기사가 매우 참고가 되므로 읽어 보세요!
【Swift】CollectionView를 재이해한다

    collectionView.performBatchUpdates {
        /// この中でcollectionViewと元データに対してDelete、Insert,Moveを行うが、
        /// DeleteとInsertではみているIndexの対象が異なっていたりと複雑で、
        /// その複雑さによるミスなどで削除対象にしたデータをMoveしようとしたり、
        /// 同じ場所にMove/Insertしようとしたり、データ数が一致しなくなったりでクラッシュする
        /// クラッシュログもっとわかりやすくして...
    }

iOS13 이상

여기에서 본제

데이터 처리

iOS13 이후에는 제대로 데이터를 취급하기 위한 클래스가 준비되어 있습니다!
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 도쿠 멘 타치 온 / 우이 키 t / 우이 코 ぇ c 치 온 ぃ ぃ

사용법은 이런 느낌

enum Section {
    /// セクション情報
    /// Hashableに適合していればenumでなくてもよい
}

struct Item {
    /// Hashableに適合していればなんでもよい
}

/// これが本体
private var dataSource: UICollectionViewDiffableDataSource<Section, Item> = {
    let dataSource = UICollectionViewDiffableDataSource<Section, Item>(collectionView: collectionView) {
            (collectionView: UICollectionView, indexPath: IndexPath, item: Item) -> UICollectionViewCell? in
        /// セルの値を設定する
    }

    dataSource.supplementaryViewProvider = { [weak self]
        (collectionView: UICollectionView, kind: String, indexPath: IndexPath) -> UICollectionReusableView? in
        /// ヘッダ、フッタなどの値を設定する
    }
    return dataSource
}()

func initDataSource() {
    var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
    /// セクションを登録
    snapshot.appendSections("セクションのリスト")
    /// アイテムを登録
    snapshot.appendItems("アイテム", toSection: "登録したいセクション")
    /// データを反映
    dataSource.apply(snapshot)
}    

언뜻 보면 iOS12보다 복잡해진 것처럼 보이지만 섹션 수와 항목 수 처리를 작성하지 않아도 좋고,
실 데이터와 표시가 대응하게 되기 때문에 매우 알기 쉬워지고 있습니다!

애니메이션

얼마나 흥분! 위 소스의 데이터 반영을 아래로 바꾸는 것만! ! !

/// データを反映
dataSource.apply(snapshot, animatingDifferences: true)

DiffableDataSource는 Hash에서 고유하게 섹션과 항목을 관리하므로 어떤 항목이 삭제/추가/이동되었는지 확인할 수 있습니다. 그 덕분에 자동으로 애니메이션시킬 수도 있게 되어 있습니다!

실제로 어떤 애니메이션이 되는지

간단합니다만, 2 패턴의 자동 애니메이션을 검증해 보았습니다.

레이아웃이 변경되는 패턴

CompositionalLayout과 함께 레이아웃을 전환할 수 있습니다.





부드럽게 애니메이션하지 않거나 미묘한 느낌입니다 ...
너무 크게 레이아웃이 바뀌는 애니메이션이나 헤더가 있는 경우의 애니메이션에는 적합하지 않은 것 같습니다.

섹션 수가 변경되는 패턴

이것은 섹션수가 바뀌기 때문인지는 미묘합니다만(상기와 같이 이동량이 많은 것이 원인일지도),
움직이지 않고 페이드로 표시되는 애니메이션이 흩어져 있습니다 ...
여기도 주의가 필요할 것 같습니다

요약

iOS13에서 매우 복잡했던 애니메이션이 자동화되어 편해졌습니다.
하지만 실제로 움직여 본 느낌 잘 애니메이션 시키려면 요령이 필요할 것 같기 때문에,
실제 앱에 적용하기에는 꽤 힘들어 보입니다...

실제로 시도한 소스를 공개하고 있으므로, 좋으면 참고로 해주세요!
htps : // 기주 b. 코 m / 리 히텐 b / ぢ ふぁ b