Download - Fragment を使ってみよう
![Page 1: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/1.jpg)
GDD Bootcamp 2011
Fragment を使ってみようあんざいゆき
1
![Page 2: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/2.jpg)
自己紹介
✤ あんざいゆき - 株式会社ウフィカ (uPhyca)
✤ Blog : Y.A.M の雑記帳 (y-anz-m.blogspot.com)
✤ 本 : Android Layout Cookbook
✤ Twitter : @yanzm
✤ Android 女子部 副部長
✤ GTUG Girls マネージャー
2
![Page 3: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/3.jpg)
Fragment
フラグメント3
![Page 4: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/4.jpg)
「Fragment ってタブレット対応のやつですよね?」
4
![Page 5: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/5.jpg)
「Fragment でタブレット対応するってどういうこと?」
5
![Page 6: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/6.jpg)
ハンドセット
6
![Page 7: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/7.jpg)
タブレット
情報量が足りない
→ layout-xlarge で文字や画像を大きくするだけでは解決できない7
![Page 8: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/8.jpg)
情報量を増やすには、ハンドセットで別の画面になっているものを一緒に
表示するしかない!
8
![Page 9: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/9.jpg)
各画面のレイアウトを合わせたレイアウトファイルだと...
<LinearLayout ...> <include layout=”@layout/main1”/> <include layout=”@layout/main2”/></LinearLayout>
各Activity内のロジックはどうする?
9
![Page 10: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/10.jpg)
動的に Activity をくっつけられないでも同じロジックとレイアウトだから使い回したい
ロジック + レイアウトで使い回せる状態がいい
10
![Page 11: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/11.jpg)
各画面をFragmentにすれば...
<LinearLayout ...> <fragment android:name=”...Fragment1”/> <fragment android:name=”...Fragment2”/></LinearLayout>
ロジックもついてくる!
Fragment1
レイアウト+
ロジック
Fragment2
レイアウト+
ロジック
Fragment1
レイアウト+
ロジック
Fragment2
レイアウト+
ロジック
Fragment なら動的に Activity に追加/削除/入れ替えができる
11
![Page 12: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/12.jpg)
2画面対応 デモ
12
![Page 13: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/13.jpg)
「ハンドセット向けのアプリなので、Fragment 使う利点ないですか?」
13
![Page 14: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/14.jpg)
あります!
14
![Page 15: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/15.jpg)
例えば...
特定のViewにだけ関連するロジックがある場合
それぞれをFragment 化
- 1つのUIコンポーネントして使い回せる- Activity のコードがすっきり
XMLをとってきてパースして表示
GETリクエストの結果を表示
URLから画像をダウンロードして表示
15
![Page 16: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/16.jpg)
例えば... iosched
DashboardFragmentダッシュボード用のレイアウトと遷移の処理
WhatsOnFragmentカウントダウンを表示
16
![Page 17: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/17.jpg)
例えば...
Activity のライフサイクルに合わせて処理をしたいとき
onPause(), onResume() で- IntentFilter の regist / unregist
- ContentObserver の regist /unregist
- など
17
![Page 18: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/18.jpg)
例えば...
縦横でレイアウトを変える場合- どちらかの画面にだけ出てくる UI がある場合 → Fragment なら Fragment自体 の追加/削除で レイアウトとロジック両方とも処理
Fragment1Fragment1 Fragment2
18
![Page 19: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/19.jpg)
例えば...
同じActivityでレイアウトを変える場合- setContentView() だと、前のViewの状態は保存されない → Fragment を使って、置き換えられる Fragmentをバックスタックに保持 → 状態がそのまま保存される
19
![Page 20: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/20.jpg)
例えば...
タブレイアウト
Android 3.2 から ActivityGroup, LocalActivityManager は
deprecated に → TabHost を使った複数Activityのタブが使えない
- Fragment を使ってタブを実現- ActionBar.Tab
20
![Page 21: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/21.jpg)
例えば...
ListView + 1行用のカスタムView + カスタムAdapter
カスタムListFragment
View と ロジックが1つのクラスになってるので再利用しやすい
21
![Page 22: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/22.jpg)
「つまり Fragment って?」
22
![Page 23: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/23.jpg)
Fragmentは再利用可能なUIコンポーネントを作成しやすくするもの
23
![Page 24: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/24.jpg)
これまで
Activity - View
これから
Activity - Fragment - View
Fragment = ライフサイクル + ロジック + View
Activity と View の中間みたいな...
24
![Page 25: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/25.jpg)
「カスタムViewじゃだめなんですか?」
25
![Page 26: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/26.jpg)
カスタムView- 複数のViewをまとめて1つのViewとしてあつかう- 独自の描画のウィジェットを作る
カスタムViewの限界- あくまでViewの描画とそれに関するロジックにとどまる(べき)
- バックグラウンドでネットワーク通信するようなロジックはカスタムView に入れるべきではない
- View を持たないロジックだけのコンポーネントを作れない
26
![Page 27: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/27.jpg)
カスタムViewの限界を補うために
Activityに書いていたロジックを持てるようになったのがFragment
27
![Page 28: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/28.jpg)
Fragmentの特徴
✤ View + ロジックの再利用可能なコンポーネントを作れる
✤ View を持たない、ロジックだけの再利用可能なコンポーネントも作れる
✤ Activity のライフサイクルと関連するライフサイクルを持つ
✤ バックスタック機能
28
![Page 29: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/29.jpg)
Fragmentの特徴
✤ 1つのViewのようにレイアウトXMLファイルに書ける( <fragment> タグ)
✤ 複数のViewを持ってそれぞれをコントロールできる
29
![Page 30: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/30.jpg)
Fragmentのいまいちな所
✤ カスタムViewと同じように完全修飾名でレイアウトXMLファイルに書くので...
✤ グラフィカルエディタで正確に再現できない場合がある
✤ クラス名がレイアウトエディタ上で自動補完されないので、タイポによるエラーを起こしやすい
30
![Page 31: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/31.jpg)
「でもFragmentって3.0以降じゃないと使えないんでしょ?」
v4 Support Library を使えば 1.6 から使えます
31
![Page 32: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/32.jpg)
「どこまでこれまでのViewとActivityにやらせて、どこを新しくFragmentに
やらせればいいの?」
32
![Page 33: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/33.jpg)
✤ View or カスタムView
✤ 描画とそのための最低限のロジック
✤ Fragment
✤ View + そのViewに関連するロジック(Viewの操作やViewに表示するデータの処理)
✤ Activity
✤ それ以外。ActivityとFragment間のデータの受け渡し、複数のFragment間のデータの受け渡し、Window の設定などActivity に関連するロジック
33
![Page 34: Fragment を使ってみよう](https://reader031.vdocuments.mx/reader031/viewer/2022013107/54b6ce5d4a7959b5318b461e/html5/thumbnails/34.jpg)
ありがとうございました
34