「Android UI勉強会」のあんざいさんのスライドです。動画はこちら。 http://www.youtube.com/watch?v=Xt-RtKJdhM8 【PR】あんざいさんの本はこちらからご購入いただけます。 http://direct.ips.co.jp/androUI/

1. Fragment の利用パターン
あんざいゆき a.k.a yanzm
2012.4.19

2. ABC 2012 Spring の再演という名目でしたが
まったく同じというのもつまらん

3. 今日は、そのさらに続きということで

4. 実際のアプリの Fragment での設計を考えます
私だったらこう作るという意味です。
実際の設計とは異なると思います。

5. その前に
「Fragment 初めてなんですけど、、、」
という人にオススメのステップ

6. 1. Fragment が何者なのかを知る
• GDD 2011 Japan の Bootcamp での「Fragment を使ってみよう」
http://www.slideshare.net/yanzm/fragment

7. 2. 実際の使い方を知る その１
• 第３回名古屋android勉強会 Fragment基礎講座/ハンズオンの資料
http://bit.ly/IScAKB

8. 2. 実際の使い方を知る その2
• Android UI Cookbook for 4.0 (ICS) の2章
• View を持たない Fragment
• ViewPager + Fragment
電子書籍
4/25 まで割引価格！
http://bit.ly/I3kyzA

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. 4. 実際の設計での注意点を知る（Optional）
• Activity などアプリを構成する Fragment 以外の部分と、Fragment との関係
や、やり取りなど
• 多少 Fragment を使ってみてからの方がピンとくると思う
• ABC 2012 Spring 「エクストリームフラグメントUIプログラミング」
http://www.youtube.com/watch?v=j6BOcfJxEPc

11. 本題

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. TEDアプリ トップ画面
• スワイプでタブきりかえ → TabHost + ViewPager + Fragment

14. FragmentTransaction
TEDアプリ replace メソッドで
Fragment2入れ替え
TabHost + ViewPager
- Fragment1(+ 切り替えボタン)
- Fragment2

15. TEDアプリ Featured 画面
• スワイプで画面きりかえ → ViewPager + Fragment

16. TabHost の タブ切
TEDアプリ Featured 画面 り替え時に
replace メソッドで
Fragment2入れ替え
ViewPager
- Fragment1(+ TabHost)
- Fragment2

17. TEDアプリ Themes 画面
• タブ部分もスクロール → ListFragment + TabHost

18. TEDアプリ Themes 画面 TabHost の タブ切り替え時に
ListView に紐付けるデータを切り替え
ListFragment
- HeaderView (+ TabHost)
- ListView のアイテム

19. Activity
Top画面 Tag/Rating画面 Talk画面
Theme画面
- Featured
- My Talks

20. Top画面
Featured Tag/Rating画面
Talk画面
All Talks
Theme画面
My Talks
同じレイアウトの Fragment を使い回す

21. Fragment で作っておくと、レイアウトや画面遷移
の変更に対応しやすい
＝ レイアウトを変えながらいろんなパターンを試しやすい

22. 例えば
• Fragment で作っておけば楽になる
• TabHost ←→ ViewPager の切り替え
• 階層化：Activity - Fragment
• → Activity - Tab - Fragment
• → Activity - ViewPager - Fragment
• → Activity - FrameLayout (画面の一部) - Fragment

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. Instagram アプリ トップ画面
• 下タブきりかえ → TabHost + Fragment

25. Instagram アプリ トップ画面
TabHost
- Fragment (Home, Popular, News, Profile)

26. Activity
ほぼ1Activity
Top画面 Edit Profile画面

27. Top画面
Home Popular News Followers Following
Profile Photo
同じレイアウトの Fragment を使い回す

28. Fragment で作っておくと、あるパーツを全体に表示
する画面と、一部分で表示する画面で使い回せる

29. 例えば
Home Profile
• Home のストリームと Profile のスト
リームは同じレイアウト&ロジック
• Home : Activity - TabHost -
Fragment
• Profile : Activity - TabHost -
Fragment - TabHost (Grid/List) -
Fragment

30. Fragment 使い回しのポイント
• ListFragment は使い回しやすい
• Loader を切り替えて、表示する内容を変える
• ContentProvider から Cursor を取得する Loader
• ネットから取ってきたデータのリストを取得する Loader
• Loader に渡す Uri や URL を変えて、表示する内容を変える

31. まとめ
• Activity よりも Fragment 切り替えで画面遷移するのがトレンド
• タブ (TabHost)、スワイプでの画面きりかえ (ViewPager)、ボタンによる画面
切り替え (Segmented Control というらしい。矢野さんの講演をお待ちあれ）
の中身は Fragment にすべし
• Fragment の使い回しは ListFragment からはじめるのがオススメ
• ListFragment に紐付けるデータの取得は Loader で行うのがよい