Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
メディアアプリでよく見る

無限スクロールするタブの動きへの考察
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.co...
ほんの少しだけ告知と宣伝
「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の
中で培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構
築をする上で重要な実装ポイントやアイデアを紹介していく形式にし...
今回取り組む事になったきっかけ
これまでもメディアアプリの事例を元にした記事を書いたのでもう一個。
以前にも公開している記事:
メディア系アプリでよくあるUIを実現した簡易サンプル

https://qiita.com/fumiyasac@gi...
画面の動きに関するデモ動画をご一緒に!
今回の発表でのサンプルコード
実際に動かせるコードもご用意しました	&	解説コメントも残しました。
https://github.com/fumiyasac/ScrollAnimationShowcase
Storyboardの構成
タブ表示部分とコンテンツ表示部分をContainerViewに分割しています。	
タブ用のUICollectionView
ContainerViewに
UIPageViewController
を接続しておく
コン...
無限スクロールを伴うタブ型UI実装をするために	(1)
UICollectionViewFlowLayoutクラスを継承したクラスを別途作成する。
無限スクロールを伴うタブ型UI実装をするために	(2)
① 配置しているUICollectionViewの情報を取得
② 現在配置情報を元にセル位置の調整をする
このコードでは最終的に停止する位置を変更している
無限スクロールを伴うタブ型UI実装をするために	(3)
UICollectionViewCellのIndex値を無限スクロールに対応できる様に調整する。
無限スクロールを伴うタブ型UI実装をするために	(4)
① 実際のセル配置個数をインデックス値を元にした調整
② セル配置位置に関する調整
動作調整をするために実際の個数よりも多く配置する必要があるの
でインデックス値が不整合を生じないように配...
無限スクロールを伴うタブ型UI実装をするために	(5)
① UIPageViewControllerの動作との整合を保つ
UIPageViewControllerに配置しているものについても
別途Index値を持っているため、タブ型表示をしてい...
無限スクロールを伴うタブ型UI実装をするために	(6)
① タブのスクロールが自然に停止した際の考慮
自然に停止する際には真ん中を基準として一番近くにあ
るセルの内容に合わせる配慮が必要になる。
② 処理をつなげるためのProtocol
UIP...
無限スクロールを伴うタブ型UI実装をするために	(まとめ)
ProtocolやContainerViewの親子関係を上手に活用することで実現する。	
ArticleViewController CategoryScrollTabViewCont...
このサンプルUIで加えたほんの少しの工夫例	(1)
・選択しているFont Family & Font Sizeを考慮
・現在表示している文字列の長さを取得する
止まったタブ位置の文字長さに合わせて下線の長さが変化する表現。
あとはこのメソッド...
このサンプルUIで加えたほんの少しの工夫例	(2)
選択されたよ!ということをユーザーに伝えるためのHaptic	Feedbackを追加。
短く「コツッ!」としたフィードバックを与える一例:
まずはUIImpactFeedBackGenerat...
このサンプルを実現するために参考資料	(1)
UICollectionView関連のTIPSについては今も相変わらずよく見ています。
UICollectionViewLayoutを利用するための参考リンク集:
【Swift】UICollecti...
このサンプルを実現するために参考資料	(2)
無限スクロールを実現する際にはUIScrollViewDelegateの活用がポイント。
UICollectionViewやUIScrollViewを利用した無限スクロールの実装例:
UIPageV...
今回の発表内容の補足と詳細
本日お話した内容に関しては下記の記事にもまとめております。
https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4
今回のまとめ
大雑把な動きから細かな調整や汎用化までの過程が勉強になった!
Step1)	基本の確認とベース挙動の実現
まずは必要そうなものをピックアップ

・UIPageViewController

・ContainerView

・UIC...
Thank	you	for	listening	!
Prochain SlideShare
Chargement dans…5
×

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

818 vues

Publié le

こちらはROPPONGI.swift 第6回 望年会での登壇資料になります。
https://visits.connpass.com/event/111355/

今回は読み物系コンテンツアプリでよくお目にかかる「読みたいカテゴリータブが無限スクロールする動き」をライブラリを用いずに実現したサンプルの解説を構築した際に得られた知見や実装ポイントの紹介になります。

詳細解説記事:
https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4

サンプルリポジトリ:
https://github.com/fumiyasac/ScrollAnimationShowcase

サンプルの全体的な動きの動画:
https://www.facebook.com/fumiya.sakai.37/videos/vb.100001580558958/2233392033390127

