ScrollAnimationShowcase

[ING] - UIScrollViewやUICollectionViewの特性を活用した表現サンプル

実装機能一覧

UICollectionViewとUIPageViewControllerの性質を利用した、メディアアプリでよく見る無限スクロールするタブの動きを実装したUIサンプルになります。

本サンプルの画面設計図

全体的なアーキテクチャや全体的な画面構成、そしてそれぞれの画面に対応するViewControllerや処理の橋渡しを行うための各種Protocolとの関連性などをまとめたものは下記の図解のような形となります。

1. 画面キャプチャ:

2. Storyboardの構成:

3. 該当箇所の全体的なポイントをまとめた概略図:

UICollectionViewやUIScrollViewを有効活用する

このサンプルでは、UICollectionViewやUIScrollViewの性質や各種Delegateの処理を活用してUI表現をしています。特に表現を実現する前段階において押さえておくと良さそうな部分についてまとめています。

1. UICollectionViewFlowLayoutを継承したクラスを適用する:

2. 無限スクロールを伴うタブ型UI実装する上で必要なセルのインデックス値の調整する:

その他コードにおいてポイントとなる部分の実装

具体的な実装においてポイントになる部分については、下図に示した部分になります。

1. インデックス値を調整するための実装:

2. 配置したUICollectionViewのoffset値を調整するための実装:

3. UICollectionViewCellのインデックス値の変更の前後状態を元にUIPageViewControllerの動き方を決定するための実装:

4. 配置したUICollectionViewのスクロールが停止した際の表示位置を調整するための実装:

その他

このサンプル全体の詳細解説とポイントをまとめたものは下記に掲載しております。

(Qiita) https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4