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


関連記事

swift

[Swift 3] テキストの装飾(フォント・文字サイズ・文字間隔・行間・文字色・下線)

1 はじめに2 フォント・文字サイズ変更3 文字間隔4 行間5 文字色6 下線7 さいごに8 おすすめ書籍 はじめに どうもはじめです。 今回は文字の装飾をやってみようと思います。 完成図を載せておき ...

swift

[Swift]UIPageViewControllerを使ってみよう!

1 はじめに1.1 前提条件2 UIPageViewControllerとは3 実装3.1 ViewControllerを準備3.2 UIPageViewControllerを準備3.3 最初の画面を ...

swift

[Swift3] ナビゲーションバーとステータスバーの色変更

1 はじめに1.1 前提条件2 ナビゲーションアイテムの色変更3 ナビゲーションバーの色変更4 ナビゲーションタイトルの色変更5 ステータスバーの色変更6 さいごに はじめに どうも、はじめです。 今 ...

[Swift]アプリのフォアグラウンドに特定の処理を行う。

1 はじめに2 今回の目標3 画面構成4 通知の設定4.1 通知の送信4.2 通知の受信と削除-BaseController5 それぞれの画面の設定5.1 初期画面(FirstViewControll ...

swift

[Swift]タブの切り替え時にアニメーションが簡単に実装できる「TransitionableTab」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITabBarControllerの切り替え時にアニメーションを実装できるライブラリ「Transitiona ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年3月
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

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