Publié dans : Technologie
  • Soyez le premier à commenter

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

  1. 1. メディアアプリでよく見る 無限スクロールするタブの動きへの考察 Fumiya Sakai (Just1factory) 2018/12/21 ROPPONGI.swift 第6回 望年会 @ Visits Technology Inc.
  2. 2. 自己紹介 ・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
  3. 3. ほんの少しだけ告知と宣伝 「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の 中で培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構 築をする上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。 収録サンプル: https://github.com/fumiyasac/ios_ui_recipe_showcase 現在Boothにて販売中です(近日アップデート予定) ¥1,000 同人誌「iOSアプリ開発 UI実装であると嬉しいレシピブック」を書きました。 https://booth.pm/ja/items/1021745 概要:
  4. 4. 今回取り組む事になったきっかけ これまでもメディアアプリの事例を元にした記事を書いたのでもう一個。 以前にも公開している記事: メディア系アプリでよくあるUIを実現した簡易サンプル https://qiita.com/fumiyasac@github/items/2490990be4c011935368 iPhoneアプリでUIを作るためのTipsとContainerView・UIPageViewControllerを使ったサンプル紹介 https://qiita.com/fumiyasac@github/items/1244abc8e3286c47ef50 素晴らしいライブラリもたくさんある中でも、あえてDIYすることで実装時のポイントが見えてくる 実際にアプリで導入されている事例に踏み込む: この記事は活用をするにあたって絶対に押さえておくべき部分の第1歩の部分
  5. 5. 画面の動きに関するデモ動画をご一緒に!
  6. 6. 今回の発表でのサンプルコード 実際に動かせるコードもご用意しました & 解説コメントも残しました。 https://github.com/fumiyasac/ScrollAnimationShowcase
  7. 7. Storyboardの構成 タブ表示部分とコンテンツ表示部分をContainerViewに分割しています。 タブ用のUICollectionView ContainerViewに UIPageViewController を接続しておく コンテンツ表示用に 使い回す用のViewControllerContainerViewを 2つ配置する
  8. 8. 無限スクロールを伴うタブ型UI実装をするために (1) UICollectionViewFlowLayoutクラスを継承したクラスを別途作成する。
  9. 9. 無限スクロールを伴うタブ型UI実装をするために (2) ① 配置しているUICollectionViewの情報を取得 ② 現在配置情報を元にセル位置の調整をする このコードでは最終的に停止する位置を変更している
  10. 10. 無限スクロールを伴うタブ型UI実装をするために (3) UICollectionViewCellのIndex値を無限スクロールに対応できる様に調整する。
  11. 11. 無限スクロールを伴うタブ型UI実装をするために (4) ① 実際のセル配置個数をインデックス値を元にした調整 ② セル配置位置に関する調整 動作調整をするために実際の個数よりも多く配置する必要があるの でインデックス値が不整合を生じないように配慮する。 またタブの数が変化した際に崩れたりしないように注意する。 こちらもUICollectionViewの現在オフセット値の調節 のために別途配慮する
  12. 12. 無限スクロールを伴うタブ型UI実装をするために (5) ① UIPageViewControllerの動作との整合を保つ UIPageViewControllerに配置しているものについても 別途Index値を持っているため、タブ型表示をしている UICollectionViewのIndex値との整合を保つ必要がある。 ② UIPageViewControllerへ何を伝えるか 必要な値: ・UIPageViewControllerを動かす方向 ・UIPageViewControllerに表示するもののIndex値
  13. 13. 無限スクロールを伴うタブ型UI実装をするために (6) ① タブのスクロールが自然に停止した際の考慮 自然に停止する際には真ん中を基準として一番近くにあ るセルの内容に合わせる配慮が必要になる。 ② 処理をつなげるためのProtocol UIPageViewController側に仕込んだ表示に関 する変化処理と結合して役割を明確にする。
  14. 14. 無限スクロールを伴うタブ型UI実装をするために (まとめ) ProtocolやContainerViewの親子関係を上手に活用することで実現する。 ArticleViewController CategoryScrollTabViewController CategoryScrollContentsViewController (UIPageViewController) �※表示したいカテゴリーの個数分配置する 無限カルーセル表示処理に関する考慮 UIPageViewControllerDelegate: UIPageViewControllerDataSource: スワイプ切り替え完了時にタブ側を更新 UICollectionViewDataSource: セルタップ時に表示を更新する UIScrollViewDelegate: スクロール自然停止時に表示を更新する �※別途CategoryScrollTabDelegate定義 タブ側の状態変化をArticleViewControllerへ 伝えることでタブとコンテンツ表示を合わせる。
  15. 15. このサンプルUIで加えたほんの少しの工夫例 (1) ・選択しているFont Family & Font Sizeを考慮 ・現在表示している文字列の長さを取得する 止まったタブ位置の文字長さに合わせて下線の長さが変化する表現。 あとはこのメソッドを然るべき時に実行する形
  16. 16. このサンプルUIで加えたほんの少しの工夫例 (2) 選択されたよ!ということをユーザーに伝えるためのHaptic Feedbackを追加。 短く「コツッ!」としたフィードバックを与える一例: まずはUIImpactFeedBackGeneratorのインスタンスを作成 然るべきタイミングでimpactOccurred()を実行させる UIPageViewControllerのスワイプ移動完了/ タブ型UIのスクロール停止 / タブ型UIのセルタップ 今回の部分で端末のフィードバックを伴う部分:
  17. 17. このサンプルを実現するために参考資料 (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構築の際には一読すると良いかと思います。 なかなかドキュメントだけではピンと来にくい部分:
  18. 18. このサンプルを実現するために参考資料 (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
  19. 19. 今回の発表内容の補足と詳細 本日お話した内容に関しては下記の記事にもまとめております。 https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4
  20. 20. 今回のまとめ 大雑把な動きから細かな調整や汎用化までの過程が勉強になった! Step1) 基本の確認とベース挙動の実現 まずは必要そうなものをピックアップ ・UIPageViewController ・ContainerView ・UICollectionView このサンプル開発を通じて: ライブラリを使用せずに類似の動きを自分で実装をすることで「どのProtocolを知った上での活用が必要か?」 「調整ないしは汎用化を考えて行く際に考慮すべき点はどこか?」「処理や実装に加えてUI/UX部分でもさらに 考慮できる点はどこか?」の観点が理解できるようになる。UI表現を提案する際の手札が増える! Step2) さらにUXへのこだわりや汎用化 実現できることから1つ上のステージへ ・Customization of tab count & size ・Animation ・Haptic Feedback
  21. 21. Thank you for listening !

×