Fragment の利用パターン

あんざいゆき　a.k.a　yanzm

2012.4.19

ABC 2012 Spring の再演という名目でしたが

まったく同じというのもつまらん

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

実際のアプリの Fragment での設計を考えます

私だったらこう作るという意味です。実際の設計とは異なると思います。

「Fragment 初めてなんですけど、、、」

その前に

という人にオススメのステップ

1. Fragment が何者なのかを知る

• GDD 2011 Japan の Bootcamp での「Fragment を使ってみよう」

http://www.slideshare.net/yanzm/fragment

2. 実際の使い方を知る　その１

• 第３回名古屋android勉強会 Fragment基礎講座/ハンズオンの資料

http://bit.ly/IScAKB

2. 実際の使い方を知る　その2

• Android UI Cookbook for 4.0 (ICS) の2章

• View を持たない Fragment

• ViewPager + Fragment

http://bit.ly/I3kyzA

電子書籍4/25 まで割引価格！

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

4. 実際の設計での注意点を知る（Optional）

• Activity などアプリを構成する Fragment 以外の部分と、Fragment との関係や、やり取りなど

• 多少 Fragment を使ってみてからの方がピンとくると思う

• ABC 2012 Spring 「エクストリームフラグメントUIプログラミング」

http://www.youtube.com/watch?v=j6BOcfJxEPc

本題

TED アプリ今日とりあげるアプリ

https://play.google.com/store/apps/details?id=com.ted.android

Instagram アプリhttps://play.google.com/store/apps/details?id=com.instagram.android

TEDアプリ　トップ画面

• スワイプでタブきりかえ　→　TabHost + ViewPager + Fragment

TEDアプリ

TabHost + ViewPager- Fragment1(+ 切り替えボタン)

- Fragment2

FragmentTransactionreplace メソッドでFragment2入れ替え

TEDアプリ　Featured 画面

• スワイプで画面きりかえ　→　ViewPager + Fragment

TEDアプリ　Featured 画面

ViewPager- Fragment1(+ TabHost)

- Fragment2

TabHost の タブ切り替え時に

replace メソッドでFragment2入れ替え

TEDアプリ　 Themes 画面

• タブ部分もスクロール　→　ListFragment + TabHost

TEDアプリ　 Themes 画面 TabHost の タブ切り替え時にListView に紐付けるデータを切り替え

ListFragment- HeaderView (+ TabHost)- ListView のアイテム

Activity

Top画面 Talk画面Tag/Rating画面

Theme画面

- Featured- My Talks

Top画面

Talk画面

Tag/Rating画面

Theme画面

Featured

All Talks

My Talks

同じレイアウトの Fragment を使い回す

Fragment で作っておくと、レイアウトや画面遷移の変更に対応しやすい

＝ レイアウトを変えながらいろんなパターンを試しやすい

例えば

• Fragment で作っておけば楽になる

• TabHost ←→ ViewPager の切り替え

• 階層化：Activity - Fragment

• → Activity - Tab - Fragment

• → Activity - ViewPager - Fragment

• → Activity - FrameLayout (画面の一部) - Fragment

例えば

• 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 は変更しなくていい

Instagram アプリ　トップ画面

• 下タブきりかえ　→　TabHost + Fragment

TabHost- Fragment (Home, Popular, News, Profile)

Instagram アプリ　トップ画面

Activity ほぼ1Activity

Top画面 Edit Profile画面

Top画面

Profile Photo

Home Popular News

同じレイアウトの Fragment を使い回す

Followers Following

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

例えば

• Home のストリームと Profile のストリームは同じレイアウト&ロジック

• Home : Activity - TabHost - Fragment

• Profile : Activity - TabHost - Fragment - TabHost (Grid/List) - Fragment

ProfileHome

Fragment 使い回しのポイント

• ListFragment は使い回しやすい

• Loader を切り替えて、表示する内容を変える

• ContentProvider から Cursor を取得する Loader

• ネットから取ってきたデータのリストを取得する Loader

• Loader に渡す Uri や URL を変えて、表示する内容を変える

まとめ

• Activity よりも Fragment 切り替えで画面遷移するのがトレンド

• タブ (TabHost)、スワイプでの画面きりかえ (ViewPager)、ボタンによる画面切り替え (Segmented Control というらしい。矢野さんの講演をお待ちあれ） の中身は Fragment にすべし

• Fragment の使い回しは ListFragment からはじめるのがオススメ

• ListFragment に紐付けるデータの取得は Loader で行うのがよい