メディアアプリでよく見る無限スクロールするタブの動きへの考察

メディアアプリでよく見る

無限スクロールするタブの動きへの考察
Fumiya Sakai (Just1factory)
2018/12/21 ROPPONGI.swift 第6回望年会 @ Visits Technology Inc.

自己紹介
・Fumiya Sakai
・Mobile App Engineer
アカウント:
・Twitter: https://twitter.com/fumiyasac

・Facebook: https://www.facebook.com/fumiya.sakai.37

・Github: https://github.com/fumiyasac

・Qiita: https://qiita.com/fumiyasac@github
発表者:
・Born on September 21, 1984
これまでの歩み:
Web Designer
2008 ~ 2010
Web Engineer
2012 ~ 2016
App Engineer
2017 ~ Present

ほんの少しだけ告知と宣伝
「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の
中で培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構
築をする上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。
収録サンプル:
https://github.com/fumiyasac/ios_ui_recipe_showcase
現在Boothにて販売中です（近日アップデート予定） ¥1,000
同人誌「iOSアプリ開発 UI実装であると嬉しいレシピブック」を書きました。
https://booth.pm/ja/items/1021745
概要:

今回取り組む事になったきっかけ
これまでもメディアアプリの事例を元にした記事を書いたのでもう一個。
以前にも公開している記事:
メディア系アプリでよくあるUIを実現した簡易サンプル

https://qiita.com/fumiyasac@github/items/2490990be4c011935368

iPhoneアプリでUIを作るためのTipsとContainerView・UIPageViewControllerを使ったサンプル紹介

https://qiita.com/fumiyasac@github/items/1244abc8e3286c47ef50
素晴らしいライブラリもたくさんある中でも、あえてDIYすることで実装時のポイントが見えてくる
実際にアプリで導入されている事例に踏み込む:
この記事は活用をするにあたって絶対に押さえておくべき部分の第1歩の部分

画面の動きに関するデモ動画をご一緒に！

今回の発表でのサンプルコード
実際に動かせるコードもご用意しました & 解説コメントも残しました。
https://github.com/fumiyasac/ScrollAnimationShowcase

Storyboardの構成
タブ表示部分とコンテンツ表示部分をContainerViewに分割しています。
タブ用のUICollectionView
ContainerViewに
UIPageViewController
を接続しておく
コンテンツ表示用に
使い回す用のViewControllerContainerViewを
2つ配置する

無限スクロールを伴うタブ型UI実装をするために (1)
UICollectionViewFlowLayoutクラスを継承したクラスを別途作成する。

① 配置しているUICollectionViewの情報を取得
② 現在配置情報を元にセル位置の調整をする
このコードでは最終的に停止する位置を変更している

UICollectionViewCellのIndex値を無限スクロールに対応できる様に調整する。

① 実際のセル配置個数をインデックス値を元にした調整
② セル配置位置に関する調整
動作調整をするために実際の個数よりも多く配置する必要があるの
でインデックス値が不整合を生じないように配慮する。

またタブの数が変化した際に崩れたりしないように注意する。
こちらもUICollectionViewの現在オフセット値の調節
のために別途配慮する

① UIPageViewControllerの動作との整合を保つ
UIPageViewControllerに配置しているものについても
別途Index値を持っているため、タブ型表示をしている
UICollectionViewのIndex値との整合を保つ必要がある。
② UIPageViewControllerへ何を伝えるか
必要な値：

・UIPageViewControllerを動かす方向

・UIPageViewControllerに表示するもののIndex値

① タブのスクロールが自然に停止した際の考慮
自然に停止する際には真ん中を基準として一番近くにあ
るセルの内容に合わせる配慮が必要になる。
② 処理をつなげるためのProtocol
UIPageViewController側に仕込んだ表示に関
する変化処理と結合して役割を明確にする。

