Fragment の利用パターン

24,469 views

Published on

「Android UI勉強会」のあんざいさんのスライドです。動画はこちら。
http://www.youtube.com/watch?v=Xt-RtKJdhM8

【PR】あんざいさんの本はこちらからご購入いただけます。
http://direct.ips.co.jp/androUI/

1 Comment
49 Likes
Statistics
Notes
No Downloads
Views
Total views
24,469
On SlideShare
0
From Embeds
0
Number of Embeds
841
Actions
Shares
0
Downloads
99
Comments
1
Likes
49
Embeds 0
No embeds

No notes for slide

Fragment の利用パターン

  1. 1. Fragment の利用パターンあんざいゆき a.k.a yanzm2012.4.19
  2. 2. ABC 2012 Spring の再演という名目でしたがまったく同じというのもつまらん
  3. 3. 今日は、そのさらに続きということで
  4. 4. 実際のアプリの Fragment での設計を考えます 私だったらこう作るという意味です。 実際の設計とは異なると思います。
  5. 5. その前に「Fragment 初めてなんですけど、、、」 という人にオススメのステップ
  6. 6. 1. Fragment が何者なのかを知る• GDD 2011 Japan の Bootcamp での「Fragment を使ってみよう」 http://www.slideshare.net/yanzm/fragment
  7. 7. 2. 実際の使い方を知る その1• 第3回名古屋android勉強会 Fragment基礎講座/ハンズオンの資料http://bit.ly/IScAKB
  8. 8. 2. 実際の使い方を知る その2• Android UI Cookbook for 4.0 (ICS) の2章 • View を持たない Fragment • ViewPager + Fragment 電子書籍 4/25 まで割引価格! http://bit.ly/I3kyzA
  9. 9. 3. サンプルアプリのコードを見る• API Demos (コンポーネント単位の基本的な使い方) • app → Fragment • http://developer.android.com/resources/samples/ApiDemos/src/com/ example/android/apis/app/index.html#Fragment• Honyecomb Gallery (オススメ。規模が中程度で写経にちょうどいい) • http://developer.android.com/resources/samples/HoneycombGallery/ index.html
  10. 10. 4. 実際の設計での注意点を知る(Optional)• Activity などアプリを構成する Fragment 以外の部分と、Fragment との関係 や、やり取りなど• 多少 Fragment を使ってみてからの方がピンとくると思う• ABC 2012 Spring 「エクストリームフラグメントUIプログラミング」 http://www.youtube.com/watch?v=j6BOcfJxEPc
  11. 11. 本題
  12. 12. 今日とりあげるアプリ TED アプリ https://play.google.com/store/apps/details?id=com.ted.android Instagram アプリ https://play.google.com/store/apps/details?id=com.instagram.android
  13. 13. TEDアプリ トップ画面• スワイプでタブきりかえ → TabHost + ViewPager + Fragment
  14. 14. FragmentTransactionTEDアプリ replace メソッドで Fragment2入れ替えTabHost + ViewPager - Fragment1(+ 切り替えボタン) - Fragment2
  15. 15. TEDアプリ Featured 画面• スワイプで画面きりかえ → ViewPager + Fragment
  16. 16. TabHost の タブ切TEDアプリ Featured 画面 り替え時に replace メソッドで Fragment2入れ替えViewPager - Fragment1(+ TabHost) - Fragment2
  17. 17. TEDアプリ  Themes 画面• タブ部分もスクロール → ListFragment + TabHost
  18. 18. TEDアプリ  Themes 画面 TabHost の タブ切り替え時に ListView に紐付けるデータを切り替えListFragment - HeaderView (+ TabHost) - ListView のアイテム
  19. 19. Activity Top画面 Tag/Rating画面 Talk画面 Theme画面 - Featured - My Talks
  20. 20. Top画面Featured Tag/Rating画面 Talk画面All Talks Theme画面My Talks 同じレイアウトの Fragment を使い回す
  21. 21. Fragment で作っておくと、レイアウトや画面遷移の変更に対応しやすい= レイアウトを変えながらいろんなパターンを試しやすい
  22. 22. 例えば• Fragment で作っておけば楽になる • TabHost ←→ ViewPager の切り替え • 階層化:Activity - Fragment • → Activity - Tab - Fragment • → Activity - ViewPager - Fragment • → Activity - FrameLayout (画面の一部) - Fragment
  23. 23. 例えば• 1ステップ目 : Activity - Fragment• 2ステップ目 : Activity - FrameLayout - Fragment• 3ステップ目 : Activity - Fragment - FrameLayout - Fragment• 4ステップ目 : Activity - ViewPager - Fragment - FrameLayout - Fragment• 5ステップ目 : Activity - ( TabHost + ViewPager ) - Fragment - FrameLayout - Fragment 画面のレイアウトは変わっていくが、作った Fragment は変更しなくていい
  24. 24. Instagram アプリ トップ画面• 下タブきりかえ → TabHost + Fragment
  25. 25. Instagram アプリ トップ画面TabHost - Fragment (Home, Popular, News, Profile)
  26. 26. Activityほぼ1Activity Top画面 Edit Profile画面
  27. 27. Top画面Home Popular News Followers Following Profile Photo 同じレイアウトの Fragment を使い回す
  28. 28. Fragment で作っておくと、あるパーツを全体に表示する画面と、一部分で表示する画面で使い回せる
  29. 29. 例えば Home Profile• Home のストリームと Profile のスト リームは同じレイアウト&ロジック • Home : Activity - TabHost - Fragment • Profile : Activity - TabHost - Fragment - TabHost (Grid/List) - Fragment
  30. 30. Fragment 使い回しのポイント• ListFragment は使い回しやすい • Loader を切り替えて、表示する内容を変える • ContentProvider から Cursor を取得する Loader • ネットから取ってきたデータのリストを取得する Loader • Loader に渡す Uri や URL を変えて、表示する内容を変える
  31. 31. まとめ• Activity よりも Fragment 切り替えで画面遷移するのがトレンド• タブ (TabHost)、スワイプでの画面きりかえ (ViewPager)、ボタンによる画面 切り替え (Segmented Control というらしい。矢野さんの講演をお待ちあれ) の中身は Fragment にすべし• Fragment の使い回しは ListFragment からはじめるのがオススメ• ListFragment に紐付けるデータの取得は Loader で行うのがよい

×