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