うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift 3】UICollectionViewでreloadDataをする時にアニメーションを追加する【CATransition】

魚ライン
魚ライン

どもども。Reoです。

UICollectionViewでreloadData()をする際にアニメーションを追加する方法をようやく見つけたので、紹介します。トランジションといったほうがいいのか。

ページング等での切り替えではなくコレクションビューをリロードした際にページが変わったように見せるといった感じです。以下のような感じ。



上下に何かviewを上から置いていれば、いい感じに見えるはず。

今回は紹介のためにわりと適当にデモを作ってみましたが、実際はここにカレンダーをおいて上下スワイプで月を切り替える際に用いました。

 

先に全体コードを載せてからちょろっと説明します。

結構雑にかいたのであんまりいい書き方ではないかもしれませんがご了承ください・・・(´・ω・`)

全体コード

ViewController.swift

CustomCell.swift

 

上にスワイプしたときには、数字を1プラス

下にスワイプしたときには、数字を1マイナス

左右はセルの背景色が変わるようにしました。

 

コレクションビューをリロードする際にアニメーションをつける

上記はとりあえず全方向にアニメーションをつけてみましたが、場合分けしてるだけなので一方向部分だけ簡単に紹介したいと思います。

上にスワイプした場合

まずはジェスチャーをつけます。

そしてトランジションを作成します。

 

アニメーション部分は以前書いたこちらの記事とほぼ同様な感じです。

【Swift 3】UINavigationControllerを用いた画面遷移のアニメーション変更【CATransition】

 

上にスワイプした際のアクションを書いていきます。

 

先ほど作成したアニメーションをコレクションビューのレイヤーに追加してやります。

 

こんな感じです+:。ヾ(o・ω・)ノ゜.+

意外と簡単・・・!

 

もうちょっとアニメーションの速度に緩急つけたりした方がいい感じになるかもしれないですが、とりあえずはこんな感じで実装しました。

 

私がやりたかったのはコレクションビューを用いたカレンダーの無限(?)切り替えで、前後の月のカレンダーが見えて欲しかったんですね。reloadDataだとパッと切り替わってしまい、スワイプで移動している感覚もなくて正直めちゃくちゃ悩みました。

スクロールビューの上に3つのせてどうやらとかも考えましたが、あんまりview自体も増やしたくなかったので、どうにかアニメーションで誤魔化したかったのです。

本来はスクロールビューを使ったやり方のが一般的なのかなぁ・・・。わからない。

 

にしてもリロード前のセルとリロード後のセルの両方が見えているのが、アニメーションすげえ・・・って感じです。

もっとカスタマイズとかして使えるようになりたいところですね。

 

それではでは!

参考記事

Custom animation on UICollectionView reload data -stack overflow

 

めちゃくちゃ色々探し回ってたどり着いたので本当に感謝・・・

 

魚ライン
モッピー!お金がたまるポイントサイト
魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン