iOS

iOS13で発生するUICollectionviewのカクつきを解消する

投稿日:2020年3月16日 更新日:

はじめに

こんにちはsuzukiです。3月末でXcode11対応が必須になり、慌てて対応しました。昨年も慌てて対応した気がします。
Xcode11対応前から発生したのですが、iOS13でUICollectionViewのCellの入れ替え中を行うとカクつきが起きたため、対処療法ですが対応したのでご紹介いたします。おまけでその他のiOS13対応で一度対応が漏れた内容を記述しております。

発生内容

iOS13端末でのみGifの通りなのですがドラッグしている“7”が一瞬カクついています。条件としてはドラッグを開始した場所をドラッグ中に通過することです。

UICollectionViewの実装

Gifと同様の事象が起きるCollectionViewのコードです。
StoryBoardはよしなに設定してください。下記を忘れなければだいたい動きます。
・CollectionViewの配置とデータソース類の関連付け
・CustomCellのIDの設定

カクつきを抑える

この問題への対応を調査したところ、Xcodeのバージョンに関係なく、iOS 13で発生することが分かりました。
そこで、以下の対応方針でコードを修正していきます。
①ドラッグ中に問題が発生する入れ替え処理とアニメーションを行わせない。
②ドラッグ終了時に元の位置に戻すため止めていた入れ替え処理とアニメーションを行う。

Cellの入れ替えが発生する際の起点

処理をメインで追加するのが下記のデリゲートです。

簡単に説明ですが、updateInteractiveMovementTargetPositionを読んだ際に呼ばれるメソッドです。
実際にセルが入れ替わる際には下記のように取得できます。
・originalIndexPathで元のIndexPath
・proposedIndexPathで次のIndexPath
・originalIndexPathとproposedIndexPathが異なる際にproposedIndexPathを返却するとCellの入れ替えとアニメーションが発生します。

修正内容

ドラッグ中に問題が発生する入れ替え処理とアニメーションを行わせないという処理のため
・ドラッグし始めた際のIndexPathを取得
・ドラッグが完了した際のフラグを設定
上記を管理するためインスタンス変数を追加します。

実際に値を入れるのは下記の関数の中で行いました。ドラッグ中にユーザがタブを切り替えた場合も考慮し、viewWillAppearでfalseを代入します。記事後半で、コード全体を掲載するので、そちらも確認してみてください。

セルの入れ替え処理のデリゲートに下記のように記述しました。

動作確認

このような動きになりました。最初のカクつきは抑えれましたが既存のOSとは動きに少し差があります。

修正後のコードを記述します。

おまけ

・UITableViewCellのタップ時の色の変更
iOS 13 Release Notesで記述されているのですが下記をXcode11対応で合わせて行いました。
iOS13以前はCellをタップ際にcontentViewのsubView全体の色を変更していました。
iOS13以降はcontentViewのみ色の変更をします。
subViewにcontentsViewと同じ色を設定している時などは、設定を見直しましょう。

・UITableViewCellのSetHighlightの呼ばれるタイミング
UITableViewCellのfunc setHighlighted(_ highlighted: Bool, animated: Bool)の呼ばれるタイミングが変更されました。
上記箇所でselfのサイズを取得すると
iOS13以前はオートレイアウトの情報をもとに画面に表示されるサイズが取得。
iOS13以降は配置前のxibファイルに設定されているサイズが取得される。
という違いがありました。私の場合上記箇所でLazyでサイズ取得を行なっていたため、想定と違うサイズで不具合が起きました。

・iOS13のUICollectionViewの新機能
こちらのサイトがUICollectionViewのWWDCをもとにわかりやすくまとめてくれてます。
WWDCそのもののリンクはこちらです。
Advances in Collection View Layout
https://developer.apple.com/videos/play/wwdc2019/215
Advances in UI Data Sources
https://developer.apple.com/videos/play/wwdc2019/220/

さいごに

UICollectionViewはiOS11,13で大きな変更が続いています。想像しないような問題も発生しますが、入れ替えのアニメーションを自分で開発するのは大変なので使うこともよくあるかと思います。しっかりと付き合っていきたいですね。

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus 詳解 Swift 第4版 [改訂新版]Swiftポケットリファレンス (POCKET REFERENCE)

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

CollectionViewの並び替えを実装する

1 はじめに2 実装方法3 手順4 ロングタップの実装5 並び替えを可とする6 並び替え時のデータ処理7 次回表示時8 他に9 さいごに10 おすすめ書籍 はじめに こんにちは。Yossyです。 前回 ...

swift

[Swift3] SwitchとEnumを使ってSectionやCellを指定する

1 はじめに1.1 環境2 Enumの用意3 Tableの用意4 Cellの返却にEnumを使用する5 さいごに はじめに どうも、はじめです。 今回はSectionやCellの指定にSwitchとE ...

swift

Swiftの配列、辞書関連メソッドの基本

1 はじめに2 配列(Array)2.1 filter2.2 map2.3 reduce3 辞書(Dictionary)3.1 filter3.2 map3.3 reduce4 さいごに はじめに 普 ...

【Swift】SwiftUIの理解のためDSL記法とFunctionBuilderを調べてみた

1 はじめに2 DSL(ドメイン固有言語)について3 関数ビルダ3.1 定義方法3.2 使用方法3.3 SwiftUIの関数ビルダ4 カスタム属性5 さいごに6 おすすめ書籍 はじめに Xcode11 ...

UIWebViewからWKWebViewへの移行

1 はじめに2 ターゲットとなるUIWebViewで行なっていること3 URLへのアクセス4 ローカルHTMLの読み込み5 ページを戻す、進める6 ページの読み込み開始時や終了時に処理を行う(dele ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2020年3月
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。