無限スクロールを伴うタブ型UI実装をするために (まとめ)
ProtocolやContainerViewの親子関係を上手に活用することで実現する。
ArticleViewController CategoryScrollTabViewController
CategoryScrollContentsViewController
（UIPageViewController）
�※表示したいカテゴリーの個数分配置する
無限カルーセル表示処理に関する考慮
UIPageViewControllerDelegate:
UIPageViewControllerDataSource:
スワイプ切り替え完了時にタブ側を更新
UICollectionViewDataSource:
セルタップ時に表示を更新する
UIScrollViewDelegate:
スクロール自然停止時に表示を更新する
�※別途CategoryScrollTabDelegate定義
タブ側の状態変化をArticleViewControllerへ
伝えることでタブとコンテンツ表示を合わせる。

このサンプルUIで加えたほんの少しの工夫例 (1)
・選択しているFont Family & Font Sizeを考慮
・現在表示している文字列の長さを取得する
止まったタブ位置の文字長さに合わせて下線の長さが変化する表現。
あとはこのメソッドを然るべき時に実行する形

このサンプルUIで加えたほんの少しの工夫例 (2)
選択されたよ！ということをユーザーに伝えるためのHaptic Feedbackを追加。
短く「コツッ!」としたフィードバックを与える一例:
まずはUIImpactFeedBackGeneratorのインスタンスを作成
然るべきタイミングでimpactOccurred()を実行させる
UIPageViewControllerのスワイプ移動完了/ タブ型UIのスクロール停止 / タブ型UIのセルタップ
今回の部分で端末のフィードバックを伴う部分:

このサンプルを実現するために参考資料 (1)
UICollectionView関連のTIPSについては今も相変わらずよく見ています。
UICollectionViewLayoutを利用するための参考リンク集:
【Swift】UICollectionViewLayoutの使い方。コレクションビューのセルの配置をカスタマイズする。

https://hajihaji-lemon.com/smartphone/swift/uicollectionviewlayout/
UICollectionViewのLayoutで悩んだら

https://techlife.cookpad.com/entry/2017/06/29/190000
UICollectionViewFlowLayoutでセルの大きさやセル同士の間隔などを設定する

https://qiita.com/takehilo/items/d0e56f88a42fb8ed1185
こちらは今回の事例に限らずともUICollectionViewを利用したUI構築の際には一読すると良いかと思います。
なかなかドキュメントだけではピンと来にくい部分:

このサンプルを実現するために参考資料 (2)
無限スクロールを実現する際にはUIScrollViewDelegateの活用がポイント。
UICollectionViewやUIScrollViewを利用した無限スクロールの実装例:
UIPageViewControllerをつかって無限スクロールできるタブUIを実装してOSSとして公開しました

https://techblog.zozo.com/entry/tab_page_viewcontroller
【Swift4】UICollectionViewを使ってカルーセルを実装してみた。【セルの装飾編】

https://uruly.xyz/carousel-infinite-scroll-4/
infinite-uicollectionview【※Github Repository】

https://github.com/masoapps/infinite-uicollectionview
Infinite-Scrollview【※Github Repository】

https://github.com/duckien219/Infinite-Scrollview

今回の発表内容の補足と詳細
本日お話した内容に関しては下記の記事にもまとめております。
https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4

今回のまとめ
大雑把な動きから細かな調整や汎用化までの過程が勉強になった！
Step1) 基本の確認とベース挙動の実現
まずは必要そうなものをピックアップ

・UIPageViewController

・ContainerView

・UICollectionView
このサンプル開発を通じて:
ライブラリを使用せずに類似の動きを自分で実装をすることで「どのProtocolを知った上での活用が必要か？」
「調整ないしは汎用化を考えて行く際に考慮すべき点はどこか？」「処理や実装に加えてUI/UX部分でもさらに
考慮できる点はどこか？」の観点が理解できるようになる。UI表現を提案する際の手札が増える！
Step2) さらにUXへのこだわりや汎用化
実現できることから1つ上のステージへ

・Customization of tab count & size

・Animation

・Haptic Feedback

メディアアプリでよく見る無限スクロールするタブの動きへの考察

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a メディアアプリでよく見る無限スクロールするタブの動きへの考察

Semelhante a メディアアプリでよく見る無限スクロールするタブの動きへの考察 (20)

Mais de Fumiya Sakai

Mais de Fumiya Sakai (10)

メディアアプリでよく見る無限スクロールするタブの動きへの考察