はじめてのFragments2012 – 04 - 24株式会社グルーヴシステムズ    木下照章
自己紹介- 株式会社グルーヴシステムズ                   代表取締役社長- 制御系 → 業務系 → アプリ系(いまここ)- iOS / Androidアプリを多数制作- Twitter ID : @metal_presiden...
AGENDA1. Fragments とは2. Fragments の使い方3. Fragments を使ってみる                      2
コレですよね!?1. Fragmentsとは.                  UIパーツ?便利なの?                                3
ココを読んでみましょ1. Fragmentsとは..   う                                4
1. Fragmentsとは...A Fragment represents a behavior or a portion of user interface in an Activity. You cancombine multiple f...
1. Fragmentsとは....        翻訳を抜粋 フラグメントは、アクティビティにおける動作やユーザーインターフェイスの部分を表す 〜 マルチペインのUIを構築し、複数のアクティビティでフラグメントを再利用するために単一のアクティ...
1. Fragmentsとは.....              Fragmentsの特徴-   マルチペインUIを実現できる-   再利用ができる-   Activity内に複数のFragmentsを表示できる-   Activity表示中に...
1. Fragmentsとは......   Fragmentsスゴイ!!                    Fragments新しい!         Fragmentsカッコいい                             ...
1. Fragmentsとは.......  ActivityGroupというものがあってですね…         ActivityGroup          Activity A          Activity B           ...
1. Fragmentsとは........          このクラスは推奨されていません。          代わりに、新しいフラグメントと          FragmentManager APIを使用して、これらはまた、       ...
1. Fragmentsとは.........           このクラスは推奨されていません。           新しいアプリケーションはこのクラスの代わりに           フラグメントを使用する必要があります。古いデ      ...
1. Fragmentsとは..........-   Fragments は ActivityGroup / TabActivity の代替(+α)クラス    のようなもの-   Android 1.6 以降なら v4 サポートライブラリで...
2. Fragmentsの使い方.  API Level                                使い方3(1.5)以下         使えません。諦めましょう。4〜9(1.6〜2.3)     サポートパッケージを導入...
2. Fragmentsの使い方..【注意事項】 先にADTを最新版にバージョンアップしておきましょう。                               14
2. Fragmentsの使い方...1. Eclipseを起動します。2. Android SDK Managerを起動します。3. Packagesリストの ”Android Support Package” をチェッ   クして Inst...
2. Fragmentsの使い方.…【利用するクラス】-   android.app.Fragment     Fragmentのクラス、Objectのサブクラスであることに注意    (View/Activity/Contextのサブクラスで...
Fragmentsのライフサイク                 ル2. Fragmentsの使い方.….                                    17
Activityのライフサイクル                 と連動します2. Fragmentsの使い方.…..                                    18
2. Fragmentsの使い方.……ところで...【翻訳】に フラグメントは、アクティビティにおける動作やユーザーインターフェイスの部分を表す 〜【特徴】に 再利用ができるとありましたよね。ということは……..                ...
2. Fragmentsの使い方........  Activity             こうなるはずですよ   Fragment A          ね!             レイアウト                ロジック   ...
2. Fragmentsの使い方…......-   マルチペインの実現だけでなく再利用できる点が大きなメ    リット-   再利用するためロジックはFragment内に実装-   マルチペインでなくてもFragmentを使って実装しておけば...
3. Fragmentsを使ってみる.1. 新規プロジェクトを作成する-   Project name : Fragment (任意)-   Build Target : Android 4.0 or 4.0.3-   Application ...
3. Fragmentsを使ってみる..2. layout/main.xml を編集する  <?xml version="1.0" encoding="utf-8"?>  <LinearLayout             xmlns:andr...
3. Fragmentsを使ってみる…3. ListFragmentSample.javaを作成する (extends ListFragment)   private List<Map<String, Object>> list = new A...
3. Fragmentsを使ってみる….4. layout/detail.xml を作成する  <?xml version="1.0" encoding="utf-8"?>  <LinearLayout             xmlns:an...
3. Fragmentsを使ってみる…..5. DetailFragment.javaを作成する (extends Fragment)   @Override   public View onCreateView(LayoutInflater ...
3. Fragmentsを使ってみる……6. ListFragmentSample.java に戻って追加  @Override  public void onListItemClick(ListView l, View v, int posi...
3. Fragmentsを使ってみる…….7. さらに layout-land/main.xml を作成する  <?xml version="1.0" encoding="utf-8"?>  <LinearLayout             ...
3. Fragmentsを使ってみる……..8. Android1.6で動く様にしてみる- API Level を 4に変更する- import のエラー行を削除する- ANDROID_SDK/extras/android/support/v4...
以 上      30
Upcoming SlideShare
Loading in …5
×

Using the Fragments(Android)

7,102 views

Published on

A guide for beginners on how to use the Fragments.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,102
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Using the Fragments(Android)

  1. 1. はじめてのFragments2012 – 04 - 24株式会社グルーヴシステムズ 木下照章
  2. 2. 自己紹介- 株式会社グルーヴシステムズ 代表取締役社長- 制御系 → 業務系 → アプリ系(いまここ)- iOS / Androidアプリを多数制作- Twitter ID : @metal_president 1
  3. 3. AGENDA1. Fragments とは2. Fragments の使い方3. Fragments を使ってみる 2
  4. 4. コレですよね!?1. Fragmentsとは. UIパーツ?便利なの? 3
  5. 5. ココを読んでみましょ1. Fragmentsとは.. う 4
  6. 6. 1. Fragmentsとは...A Fragment represents a behavior or a portion of user interface in an Activity. You cancombine multiple fragments in a single activity to build a multi-pane UI and reuse a fragmentin multiple activities. You can think of a fragment as a modular section of an activity, whichhas its own lifecycle, receives its own input events, and which you can add or remove whilethe activity is running (sort of like a "sub activity" that you can reuse in different activities).A fragment must always be embedded in an activity and the fragments lifecycle is directlyaffected by the host activitys lifecycle. For example, when the activity is paused, so are allfragments in it, and when the activity is destroyed, so are all fragments. However, while anactivity is running (it is in the resumed lifecycle state), you can manipulate each fragmentindependently, such as add or remove them. When you perform such a fragment transaction,you can also add it to a back stack thats managed by the activity—each back stack entry inthe activity is a record of the fragment transaction that occurred. The back stack allows theuser to reverse a fragment transaction (navigate backwards), by pressing the Back button.When you add a fragment as a part of your activity layout, it lives in a ViewGroup inside theactivitys view hierarchy and the fragment defines its own view layout. You can insert afragment into your activity layout by declaring the fragment in the activitys layout file, as a<fragment> element, or from your application code by adding it to an existing ViewGroup.However, a fragment is not required to be a part of the activity layout; you may also use afragment without its own UI as an invisible worker for the activity.※ Android Developersサイトより抜粋 説明が長い… 5
  7. 7. 1. Fragmentsとは.... 翻訳を抜粋 フラグメントは、アクティビティにおける動作やユーザーインターフェイスの部分を表す 〜 マルチペインのUIを構築し、複数のアクティビティでフラグメントを再利用するために単一のアクティビティに複数のフラグメントを組み合わせることができます〜 アクティビティの実行中に追加または削除することができます。 フラグメントは常にアクティビティに埋め込まなければならず、フラグメントのライフサイクルは直接ホスト·アクティビティのライフサイクルに影響されます 〜 追加または削除するように、独立して各フラグメントを操作することができます 〜 フラグメントのトランザクションを実行するときには、バックスタックに追加することができ、ユーザーが[戻る]ボタンを押すことによって、フラグメントのトランザクションを逆にすることができます。〜 〜アクティビティのレイアウト ファイル内に<fragment>要素として宣言することによって、またはアプリケーションコードからフラグメントを挿入することができます。 〜 6
  8. 8. 1. Fragmentsとは..... Fragmentsの特徴- マルチペインUIを実現できる- 再利用ができる- Activity内に複数のFragmentsを表示できる- Activity表示中にFragmentsを追加/削除できる- FragmentsはActivityに埋め込んで使う- FragmentsはActivityのライフサイクルに影響される- 各Fragmentsを個別に操作できる- Fragmentsの追加/削除をバックスタックに追加し戻るボタ ンで戻ることができる- Layoutファイル内に <fragment>要素として宣言する 7
  9. 9. 1. Fragmentsとは...... Fragmentsスゴイ!! Fragments新しい! Fragmentsカッコいい 8
  10. 10. 1. Fragmentsとは....... ActivityGroupというものがあってですね… ActivityGroup Activity A Activity B 9
  11. 11. 1. Fragmentsとは........ このクラスは推奨されていません。 代わりに、新しいフラグメントと FragmentManager APIを使用して、これらはまた、 Androidの互換性パッケージを介して古いプラット フォーム上で利用可能です。 10
  12. 12. 1. Fragmentsとは......... このクラスは推奨されていません。 新しいアプリケーションはこのクラスの代わりに フラグメントを使用する必要があります。古いデ バイス上で実行するように継続するには、ダウン DONUTと互換性があるフラグメントAPIのバー ジョンを提供していますv4のサポートライブラリ を使用することができます。 11
  13. 13. 1. Fragmentsとは..........- Fragments は ActivityGroup / TabActivity の代替(+α)クラス のようなもの- Android 1.6 以降なら v4 サポートライブラリでFragmentsが 使えるよ- 特にTabActivityは一般的に利用されてきたクラスなので、こ れから(4.0対応等)アプリを作る人は注意しましょう…一応動 きますが- クラスごと消されることがあるんですね… 12
  14. 14. 2. Fragmentsの使い方. API Level 使い方3(1.5)以下 使えません。諦めましょう。4〜9(1.6〜2.3) サポートパッケージを導入することで利用可能になります。 最新版はrevision7(2012-04-22現在) http://developer.android.com/sdk/compatibility-library.html10〜13(3.0〜3.2) 標準で使えます。14(4.0)〜 標準で使えます。 13
  15. 15. 2. Fragmentsの使い方..【注意事項】 先にADTを最新版にバージョンアップしておきましょう。 14
  16. 16. 2. Fragmentsの使い方...1. Eclipseを起動します。2. Android SDK Managerを起動します。3. Packagesリストの ”Android Support Package” をチェッ クして Install ボタンをクリックします。Rev.7 が最新です。 15
  17. 17. 2. Fragmentsの使い方.…【利用するクラス】- android.app.Fragment Fragmentのクラス、Objectのサブクラスであることに注意 (View/Activity/Contextのサブクラスではありません)- android.app.FragmentManager ActivityとFragmentのインターフェースを担うabstractク ラス- android.app.FragmentTransaction Fragmentを操作する為のAPI 16
  18. 18. Fragmentsのライフサイク ル2. Fragmentsの使い方.…. 17
  19. 19. Activityのライフサイクル と連動します2. Fragmentsの使い方.….. 18
  20. 20. 2. Fragmentsの使い方.……ところで...【翻訳】に フラグメントは、アクティビティにおける動作やユーザーインターフェイスの部分を表す 〜【特徴】に 再利用ができるとありましたよね。ということは…….. 19
  21. 21. 2. Fragmentsの使い方........ Activity こうなるはずですよ Fragment A ね! レイアウト ロジック Fragment B レイアウト ロジック 20
  22. 22. 2. Fragmentsの使い方…......- マルチペインの実現だけでなく再利用できる点が大きなメ リット- 再利用するためロジックはFragment内に実装- マルチペインでなくてもFragmentを使って実装しておけば再 利用できて便利- Activityの役割はFragmentの管理、Fragment間のデータのや りとりなど- 通常Activityの数が減らせるのでManifestの記述も激減- サブクラスとして、DialogFragment / ListFragment / PreferenceFragment / WebViewFragment がある 21
  23. 23. 3. Fragmentsを使ってみる.1. 新規プロジェクトを作成する- Project name : Fragment (任意)- Build Target : Android 4.0 or 4.0.3- Application Name : Fragment (任意)- Package Name : com.example.fragment (任意)- Create Activity : MainActivity (任意) 22
  24. 24. 3. Fragmentsを使ってみる..2. layout/main.xml を編集する <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <fragment class="com.example.fragment.ListFragmentSample" android:id="@+id/fragment_list" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" /> <FrameLayout android:id="@+id/fragment_detail" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" /> </LinearLayout> 23
  25. 25. 3. Fragmentsを使ってみる…3. ListFragmentSample.javaを作成する (extends ListFragment) private List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); Map<String, Object> item1 = new HashMap<String, Object>(); item1.put("ICON", Integer.valueOf(android.R.drawable.ic_menu_delete)); item1.put("LABEL", "ゴミ箱"); list.add(item1); Map<String, Object> item2 = new HashMap<String, Object>(); item2.put("ICON", Integer.valueOf(android.R.drawable.ic_menu_camera)); item2.put("LABEL", "カメラ"); list.add(item2); SimpleAdapter adapter = new SimpleAdapter( getActivity(), list, android.R.layout.activity_list_item, new String[] { "LABEL", "ICON" }, new int[] { android.R.id.text1, android.R.id.icon }); setListAdapter(adapter); 24 }
  26. 26. 3. Fragmentsを使ってみる….4. layout/detail.xml を作成する <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#666666" > <TextView android:id="@+id/textDetail" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip" android:layout_margin="4dip" /> </LinearLayout> 25
  27. 27. 3. Fragmentsを使ってみる…..5. DetailFragment.javaを作成する (extends Fragment) @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.detail, container, false); if(v == null) return null; return v; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); View v = getView(); TextView textDetail = (TextView) v.findViewById(R.id.textDetail); Bundle arg = getArguments(); if(arg != null) { String detail_text = arg.getString("detail_text"); textDetail.setText(detail_text); } } ここで一度実行してみてください 26
  28. 28. 3. Fragmentsを使ってみる……6. ListFragmentSample.java に戻って追加 @Override public void onListItemClick(ListView l, View v, int position, long id) { super.onListItemClick(l, v, position, id); Map<String, Object> item = list.get(position); Bundle bundle = new Bundle(); bundle.putString("detail_text", (String)item.get("LABEL")); // フラグメント作成 DetailFragment newFragment = new DetailFragment(); newFragment.setArguments(bundle); // フラグメント表示 FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.replace(R.id.fragment_detail, newFragment); transaction.addToBackStack(null); transaction.commit(); } パラメータはsetArgumentsで渡します。 間違ってもsetterとか作らない様に。 27
  29. 29. 3. Fragmentsを使ってみる…….7. さらに layout-land/main.xml を作成する <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width="fill_parent” android:layout_height="fill_parent" android:orientation="horizontal" > <fragment class="com.example.fragment.ListFragmentSample" android:id="@+id/fragment_list" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" /> <FrameLayout android:id="@+id/fragment_detail" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout> これでひとまず完成です。 Activity は一切触りませんでしたよね! 28
  30. 30. 3. Fragmentsを使ってみる……..8. Android1.6で動く様にしてみる- API Level を 4に変更する- import のエラー行を削除する- ANDROID_SDK/extras/android/support/v4/android-support-v4.jar → libs フォルダへコピー- match_parent を fill_parent に変更(Level8から fill_..は非推奨)- import を追加する- MainActivity のスーパークラスを FragmentActivityに変更- <uses-sdk android:minSdkVersion="4" /> に変更 29
  31. 31. 以 上 30

×