Androidタブレットアプリケーション開発入門
•
9 j'aime•15,887 vues
OESF公認 Androidタブレットアプリケーション開発入門 公式トレーニングテキスト Contributed by: 【作成】株式会社リーディング・エッジ社 【ご注意】 本テキストは、Creative Commons License BY-NC-SA 4.0のもとで提供されます。OESF会員またはコンソーシアムメンバーでない場合、本編の改変の有無にかかわらず、いかなる形態でも商用目的での利用は禁止されています。
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Androidタブレットアプリケーション開発入門
Similaire à Androidタブレットアプリケーション開発入門 (20)
Dernier
Dernier (11)
Androidタブレットアプリケーション開発入門
- 2. トレーニングの目的 トレーニングの目的 Androidのバージョン情報 ユーザ視点でのAndroidのバージョンごとに追加された機能について Androidタブレット開発新機能 開発者視点での新機能について チュートリアル タブレットアプリケーションの作成 実習を通して以下の機能を実装しタブレットアプリケーション開発の実装方 法を習得する • Action Bar, System Bar • Fragment • Notification • Configuration対応 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 2
- 3. 受講するにあたって必要なスキル トレーニングを受講するにあたり、以下のスキルが必須となる Java 言語の経験があること 演習では、実際に Java でプログラミングを行う 基本的な Java の言語仕様について理解していれば問題ない Eclipse を使用した経験があること 演習では、Eclipse を使用してプログラミングを実施する 基本的な Eclipse の使用方法について理解していれば問題ない OESF公認Androidアプリケーション開発入門コースを受講済または同等 のスキルを有する Androidアプリケーションの基礎的なスキルを有する 複数画面からなる簡単なアプリケーション作成ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. 3
- 4. トレーニングスケジュール 1日目 章 内容 第1章 トレーニング概要 開発環境、アプリケーション概要 第2章 Androidのバージョン情報 過去の経緯とAndroidのバージョン情報 2.x系、3.x系、4.x系 第3章 Androidタブレット開発新機能 開発者視点での新機能 ユーザインタフェースの改善 UI プログラミング ベストプラクティス 第4章 タブレットアプリケーションの 作成 1 - Action Bar - Action Barの作成 Action Barのカスタマイズ Action BarにTabを表示する Options Menu対応 ※初日は、時間があまったら2日目の第5章まで実施します This material is licensed under the Creative Commons License BY-NC-SA 4.0. 4
- 5. トレーニングスケジュール 2日目 章 内容 第5章 タブレットアプリケーションの 作成 2 – Fragment - Fragmentの使い方 System Bar, Action Barの表示制御 ActionMode対応 第6章 タブレットアプリケーションの 作成 3 – ListFragment - ListFragmentの使い方 ListFragmentをカスタマイズする 第7章 タブレットアプリケーションの 作成 4 - Fragmentと連携する - FragmentとFragmentの連携 FragmentとActivityの連携 第8章 タブレットアプリケーションの 作成 5 - その他の新機能 - Fragmentの表示・非表示 DialogFragment Notification ※「第8章 タブレットアプリケーションの作成 Configuration対応 5のテーマの動的切り替え」はタブレット新機能 テーマの動的切り替え（省略します） を使わないため本トレーニングでは省略します This material is licensed under the Creative Commons License BY-NC-SA 4.0. 5
- 6. 概要 開発環境 開発ツールはC:android_training_tabletadt-bundle-windows-x86に格納 されているものを使用する 演習で用いるアプリケーション SimpleHoneycombGallery 演習概要 演習の進め方 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 6
- 7. 開発環境 本トレーニングでは下記の開発環境で行う ソフトウェア バージョン 統合開発環境 Eclipse IDE with built-in ADT Java SDK JDK 1.6.X Android SDK Android 4.2.2(API 17) Android Plug-in Android Development Tools (ADT) Ver.21.1.0 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 7
- 8. 演習概要 ディレクトリ構成 トレーニングに必要なファイルは全てandroid_traing_tabletに用意してありま す。 以下はandroid_traing_tabletのディレクトリ構成になります パス（c:¥android_trainig_tablet以下） 内容 adt-bundle-windows-x86¥sdk AndroidSDK adt-bundle-windows-x86¥eclipse devtools¥eclipse¥workspace eclipse ¥workspace eclipseワークスペース training_data/answer_docs/html, text 実習の解答ドキュメント This material is licensed under the Creative Commons License BY-NC-SA 4.0. 8
- 10. 概要 過去の経緯とAndroidのバージョン情報 1.x系、2.x系の特徴 主に携帯電話向けとしてリリース 3.x系の特徴 正式にタブレット対応 ソース非公開 4.x系の特徴 2.x系と3.x系の統合 ソース公開（同時に3.x系のソースコードも公開） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 10
- 11. Androidのバージョン 2.x系（１） 2.x系 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 11
- 12. Androidのバージョン 2.x系（２） 2.x系の新機能 Version コードネーム APIレベル リリース 新機能 2.0/2.1 Eclair 5, 6, 7 2009/10/26 (2.0) 2009/12/3 (2.0.1) 2010/1/12 (2.1) • マルチタッチ • LiveWallPaper • Bluetooth 2.2 Froyo 8 2010/5/21 • Dalvik VM にJITコンパイラを搭 載(2〜5倍高速化) • クラウドとデバイスの連携API (C2DM) • テザリング対応 • Adobe Flash対応 • インストール済アプリの自動更 新 2.3 Gingerbread 9, 10 2010/12/6 • • • • ゲームのための改良 並列GC（目標3ms以下の停止） NFC（近距離無線通信）対応 複数のカメラを扱えるAPIの追 加 • SIPの標準サポート • バッテリー管理機能の向上 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 12
- 13. Androidのバージョン 2.x系（３） 2.1 2.1 LiveWallPaper This material is licensed under the Creative Commons License BY-NC-SA 4.0. 13
- 14. Androidのバージョン 2.x系（４） 2.1 Device A 2.2 Bluetooth Device B Cloud to Device Message This material is licensed under the Creative Commons License BY-NC-SA 4.0. 14
- 15. Androidのバージョン 2.x系（５） 2.2 2.3 Apps on SD Card Audio Equalizer This material is licensed under the Creative Commons License BY-NC-SA 4.0. 15
- 16. Androidのバージョン 2.x系（６） 2.3 NFC This material is licensed under the Creative Commons License BY-NC-SA 4.0. 16
- 17. ハンドセット (1.x 2.x) This material is licensed under the Creative Commons License BY-NC-SA 4.0. 17
- 18. タブレット (1.x 2.x) This material is licensed under the Creative Commons rights reserved. Copyright © 2010, Open Embedded Software Foundation, All License BY-NC-SA 4.0. 18
- 19. Bookリーダー (1.x 2.x) Alex Nook This material is licensed under the Creative Commons License BY-NC-SA 4.0. Kindle Fire 19
- 20. ノートPC (1.x 2.x) dynabook AZ Compaq Airlife 100 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 20
- 21. Androidのバージョン 3.x系（１） 3.x系 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 21
- 22. Androidのバージョン 3.x系（２） 3.xの新機能 Version コードネー ム APIレベ ル リリース 新機能 3.0 Honeycomb 11 2011/2/22 • 大型ディスプレイに最適化 • タブレット専用となった • マルチコアプロセッサのサポート 3.1 Honeycomb 12 2011/5/10 • • • • 3.2 Honeycomb 13 2011/7/15 • 広範囲なタブレット向けの最適化 • SDカードに対してのメディア同期 • スクリーンサポートの拡張 ユーザーインターフェースの改善 オープンアクセサリAPI USBホストAPI マウス、ゲームパッド、ジョイス ティックからの入力 • ホームスクリーンウィジェットのサ イズ変更 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 22
- 23. Android 3.x for Users タブレット向けに一からデザインされた新たなUI カスタマイズ可能なホーム画面 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 23
- 24. Android 3.x for Users Quick Controls menu in the Browser より快適な操作が可能になる Home screen widgets can now be resized カスタマイズをより柔軟に行える This material is licensed under the Creative Commons License BY-NC-SA 4.0. 24
- 25. Androidのバージョン 4.x系（１） 4.x系 "Simple, beautiful, beyond smart" シンプルに、美しく、よりスマートに This material is licensed under the Creative Commons License BY-NC-SA 4.0. 25
- 26. Androidのバージョン 4.x系（２） 4.xの新機能 Version コードネー ム APIレベル リリース 新機能 4.0 Ice Cream Sandwich 14, 15 2011/10/08 • • • • • • • • 4.1 Jelly Bean 16 2012/06/27 • • • • • 4.2 Jelly Bean 17 ハンドセットとタブレットのUIの統合 Android Beam WiFi Direct Notificationの向上 ロック画面で、カメラと音楽の操作 ランチャーのアプリ管理の改善 画像や動画のエフェクト 正確なカメラの測光、顔認識 アクセシビリティの拡張 Unicode 6.0 の絵文字対応 Notificationの拡張 リサイズ可能なアプリウィジェット ライトアウト・フルスクリーンモード への遷移API • Remoteable View の追加 • デバイスの追加と除去の検知 • マルチアカウント • クイック設定 • フォトギャラリーのアップデート。 360度撮影。 This material is licensed under•the Creative ジェスチャ文字入力 26 Commons License BY-NC-SA 4.0. • Miracast ワイヤレスディスプレイ 2012/11/13
- 27. Androidのバージョン 4.x系（３） 新機能 Robotoフォント 高解像度画面用に最適化した新しいフォント Android Beam NFCを使った共有機能。音楽、ビデオ、連絡先、ウェブページ、アプリなど ほぼあらゆるものを転送可能 顔認識アンロック 「最先端の顔認識技術」により、端末を顔に向けて持つだけでアンロック WiFiダイレクト 近くのAndroid搭載端末のWi-Fiを発見して、Wi-Fi経由で直接接続可 アクセスポイントなしで無線LANのP2P通信が可能 スクリーンキャプチャ ユーザーによってフォントを自由に変更可能 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 27
- 28. Androidのバージョン 4.x系（４） UIの統合 ICSではユーザーインタフェースが統一され、すべてのAndroid端末が共 通インタフェースを備える This material is licensed under the Creative Commons License BY-NC-SA 4.0. 28
- 29. Androidのバージョン 4.x系（５） 顔認識によるロック画面の解除 撮影中の動画にエフェクトをかけることが 可能 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 29
- 30. Android 4.0 for Users Google+のハングアウトと連携することが 可能 パノラマカメラの標準 搭載 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 30
- 31. Android 4.0 for Users 通信データの使用量の確認と上限設定を アプリ毎に設定可能 NFCによるデータ通信をサポートします。 URLを転送したりすることが可能 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 31
- 33. 概要 New Developer Features（開発者向け新機能） Visual Styles（ユーザインタフェースの改善） UI Pattern Best Practice（UI プログラミング ベストプラクティス ） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 33
- 34. New Developer Features（１） 多くの機能は3.xから使用 Honeycomb APIのハンドセット対応 Action Bar System Bar Fragment Loader PopupMenu Drag and Drop Copy and Paste USB Host and Accessory Richer Notifications This material is licensed under the Creative Commons License BY-NC-SA 4.0. 34
- 35. New Developer Features（２） System Bar タブレットでの呼び方 Navigation Bar ハンドセットでの呼び方 タブレットでは時計やバッテリー残 量などが表示されているためナビ ゲーション以外の機能があるので名 前を使い分けている This material is licensed under the Creative Commons License BY-NC-SA 4.0. 35
- 36. New Developer Features（３） Recent Apps Redesigned UI widgets Widgetを重ねたり、グリッド表 示したり、サイズ変更にも対応 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 36
- 37. New Developer Features（４） Rich Notifications UIにボタンを持つことができる ユーザが受信したメッセージを常に呼び出すことができ音楽の再生、ア プリケーションからのリアルタイムのアップデートを確認できる This material is licensed under the Creative Commons License BY-NC-SA 4.0. 37
- 38. New Developer Features（５） ActionBar、Fragment、Loader、PopupMenu、Drag and Drop... This material is licensed under the Creative Commons License BY-NC-SA 4.0. 38
- 39. Visual Style ICSよりUIの統合 携帯電話・タブレット、その他のハンドセットを統合するUIフレームワ ークで全てのスクリーンサイズに対応している 覚えるべき２つのリソース Resource Styles Resource Qualifiers This material is licensed under the Creative Commons License BY-NC-SA 4.0. 39
- 40. Resource Styles（１） Widgetの見え方の統一 Buttonはどう見えるか、スペースはどうあるべきか、文字はこうあるべ きだ などのまとまった表現をひとつのテーマとして提供 Holoテーマ Holo Light. Holo Dark. Holo Light with dark action bar. 40 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
- 41. Resource Styles（２） Holoテーマ Honeycombから追加 基本的にカスタマイズを禁止し、端末による見た目の統一 全てのデバイスで見栄えが整う android:theme="@android:style/Theme.Holo.Light" android:theme="@android:style/Theme.Holo" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 41
- 42. Resource Styles（３） DeviceDefault 端末固有のテーマとしてICSから登場 OEMメーカのカスタマイズテーマ android:theme="@android:style/Theme.DeviceDefault" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 42
- 43. Resource Qualifiers 従来のqualifiers xlarge (960dp x 720dp) large (640dp x 480dp) normal (470dp x 320dp) small (426dp x 320dp) ※これだけだと携帯電話とタブレットを切り分けられないというケースもでてきた 新qualifiers Smallest Width Available width/height This material is licensed under the Creative Commons License BY-NC-SA 4.0. 43
- 44. Smallest Width（１） Smallest Width 小さい方の下限値をdpで指定する 例） /layout-sw720dp-land/ 1280dp 小さい方の幅 720dp This material is licensed under the Creative Commons License BY-NC-SA 4.0. 44
- 45. Smallest Width（２） 1280dp 10インチ (720 × 1280) /layout-sw720dp-land/ 720dp 7インチ (600 × 1024) /layout-sw600dp-land/ 1024dp 600dp This material is licensed under the Creative Commons License BY-NC-SA 4.0. 45
- 46. Smallest Width（３） 特殊な端末 横：10インチ 縦：7インチ の複合スクリーンサイズ 600dp 1280dp This material is licensed under the Creative Commons License BY-NC-SA 4.0. 46
- 47. Avilable Width/Height Available width/height 表示可能な下限値をdpで指定する レイアウトが使用可能な正確な幅、高さが必要なときに有効 sw<N>dpと併用可 例） /layout-sw600dp-w1280dp-land/ 1280dp 600dp This material is licensed under the Creative Commons License BY-NC-SA 4.0. 47
- 48. UI Patterns Best Practices UI Pattern Honeycomb以降に追加されたUI機能の実装におけるベストプラクティス Action Bar Multi-Pane Layouts This material is licensed under the Creative Commons License BY-NC-SA 4.0. 48
- 49. Action Bar : Parts（１） Action Bar ICSからは小さい画面でも快適に使えるように改良 3つの要素で構成 App Icon View Details Action Items Action Mode This material is licensed under the Creative Commons License BY-NC-SA 4.0. 49
- 50. Action Bar : Parts（２） App Icon アプリケーションのアイコンを表示する領域 アプリケーションのホームアクティビティに遷移するように実装する アプリが階層構造の場合は上に行くように実装することも可 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 50
- 51. Action Bar : Parts（３） View Details シンプルなテキストを置く タブやDropDownメニュー、検索ボックス等を配置する Navigation機能 View Detailsを使ってアプリのどの階層にいるのかを表現する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 51
- 52. Action Bar : Parts（４） Action Items 従来のメニューと同等の機能として実装する どの機能を持っているのかをボタンの形などで表現可能 2.x まではオプションメニューとして、3.x からはハードキーの代わりに 使用する 新プロパティの追加 android:showAsAction="ifRoom" ※詳細は後述 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 52
- 53. Action Bar : New Functions Action Bar 3つの新機能 Stacked Action Bar Split Action Bar Action Provider This material is licensed under the Creative Commons License BY-NC-SA 4.0. 53
- 54. Action Bar : Design（１） Stacked Action Bar タブを表示するスペースが無いときは2段目に移動 デフォルトの挙動 プログラムの改修は不要 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 54
- 55. Action Bar : Design（２） Split Action Bar 場所がない場合は画面の下部にでてくる android:uiOptions="splitActionBarWhenNarrow" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 55
- 56. Action Bar : Menu（１） Action Provider MenuItemの処理を共通化する onOptionsItemSelectedを実装する必要がない 1ファイル当たりのステップ数が短くなる Action Provider ActivityA ActivityB This material is licensed under the Creative Commons License BY-NC-SA 4.0. 56
- 57. Action Bar : Menu（２） Action Provider 実装方法 ActionProviderのサブクラスを作成する メニューの表示は以下の２つの方法がある • menuリソースにandroid:actionProviderClassプロパティを追加 • onCreateOptionsMenuメソッドのオーバライド This material is licensed under the Creative Commons License BY-NC-SA 4.0. 57
- 58. public class MyActionProvider extends ActionProvider { Context context; public MyActionProvider(Context context) { super(context); this.context = context; } @Override public View onCreateActionView() { return null; } @Override public boolean onPerformDefaultAction() { Toast.makeText(context, "onPerformDefaultAction", Toast.LENGTH_SHORT).show(); return super.onPerformDefaultAction(); } } <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/myprovider" android:actionProviderClass="com.example.actionprov.MyActionProvider" android:showAsAction="ifRoom" android:title="Prov"> </item> </menu> This material is licensed under the Creative Commons License BY-NC-SA 4.0.
- 59. Action Bar : Menu（３） Action Provider 長所 処理の共通化により管理がしやすい Activityにロジックを記述する必要がない 短所 ICS以降のため、下位互換できない Activityで定義しているメソッド、変数にアクセス出来ない MenuItem単位でActionProviderクラスが必要になるためファイルの総数は増 加する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 59
- 60. Action Bar : ActionMode ActionMode item選択時はActionModeになることができる。 テキスト選択やコピー、ドラッグアンドドロップなどに用いる This material is licensed under the Creative Commons License BY-NC-SA 4.0. 60
- 61. UI Patterns : Multi-Pane Layout Maluti-Pane Layout 画面の狭い端末では複数画面に分けて表示し、画面の広い端末では画面 を分割して表示する Fragmentを使用して画面サイズに応じてマルチペインとシングルペイン を切り替えが可能 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 61
- 62. Fragment（１） Fragment Multi-Paneを実現させるために導入された仕組み 独自のライフサイクルを持っている Activityに書いていたコードロジックをFragmentに移動する ActivityはFragmentだけをもつコンテナになる 画面サイズの違うものにはFragmentを再利用することでロジックレベルの対 応をしなくてよい 向き対応も可 レイアウトが変わってもFragmentは変わらないので柔軟な対応ができる レイアウトはディレクトリでResource Qualifiers利用する layout-port layout-land layout-sw600dp This material is licensed under the Creative Commons License BY-NC-SA 4.0. 62
- 63. Fragment（２） 構成の変化 2.x系まで Activity View View View View This material is licensed under the Creative Commons License BY-NC-SA 4.0. 63
- 64. Fragment（３） 構成の変化 3.x系以降 タブレット ハンドセット Activity Fragment Activity Fragment View Fragment View View View View View View View View View View This material is licensed under the Creative Commons License BY-NC-SA 4.0. View 64
- 65. Fragment : LifeCycle Fragmentのライフサイクル 基本的に以下のライフサイクルメソッドは実 装したほうがよい onCreate() フラグメントが作成された時に呼ばれる onCreateView() 描画された直後で呼ばれる Activity#setContentViewの後に呼ばれる onPause() Fragmentがフォーカスを失ったときに呼ば れる This material is licensed under the Creative Commons License BY-NC-SA 4.0. 65
- 66. Fragment : LifeCycle ライフサイクル Activity Fragment 呼び出しのタイミング Created onAttach アクティビティと関連付けされたとき onCreate フラグメントが作成されたとき onCreateView フラグメントに関連付けされるビュー階層を作成 するとき onActivityCreated Activity#onCreaateが完了したとき Started onStart フラグメントが表示される直前 Resumed onResume フラグメントが利用可能になる直前 Paused onPause フラグメントがビジブルになる直前 Stopped onStop フラグメントが非表示になる直前 Destroyed onDestroyView フラグメントに関連付けされたビュー階層が破棄 されるとき onDestroy フラグメントを最終的にクリーンアップするとき onDetach Activityとの関連付けが解除されたとき This material is licensed under the Creative Commons License BY-NC-SA 4.0. 66
- 67. Multi-Pane Layout : Implementation（１） Fragmentの使い方 1. Fragment用のレイアウトファイルの作成 2. Fragmentのサブクラスの作成 3. onCreateViewをオーバライドし、レイアウトファイルから ※ContentViewを作成 4. 作成したFragmentをActivityに追加 方法 1：Activityのレイアウトファイルに追加する • 決まったFragmentをActivityに使うときに用いる – Activity起動のタイミングで表示するときなど 方法 2：動的にFragmentを追加する • Single-Paneのデザインを使用するときや表示するFragmentを動的に変 更するときに用いる – ボタンクリックなどで新しくFragmentを表示するときなど ※ContentView：本トレーニングではActivityやFragmentに使用されるルート要素に なるViewのことをContentViewと呼称するunder the Creative This material is licensed Commons License BY-NC-SA 4.0. 67
- 68. Multi-Pane Layout : Implementation（２） 1. Fragment用のレイアウトファイルの作成 2.x系のActivityのレイアウトファイルの作成方法と同じ 2. Fragmentのサブクラスの作成 3. onCreateViewをオーバライドし、レイアウトファイルからContentView を作成 LayoutInflaterを使ってContentViewを構築する • 1で作成したレイアウトファイルから構築する 必要に応じてレイアウトファイルに定義されているTextViewやButtonなどを 取得する public class SecondFragment extends Fragment { private static final String TAG = "SecondFragment"; private TextView textView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_second, null); textView = (TextView) v.findViewById(R.id.textView1); textView.setText(TAG); return v; } } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 68
- 69. Multi-Pane Layout : Implementation（３） 4. 作成したFragmentをActivityに追加する方法 方法 1：Activityのレイアウトファイルに追加する • レイアウトファイルに<fragment>タグ追加する • <fragment>のname属性にクラス名を指定する • ソースコードを修正する必要はない <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:id="@+id/fragment1" android:name="com.example.multipanesample.SecondFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout> This material is licensed under the Creative Commons License BY-NC-SA 4.0. 69
- 70. Multi-Pane Layout : Implementation（４） 4. 作成したFragmentをActivityに追加する方法 方法 2：動的にFragmentを追加する • 動的Fragmentの追加方法は更に以下の2つの方法がある – レイアウトファイルにFrameLayoutなどのフラグメントのコンテナを定義す る – ActivityのルートViewとして定義されているandroid.R.id.contentに追加する • どちらの方法でもソースを修正する必要がある This material is licensed under the Creative Commons License BY-NC-SA 4.0. 70
- 71. Multi-Pane Layout : Implementation（５） 4. 作成したFragmentをActivityに追加する方法：動的フラグメントの追加 方法 2-1：レイアウトファイルにFrameLayoutなどのフラグメントのコンテ ナを定義する • レイアウトファイルにフラグメントのコンテナを定義する • ソースファイルを修正する – 定義したコンテナを取得し、追加処理を実装する レイアウトファイル <FrameLayout android:id="@+id/second_fragment_container" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > </FrameLayout> ソース FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); SecondFragment fragment = new SecondFragment(); transaction.add(R.id.second_fragment_container, fragment); transaction.commit(); ※プログラムの詳細については後述 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 71
- 72. Multi-Pane Layout : Implementation（６） 4. 作成したFragmentをActivityに追加する方法：動的フラグメントの追加 方法 2-2：プログラムからandroid.R.id.contentに追加する • ActivityにはあらかじめルートViewとなるFrameLayoutが定義されている – id : android.R.id.content • android.R.id.contentをフラグメントのコンテナとして使用する • ソースファイルを修正する – android.R.id.contentにFragmentを追加する • androidR.id.contentに直接Fragmentを追加するため、レイアウトファイ ルは不要 ソース FragmentManager manager = getFragmentManager(); FragmentTransaction ft = manager.beginTransaction(); SecoundFragment secoundFragment = new SecoundFragment(); ft.add(android.R.id.content, secoundFragment); ft.commit(); ※プログラムの詳細については後述 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 72
- 73. Multi-Pane Layout : Implementation（７） 4. 作成したFragmentをActivityに追加する方法：動的フラグメントの追加 動的フラグメントの追加はボタンクリックなどのタイミングで表示する場合が 多い そのため、ソースに追加処理を記述する必要がある 追加処理にはFragmentManagerとFragmentTransactionを使用する 手順 1. 2. 3. 4. 5. Fragmentを操作するためのFragmentManagerを取得する FragmentManagerからFragmentTransactionを取得する Fragmentのインスタンスを作成する FragmentTransactionを使ってActivityにFragmentを追加する トランザクションをコミットする FragmentManager manager = getFragmentManager(); ・・・① FragmentTransaction ft = manager.beginTransaction(); ・・・② SecoundFragment secoundFragment = new SecoundFragment(); ・・・③ ft.add(android.R.id.content, secoundFragment); ・・・④ ft.commit(); ・・・⑤ This material is licensed under the Creative Commons License BY-NC-SA 4.0. 73
- 74. Multi-Pane Layout : Implementation（８） FragmentManager Fragmentを操作するためにはFragmentManagerを使用する Activity#getFragmentManagerメソッドで取得する 戻り値 メソッド 説明 Fragment findFragmentById(int id) idを指定してFragmentを取得する。 idはプログラムまたはxmlファイルで 設定することができる Fragment findFragmentByTag(String tag) tagを指定してFragmentを取得する。 tagはプログラムまたはxmlファイル で設定することができる FragmentTransactio n beginTransaction() Activityのトランザクションを開始す る This material is licensed under the Creative Commons License BY-NC-SA 4.0. 74
- 75. Multi-Pane Layout : Implementation（ ９） FragmentTransaction FragmentManager#beginTransactionメソッドで取得する ActivitiyにFragmentを追加、除去、交換、表示、非表示などの操作を行 うことができる commitメソッドを使って操作を完了する beginTransactionからcommitの間にFragmentの追加、除去、交換などの 一連の処理が１つのトランザクションとして実行される Fragmentの操作するための一連の処理 トランザクション begin hid e remov e ad d etc... This material is licensed under the Creative Commons License BY-NC-SA 4.0. comm it 75
- 76. Multi-Pane Layout : Implementation（10） FragmentTransactionの主なメソッド メソッド 説明 add(int containerViewId ,Fragment fragment, String tag) Fragmentを追加する remove(Fragment fragment) Fragment を削除 replace(Fragment fragment, String tag) container にすでに追加されている Fragment を置き換える show(Fragment fragment) hidden 状態になっている Fragment （の View）を表示する hide(Fragment fragment) 存在している Fragment を隠す （hidden 状態にする） 引数 int : FragmentのコンテナID（省略可） Fragment ：追加するFramgnet String ：Fragment設定するTag 使わない場合はnullを指定（省略可） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 76
- 77. Multi-Pane Layout Sample（１） 2画面アプリケーションのサンプル ハンドセット：2画面 タブレット：Multi-Pane 77 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
- 78. Multi-Pane Layout Sample（２） 手順 ファイルの新規作成 レイアウトファイル • ハンドセット用、タブレット用のレイアウトをフォルダ別で用意 • res/layout • res/layout-sw600dp ソースファイル • Fragmentのサブクラス • 遷移先Activityクラス（ハンドセット用） 遷移ロジックの実装 ソースファイルでハンドセット、タブレットのロジックの切り分け This material is licensed under the Creative Commons License BY-NC-SA 4.0. 78
- 79. Multi-Pane Layout Sample（３） 1. ファイルの新規作成 layoutファイル : 4 files layout/activity_main.xml layout-sw600dp/activity_main.xml layout/fragment_first.xml layout/fragment_second.xml Fragment : 2 files FirstFragment.java SecondFragment.java Activity : 2 files MainActvitiy.java NextActivity.java (ハンドセット遷移先画面） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 79
- 80. レイアウトファイル layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"> <fragment android:id="@+id/fragment1" android:name="com.example.multipanesample.FirstFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout> layout-sw600dp/Activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"> <fragment android:id="@+id/fragment1" android:name="com.example.multipanesample.FirstFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <FrameLayout android:id="@+id/second_fragment_container" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > </FrameLayout> </LinearLayout> This material is licensed under the Creative Commons License BY-NC-SA 4.0.
- 81. Multi-Pane Layout Sample（４） 2. 遷移ロジック プログラム側でタブレット、ハンドセットの処理を分ける タブレット Fragmentを追加 ハンドセット Activityを起動 Fragmentを追加 View container = getActivity().findViewById(R.id.second_fragment_container); if (container != null) { // タブレットの場合 } else { // ハンドセットの場合 } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 81
- 82. ソースファイル FirstFragment.java View container = getActivity().findViewById(R.id.second_fragment_container); if (container != null) { // タブレットの場合 FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); SecondFragment fragment = new SecondFragment(); transaction.add(R.id.second_fragment_container, fragment); transaction.commit(); } else { // ハンドセットの場合 Intent intent = new Intent(getActivity(), NextActivity.class); getActivity().startActivity(intent); } NextActivity.java public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); SecoundFragment secoundFragment = new SecoundFragment(); FragmentManager manager = getFragmentManager(); FragmentTransaction ft = manager.beginTransaction(); ft.add(android.R.id.content, secoundFragment); ft.commit(); } This material is licensed under the Creative Commons License BY-NC-SA 4.0.
- 83. Multi-Pane Layout実習（１） 実習 Multi-Paneアプリケーションの作成 番号をクリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 83
- 84. Multi-Pane Layout実習（２） アプリケーション概要 ＜プロジェクト設定＞ 項目 設定値 Project name MultiPaneSample Build Target ※トレーニングで指定したバージョン Application name MultiPaneSample Package name com.example.multipanesample Create Activity MainActivity This material is licensed under the Creative Commons License BY-NC-SA 4.0. 84
- 85. Multi-Pane Layout実習（３） 手順 1. Fragmentの準備 FirstFragmentの作成 SecondFragmentの作成 2. レイアウトリソースの準備 /res/layout/fragment_first.xml /res/layout/fragment_second.xml /res/layout-sw600dp/activity_main.xml 3. Fragmentの処理の実装 FirstFragmentの修正 SecondFragment.javaの修正 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 85
- 86. Multi-Pane Layout実習（４） 1. Fragmentの準備 FirstFragmentの作成 SecondFragmentの作成 ※まだ処理は実装しない package com.example.multipanesample; import android.app.Fragment; public class FirstFragment extends Fragment { } package com.example.multipanesample; import android.app.Fragment; public class SecondFragment extends Fragment { } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 86
- 87. Multi-Pane Layout実習（５） 2. レイアウトリソースの準備 /res/layout/fragment_first.xml View Property 階層構造 LinearLayout <LinearLayout> <TextView /> <TextView /> </LinearLayout> android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff0000" android:gravity="center" android:orientation="vertical” TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="FirstFragment" android:textAppearance="?android:attr/textAppearanceLarge” TextView android:id="@+id/text_no" android:layout_width="match_parent" android:gravity="center" android:layout_height="wrap_content" style="@android:drawable/list_selector_background" android:text="1" android:clickable="true" android:textSize="200dp" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 87
- 88. Multi-Pane Layout実習（６） 2. レイアウトリソースの準備 /res/layout/fragment_second.xml View Property 階層構造 LinearLayout <LinearLayout> <TextView /> <TextView /> </LinearLayout> android:layout_width="match_parent" android:gravity="center" android:background="#00ff00" android:layout_height="match_parent" android:orientation="vertical" TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SecoundFragment" android:textAppearance="?android:attr/textAppearanceLarge” TextView android:id="@+id/text_no" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" android:textSize="200dp" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 88
- 89. Multi-Pane Layout実習（７） 2. レイアウトリソースの準備 /res/layout-sw600dp/activity_main.xml View 階層構造 <LinearLayout> <fragment /> <FrameLayout /> </LinearLayout> Property LinearLayout android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" fragment android:id="@+id/fragment1" android:name="com.example.multipanesample.FirstFragme nt" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" FrameLayout android:id="@+id/second_fragment_container" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 89
- 90. Multi-Pane Layout実習（８） 2. Fragmentの処理の実装 FirstFragmentの修正 • onCreateViewメソッドをオーバライドする • レイアウトファイルとしてfragment_first.xmlを指定する public class FirstFragment extends Fragment { private static final String TAG = "FirstFragment"; TextView textView; TextView textNo; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_first, null); textView = (TextView) v.findViewById(R.id.textView1); textView.setText(TAG); ・ ・ ・ This material is licensed under the Creative Commons License BY-NC-SA 4.0. 90
- 91. Multi-Pane Layout実習（９） 3. Fragmentの作成 FirstFragmentの修正（続き） • 遷移ロジックの実装 • No表示用のTextViewにonClickイベントを追加する • onClickイベントにSecondFragmentの起動処理を追加する FirstFragment.java public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 〜略〜 textNo = (TextView) v.findViewById(R.id.text_no); textNo.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); SecondFragment fragment = new SecondFragment(); transaction.add(R.id.second_fragment_container, fragment); transaction.commit(); } ・・ ・2 }); return v; } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 91
- 92. Multi-Pane Layout実習（10） 3. Fragmentの作成 SecondFragmentの修正 • onCreateViewメソッドをオーバライドする • レイアウトファイルとしてfragment_second.xmlを指定する public class SecondFragment extends Fragment { private static final String TAG = "SecondFragment"; private TextView textView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Log.v(TAG, new Throwable().getStackTrace()[0].getMethodName()); View v = inflater.inflate(R.layout.fragment_second, container, false); textView = (TextView) v.findViewById(R.id.textView1); textView.setText(TAG); return v; } } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 92
- 93. Multi-Pane Layout実習（確認） 確認 以下のように動作することを確認する 番号をクリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 93
- 94. Multi-Pane Layout実習（解答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 94
- 95. Multi-Pane Layout実習[補足] 実習 [補足 1] ハンドセット対応にする ハンドセット：2画面 タブレット：Multi-Pane This material is licensed under the Creative Commons License BY-NC-SA 4.0. 95
- 96. Multi-Pane Layout実習[補足]（解 答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 96
- 98. アプリケーション概要 SimpleHoneycombGallery AndroidSDKに標準で付属しているサンプルアプリケーションをトレーニ ング用に修正した物を作成する 元々のアプリケーション名 • HoneycombGallery 修正内容 • 一部の機能については未実装 – カメラ機能など、いくつかのメニュー選択処理 • 高度な技術を使っている箇所を簡易実装に置き換え 機能 アプリケーション内に保存されている画像を閲覧する SDカードなどの外部メモリに保存されている画像は参照できない This material is licensed under the Creative Commons License BY-NC-SA 4.0. 98
- 99. ステップアップ手順（１） 5つのStepでアプリケーションを完成させる Step 1 Action Bar Action Barの作成 Action Barのカスタマイズ Action Itemsの作成 Step 4 Fragmentの連携 FragmentとFragmentの連携 FragmentとActivityの連携 Step 5 その他の機能拡張 Step 2 Fragment ContentFragmentの追加 System Bar, Action Barの表示 制御 ActionMode対応 Step 3 ListFragment ListFragmentを使ってタイト ル一覧を表示する ListFragmentをカスタマイズ する Fragmentの表示・非表示 DialogFragment Notification Configuration対応 テーマの動的切り替え ※テーマの動的切り替えはタブレット新機 能を使わないため本トレーニングでは省略 する 各自持ち帰り課題とし資料を参考に仕上げ ること This material is licensed under the Creative Commons License BY-NC-SA 4.0. 99
- 100. ステップアップ手順（２） 初期状態 Step 1 Action Bar Step 3 ListFragment Step 4 Fragmentの連携 Step 2 Fragment Step 5 その他の新機能 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 100
- 101. 画面構成 アプリケーションの構成 Action Bar ContentFragment Action Items TitlesFragment System Bar This material is licensed under the Creative Commons License BY-NC-SA 4.0. 101
- 102. プロジェクト概要 プロジェクト概要 スケルトプロジェクトのインポート SimpleHoneycombGallery_skeleton01 項目 設定値 Project name SimpleHoneycombGallery Build Target 15 Application name SimpleHoneycombGallery Package name com.example.android.shcgallery Create Activity MainActivity Min SDK Version 13 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 102
- 103. スケルトプロジェクト（初期状態） スケルトンプロジェクトの構成 ソースファイル タブ、タイトル、画像のデータクラスが用意されている • Directory.java – タブに表示するデータクラス • DirectoryCategory.java – タイトルに表示するデータクラス • DirectoryEntry.java – 画像データクラス DirectoryはDirectoryCategoryの配列を持ち、DirectoryCategory.javaは DirectoryEntryの配列を持っている This material is licensed under the Creative Commons License BY-NC-SA 4.0. 103
- 104. スケルトプロジェクト（初期状態） スケルトンプロジェクトの構成 リソースファイル res/drawable • 画像リソース • セレクターなど解像度に影響がないもの res/drawable-Xdpi • 画像リソース • アイコンなど解像度に合わせて用意 res/drawable-nodpi • ContentFragmentに表示する画像 res/values • いくつかの文字列リソースとカラーリソース This material is licensed under the Creative Commons License BY-NC-SA 4.0. 104
- 105. スケルトプロジェクト（初期状態） スケルトンプロジェクトの実行 SimpleHoneycombGallery_skeleton01_1を実行すると以下のように表示 される This material is licensed under the Creative Commons License BY-NC-SA 4.0. 105
- 106. スケルトプロジェクト詳細（１） 各スケルトプロジェクト実装内容 プロジェクト名 実装済みの処理 SimpleHoneycombGallery_skeleton01_1 初期状態 SimpleHoneycombGallery_skeleton01_2 Step 1-1 Action Barの作成 SimpleHoneycombGallery_skeleton01_3 Step 1-2 Action Barのカスタマイズ SimpleHoneycombGallery_skeleton02_1 Step 1-3 Action Itemsの作成 SimpleHoneycombGallery_skeleton02_2 Step 2-1 ContentFragmentの追加 SimpleHoneycombGallery_skeleton02_3 Step 2-2 System Bar, Action Barの表示制御 SimpleHoneycombGallery_skeleton03_1 Step 2-3 ActionMode対応 SimpleHoneycombGallery_skeleton03_2 Step 3-1 ListFragmentを使ってタイトル一覧を表示 する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 106
- 107. スケルトプロジェクト詳細（２） 各スケルトプロジェクト実装内容 プロジェクト名 実装済みの処理 SimpleHoneycombGallery_skeleton04_1 Step 3-2 ListFragmentのカスタマイズ SimpleHoneycombGallery_skeleton04_2 Step 4-1 FragmentとFragmentの連携 SimpleHoneycombGallery_skeleton05_1 Step 4-2 FragmentとActivityの連携 SimpleHoneycombGallery_skeleton05_2 Step 5-1 Fragmentの表示・非表示 SimpleHoneycombGallery_skeleton05_3 Step 5-2 DialogFragment SimpleHoneycombGallery_skeleton05_4 Step 5-3 Notification SimpleHoneycombGallery_complete Step 5-4 Configuration対応（本トレーニングで 実習対象の完成状態） SimpleHoneycombGallery_complete_day night Step 5-5 テーマの動的切り替え（完全版） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 107
- 109. 概要 概要 Step1ではAction Barのカスタマイズ方法を習得する Step1では更に3つのStepで構成される Step 1-1 • Action Barの作成：App Icon Step 1-2 • Action Barの作成：View Details Step 1-3 • Action Barの作成：Action Items This material is licensed under the Creative Commons License BY-NC-SA 4.0. 109
- 110. Action Barを作成する Action Barとは 画面上端に表示されるアプリケーションのアイコン、ロゴ、タイトルな どを表示する領域 Android 3.0 以上をターゲットとしたすべてのアクティビティに含まれる 2.x以前のタイトルバー相当 以下の３つの領域で構成される App Icon View Details Action Items This material is licensed under the Creative Commons License BY-NC-SA 4.0. 110
- 111. Action Barの構成要素 Action Barの構成 App Icon アプリケーションのタイトルやアイコンを表示する クリックすることが可能 • クリック後はホームアクティビティに戻るようにするのが一般的 View Details アプリケーションのナビゲーションを担当する • タブナビゲーション • ドロップダウンナビゲーション SearchViewなどの検索バーを表示することも可能 Action Items 従来のオプションメニュー相当 App Icon View Details This material is licensed under the Creative Commons License BY-NC-SA 4.0. Action Items 111
- 112. Action Barを表示する Action Barの使い方 Action Barの表示 Honeycombからはデフォルトで追加される。 API Lvを11以上に設定すれば、プログラムの修正やリソースの追加・変更は 不要 AndroidManifest.xml <uses-sdk android:minSdkVersion=”11" /> This material is licensed under the Creative Commons License BY-NC-SA 4.0. 112
- 113. Action Barを操作する Action Barの使い方 Action Barの取得 プログラムからAction Barを操作するにはActivity#getActionBarメソッドを使 う 取得したActionBarオブジェクトからAction Barのデザインを変更することが できる ActionBarを取得する public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ActionBar actionBar = getActionBar(); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 113
- 114. App Icon Action Bar ： App Icon App Icon領域でhomeアイコン、タイトルの表示設定する android:icon=“@drawable/ic_luncher” android:logo=“@drawable/logo” homeアイコン：App Icon領域に表示されるアプリケーションアイコン iconリソースを使用 homeアイコンにロゴを指定 非表示に設定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 114
- 115. App Iconのカスタマイズ（１） Action Barのカスタマイズ：App Icon ActionBar#setDisplayOptionsで引数にAction Barの表示モードを定数で 指定する 各設定値は｜でつなげることができる 設定値 説明 サンプル（ApiDemo>Action Bar>Display Options） 指定なし ロゴとタイトルが表示さ れる DISPLAY_HOME_AS_U P UP矢印”<”が左側に表示 する DISPLAY_SHOW_CUST OM カスタムビューを使用す る DISPLAY_SHOW_HOME homeアイコンを表示す る DISPLAY_SHOW_TITLE タイトルを表示する DISPLAY_USE_LOGO homeアイコンにロゴを This 使用する material is licensed under the Creative Commons License BY-NC-SA 4.0. 115
- 116. App Iconのカスタマイズ（２） Action Barのカスタマイズ：App Icon setDisplayOptionsの設定例 1 homeアイコンの表示 タイトルの表示 UP矢印の表示 ActionBar actionBar = getActionBar(); actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_HOME_AS_UP); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 116
- 117. App Iconのカスタマイズ（３） Action Barのカスタマイズ：App Icon setDisplayOptionsの設定例 2 ロゴの表示 • android:logoにリソースIDを指定する • homeアイコンと合わせて表示することはできない タイトルの表示 UP矢印の表示 画像リソース（ic_home.png, apidemo_androidlogo.png) AndroidManifest.xml <activity android:name=".ActionBarExampleActivity" android:icon="@drawable/ic_home" android:label="@string/app_name" This material is licensed under the Creative android:logo="@drawable/apidemo_androidlogo" > Commons License BY-NC-SA 4.0. 117
- 118. App Iconのカスタマイズ（４） setDisplayOptionsの設定例 2 続き Activityソース ※DisplayOptionを設定しなくてもロゴは優先されるが、UP矢印も表示するため 以下の様になる ActionBar actionBar = getActionBar(); actionBar.setDisplayOptions( ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_HOME ← HOME表示フラグが必要 | ActionBar.DISPLAY_USE_LOGO | ActionBar.DISPLAY_HOME_AS_UP); 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 118
- 119. App Iconのカスタマイズ（５） setDisplayOptionsの設定例 2 (別の方法） デフォルトの設定をそのままでUP矢印のフラグだけONにする 引数２つのActionBar#setDisplayOptions(int options, int mask)を使用する • int options： 設定フラグ • int mask： 変更対象のフラグ Activityソース ActionBar actionBar = getActionBar(); actionBar.setDisplayOptions(ActionBar.DISPLAY_HOME_AS_UP , ActionBar.DISPLAY_HOME_AS_UP); 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 119
- 120. Action Barの作成：App Icon（ １） 実習 1 homeアイコンにロゴを表示する アプリ一覧のアイコンを変更する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 120
- 121. Action Barの作成：App Icon（ ２） 手順 1. AndroidManifest.xmlの修正 アプリアイコンとロゴの設定 2. MainActivityの修正 Action Barの表示設定 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 121
- 122. Action Barの作成：App Icon（ ３） 1. AndroidManifest.xmlの修正 applicationタグの設定を以下のように変更する プロパティ 値 android:icon @drawable/icon android:logo 画像 @drawable/logo <application android:icon="@drawable/icon" android:label="@string/app_name" android:logo="@drawable/logo" > This material is licensed under the Creative Commons License BY-NC-SA 4.0. 122
- 123. Action Barの作成：App Icon（ ４） 2. MainActivityの修正 Action Barの表示設定 • onCreateメソッドにAction BarのIcon設定処理を実装する – homeアイコンにロゴを設定する – タイトルの非表示 • setDisplayOptions引数に以下の値を設定する – DISPLAY_SHOW_HOME – DISPLAY_USE_LOGO public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //Create ActionBar ActionBar bar = getActionBar(); bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME | ActionBar.DISPLAY_USE_LOGO); } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 123
- 124. Action Barの作成：App Icon（ 確認） 確認 homeアイコンにロゴが表示されている タイトルが表示されていない アプリ一覧のアイコンが変更されている This material is licensed under the Creative Commons License BY-NC-SA 4.0. 124
- 125. Action Barの作成：App Icon（ 解答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 125
- 126. View Details Action Barのカスタマイズ： View Details View Detailsではナビゲーションモードを設定する ３つのナビゲーションモードが用意されている スタンダードナビゲーション ドロップダウンナビゲーション タブナビゲーション ドロップダウンナビゲーション タブナビゲーション This material is licensed under the Creative Commons License BY-NC-SA 4.0. 126
- 127. View Detailsの設定 Action Barのカスタマイズ： View Details ActionBar#setNavigationModeメソッドを使用してナビゲーションモード を設定する 引数には各ナビゲーションモードが定数で用意されている 設定値 説明 NAVIGATION_MODE_STANDARD スタンダード NAVIGATION_MODE_LIST ドロップダウンナビゲーショ ン NAVIGATION_MODE_TABS タブナビゲーション 設定例 ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 127
- 128. Action Barの作成：View Details（１ ） 実習 2 Action Barにタブナビゲーションモードの設定をする This material is licensed under the Creative Commons License BY-NC-SA 4.0. 128
- 129. Action Barの作成：View Details （２） 手順 1. MainActivityの修正 1. ActivityにTabListenerを実装する 2. タブナビゲーションモードを設定する 3. Action Barにタブを追加する • Tabオブジェクトを生成 • Tabオブジェクトの表示テキストの設定 • Tabオブジェクトに選択時のイベントリスナをセット This material is licensed under the Creative Commons License BY-NC-SA 4.0. 129
- 130. Action Barの作成：View Details （３） 1. ActivityにTabListenerを実装する MainActivityにTabListenerを実装する ActionBar.TabListenerに定義されているメソッドをオーバーライドする ActionBar.TabListener 戻り 値 メソッド名 説明 void onTabReselected( ActionBar.Tab tab, FragmentTransaction ft) タブが2回目以降に選択されたときに呼ば れる onTabSelected( ActionBar.Tab tab, FragmentTransaction ft) タブが選択されたときに呼ばれる onTabUnselected( ActionBar.Tab tab, FragmentTransaction ft) タブが選択から外れたときに呼ばれる void void 引数 tab – 対象のTab ft - FragmentTransaction 引数 tab – 対象のTab ft - FragmentTransaction 引数 tab – 対象のTab This material is licensed under the Creative ft - FragmentTransaction 130 Commons License BY-NC-SA 4.0.
- 131. Action Barの作成：View Details （４） 1. ActivityにTabListenerを実装する（続き） ActivityにActionBar.TabListenerをimplements 抽象メソッドをオーバーライドする • 各メソッドは全て空実装とする public class MainActivity extends Activity implements ActionBar.TabListener{ 〜略〜 @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 131
- 132. Action Barの作成：View Details （５） 1. タブナビゲーションモードを設定する ActionBar#setNavigationModeメソッドを実行し、引数に ActionBar.NAVIGATION_MODE_TABS を指定する @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); 〜略〜 bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 132
- 133. Action Barの作成：View Details （６） 3. Action Barにタブを追加する Tabオブジェクトを生成する • TabオブジェクトはActionBar#newTabメソッドで生成する Tabオブジェクトの設定 • Tab#setTextメソッドの引数に表示したい文字列を指定する • Tab#setTabListenerメソッドでタブ選択イベントを受け取る 例） bar.addTab(bar.newTab().setText("tab1").setTabListener(this)); ActionBar#addTabメソッドの引数にTabオブジェクトを指定する bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); Directory.initializeDirectory(); for (int i = 0; i < Directory.getmCategoryCount(); i++) { bar.addTab(bar.newTab().setText(Directory.getCategory(i).getName()) .setTabListener(this)); } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 133
- 134. Action Barの作成：View Details（ 確認） 確認 タブナビゲーションモードなっているのを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 134
- 135. Action Barの作成：View Details（解 答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 135
- 136. Action Items Action Items 従来のメニューと同等の機能として実装する どの機能を持っているのかをボタンの形などで表現可能 2系まではオプションメニューとして、3系からはハードキーの代わりに 使用する メニューアイテムをどの様に表示するかは”android:showAsAction”プロ パティで設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 136
- 137. Action Itemsの設定（１） Action Itemsの表示方法 Action Itemsは従来のOptionsMenuと同じ方法で表示することができる 手順 /res/menu以下にmenuリソースファイルを作成する リソースファイルに<item>タグを定義しMenuItemを作成する ソースコードにOptionsMenuの表示と動作を決定するメソッドをオーバライドする • onCreateOptionsMenu • onOptionsItemSelected <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/menu_save" android:icon="@android:drawable/ic_menu_save" android:showAsAction="ifRoom|withText" android:title="save"/> <item android:id="@+id/menu_camera" android:icon="@android:drawable/ic_menu_camera" android:showAsAction="ifRoom|withText" android:title="camera"/> This material is licensed under the Creative <item 〜略〜 Commons License BY-NC-SA 4.0. 137
- 138. Action Itemsの設定（２） android:showAsAction Honeycombからメニューアイテムの表示方法を指定する ”android:showAsAction”プロパティが利用可能になった showAsActionプロパティでアイテムをどの様に表示するかを設定する 値 説明 ifRoom スペースに合わせて自動的に伸び縮みする 表示する場所があればバーに表示し、なければ メニューに入れる withText android:titleで指定したテキストを表示する never アイテムを表示しない always 常にアイテムを表示する collapseActionView android:actionViewLayout属性で定義されている アクションビューを展開する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 138
- 139. Action Barの作成：Action Items（ １） 実習 3 Action BarにAction Itemsを表示する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 139
- 140. Action Barの作成：Action Items（ ２） 手順 1. menuリソースの作成 /res/menu/main_menu.xml 2. MainActivityの修正 Activityに以下のメソッドをオーバライドする • onCreateOptionsMenu • onOptionsItemSelected This material is licensed under the Creative Commons License BY-NC-SA 4.0. 140
- 141. Action Barの作成：Action Items（ ３） 1. menuリソースの作成 /res/menu/main_menu.xml • <item>タグに以下の要素を設定 表示名称 プロパティ Camera android:id="@+id/camera" android:icon="@android:drawable/ic_men u_camera" android:showAsAction="ifRoom" android:title="Camera” Toggle Titles android:id="@+id/toggleTitles" android:icon="@drawable/ic_menu_toggle _holo_dark" android:showAsAction="ifRoom|withText" android:title="Toggle Titles" Day/Night android:id="@+id/toggleTheme" android:showAsAction="never" android:title="Day/Night" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 141
- 142. Action Barの作成：Action Items（ ４） 1. menuリソースの作成（続き） 表示名称 プロパティ Show a dialog android:id="@+id/showDialog" android:showAsAction="never" android:title="Show a dialog" Show a basic nitification android:id="@+id/showStandardNotificatio n" android:showAsAction="never" android:title="Show a basic nitification” Show a custom notification android:id="@+id/showCustomNotification " android:showAsAction="never" android:title="Show a custom notification" This material is licensed under the Creative Commons License BY-NC-SA 4.0. 142
- 143. Action Barの作成：Action Items（ ５） 2. MainActivityの修正 Activityに以下のメソッドをオーバライドする • onCreateOptionsMenu • onOptionsItemSelected ※onOptionItemSelectedは空実装し、アイテム選択時の処理は行わない @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main_menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 143
- 144. Action Barの作成：Action Items（ 確認） 確認 Action BarにActiomItemsが表示されていること カメラはアイコンだけ表示されていること ToggleTitlesにアイコンとタイトルが表示されていること その他のアイテムがオーバフローメニューに収まっていること This material is licensed under the Creative Commons License BY-NC-SA 4.0. 144
- 145. Action Barの作成：Action Items（ 解答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 145
- 147. 概要 概要 Step2ではContentFragmentを作成し、Fragmentの基本的な操作方法を 習得する Step2はさらに3つのStepで構成される Step 2-1 • イメージを表示するためのFragmentの追加 Step 2-2 • System Bar, Action Barの表示制御 Step 2-3 • ActionMode対応 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 147
- 148. Content Fragmentを作成する（ １） 実習 1 イメージを表示するためのFragmentを追加する クリックイベントに合わせて枠の色が変更される 標準状態 イメージが表示される クリッ ク クリック時 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 148
- 149. Content Fragmentを作成する（ ２） 手順 1. Fragmentに使用するレイアウトファイルの作成 2. Fragmentの作成 3. main.xmlの修正 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 149
- 150. Content Fragmentを作成する（ ３） 1. Fragmentに使用するレイアウトファイルの作成 /res/layout/content_welcome.xml • ルート要素にFrameLayoutを指定する • FrameLayoutの子要素にImageViewを指定する 設定情報 階層構造 View properties <FrameLayout> <ImageView /> </FrameLayout> FrameLayout （ルート要素） android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:padding="24dp" android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:adjustViewBounds="true" android:background="@drawable/picture_frame" android:duplicateParentState="true” This material is licensed under the Creative 150 Commons License BY-NC-SA 4.0. ImageView （FrameLayout の子要素）
- 151. Content Fragmentを作成する（ ４） ContentFragmentのselector (※selectorについては章末Tipsを参照) イメージの枠の画像を標準時、クリック時などの状況に応じて対応できるた めのselector「picture_frame.xml」を使用 • リソースファイルはスケルトプロジェクトで提供済み picture_frameは以下のリソースを使用している picture_frame_default.9.png • 標準時 • クリック時 picture_frame_pressed.9.png • 選択時（ロングクリック時） picture_frame.xml picture_frame_selected.9.png ※ロングクリックは後の実習に使用します <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/picture_frame_selected" /> <item android:state_pressed="true" android:drawable="@drawable/picture_frame_pressed" /> <item android:drawable="@drawable/picture_frame_default" /> </selector> This material is licensed under the Creative Commons License BY-NC-SA 4.0. 151
- 152. Content Fragmentを作成する（ ５） 2. Fragmentの作成 イメージを表示するためのContentFragmentを作成する onCreateViewのオーバライド • レイアウトにcontent_welcome.xmlに指定する • ImageViewに表示するための画像を設定 – ※ここでは一時的な表示画像として「big_droid」を指定する。今後 の実習で設定画像の動的変化に対応する public class ContentFragment extends Fragment { private View contentView; // The bitmap currently used by ImageView private Bitmap bitmap = null; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { contentView = inflater.inflate(R.layout.content_welcome, null); final ImageView imageView = (ImageView) contentView.findViewById(R.id.image); // TODO change image resource. this operation will be deleted later. bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.big_droid); imageView.setImageBitmap(bitmap); return contentView; } } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 152
- 153. Content Fragmentを作成する（ ６） 3. main.xmlの修正 以下のように修正する • デフォルトで記述されているTextViewは削除する main.xmlの構成 • ルート要素：LinearLayout • LinearLayoutの子要素：fragment 階層構造 <LinearLayout> <fragment /> </LinearLayout> View properties LinearLayout （修正） android:id="@+id/flags" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" fragment （追加） android:id="@+id/frag_content" android:name="com.example.android.shcgallery.Conte ntFragment" android:layout_width="match_parent" android:layout_height="match_parent” This material is licensed under the Creative Commons License BY-NC-SA 4.0. 153
- 154. Content Fragmentを作成する（ 確認） 確認 以下のように表示されることを確認する イメージが表示されていること イメージ選択時に枠線の色が変わること • 標準状態では枠線が白 • クリック時は枠線が青 標準状態 イメージが表示される クリッ ク クリック時 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 154
- 155. Content Fragmentを作成する（解 答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 155
- 156. System Bar, Action Barの制御 System Bar, Action Barの制御 System BarやAction Barの表示状態を制御することができる System Barの表示状態を同期して、Action Barの表示状態を制御するこ とも可能 非表示状態のSystem Bar, Action Bar This material is licensed under the Creative Commons License BY-NC-SA 4.0. 156
- 157. System Barの制御（１） System Barの表示状態を制御する View#setSystemUiVisibilityメソッドを使って、System Barの表示状態を 制御する setSystemUiVisibilityの引数にSystem Barの定義済の表示状態定数を使い 、表示、非表示を設定する メソッド 戻り 値 メソッド 説明 void setSystemUiVisibility (int visibility) System Barの表示状態を制御す る 引数 • int visibility 表示定数 引数に指定する定数 定数 説明 STATUS_BAR_VISIBLE 表示 STATUS_BAR_HIDDEN 非表示 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 157
- 158. System Barの制御（２） 表示状態定数Tips API Level 14より、STATUS_BAR_VISIBLE、STATUS_BAR_HIDDENは 非推奨となっています。 API Level 14以降では以下の定数を使用します STATUS_BAR_VISIBLE → SYSTEM_UI_FLAG_VISIBLE STATUS_BAR_HIDDEN → SYSTEM_UI_FLAG_LOW_PROFILE ※本トレーニングでどちらの値を使用するかは講師の指示に従ってください 定数 説明 STATUS_BAR_VISIBLE 表示（API Level 14より非推 奨） STATUS_BAR_HIDDEN 非表示（API Level 14より非推 奨） SYSTEM_UI_FLAG_VISIBLE 表示 SYSTEM_UI_FLAG_LOW_PR OFILE 非表示（アイコンが”・”にな る） This material is licensed under the Creative Commons License BY-NC-SA 4.0. 158
- 159. System Barの制御（３） サンプル 表示 // System Barの表示 contentView.setSystemUiVisibility(View.STATUS_BAR_VISIBLE); // System Barの表示（API Lv14以降） contentView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE); 非表示 // System Barの非表示 contentView.setSystemUiVisibility(View.STATUS_BAR_HIDDEN); // System Barの表示（API Lv14以降） contentView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 159
- 160. System Bar, Action Barの同期（１） System Bar表示状態と同期する方法 System Barは表示状態の変更イベントを受け取ることにより、System Barの表示状態に合わせて処理を同期させることができる 変更イベントは以下のAPIを使用する setOnSystemUiVisibilityChangeListener • 変更通知先を設定する • 引数：OnSystemUiVisibilityChangeListener OnSystemUiVisibilityChangeListener • 変更通知を受け取るためのリスナ イベント発 生 System Barの 表示状態が変 更 イベント通知 画面表示 同期処理 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 160
- 161. System Bar, Action Barの同期（２） setOnSystemUiVisibilityChangeListener 戻り 値 メソッド 説明 void setOnSystemUiVisibilityChangeListener (View.OnSystemUiVisibilityChangeListen er l) System Barの可視性が変更されたときの コールバックの通知先を指定する 引数 • OnSystemUiVisibilityChangeListener コールバックの通知先 OnSystemUiVisibilityChangeListener 戻り 値 メソッド 説明 void onSystemUiVisibilityChange(int visibility) System Barの可視性が変更されたときに呼 び出される 引数 • int visibility 表示状態定数 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 161
- 162. System Bar, Action Barの同期（３） setSystemUiVisibilityのサンプル contentView.setOnSystemUiVisibilityChangeListener(new OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { if (visibility == View.STATUS_BAR_VISIBLE) { Toast.makeText(getActivity(), "SystemBar Visible", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(getActivity(), "SystemBar Hidden", Toast.LENGTH_SHORT).show(); } } }); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 162
- 163. Action Barの制御 Action Barの表示状態を制御する ActionBar#showメソッドとActionBar#hideメソッドを使って表示状態を 制御する 戻り値 メソッド 説明 void show() Action Barを表示 void hide() Action Barを非表示 //Action Barを表示 actionBar.show(); //Action Barを非表示 actionBar.hide(); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 163
- 164. System Bar, Action Barの制御 （１） 実習 2 イメージクリック時にSystem BarとAction Barの表示状態を切り替える クリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 164
- 165. System Bar, Action Barの制御 （２） 手順 ContentFragmentの修正 onCreateViewの修正 • System Bar表示制御 • System Barの表示状態と同期してAction Barの表示状態を制御 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 165
- 166. System Bar, Action Barの制御 （３） ContentFragmentの修正 System Bar表示制御 • イメージクリック時にSystem Barの表示、非表示を切り替える contentView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (contentView.getSystemUiVisibility() == View.STATUS_BAR_VISIBLE) { contentView.setSystemUiVisibility(View.STATUS_BAR_HIDDEN); } else { contentView.setSystemUiVisibility(View.STATUS_BAR_VISIBLE); } } }); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 166
- 167. System Bar, Action Barの制御 （４） ContentFragmentの修正 System Barの表示状態と同期してAction Barの表示状態を制御 • FragmentにsetOnSystemUiVisibilityChangeListenerをセット • onSystemUiVisibilityChangeメソッド内でSystem Barの状態に応じて、 Action Barの表示、非表示を切り替える final Activity activity = getActivity(); contentView.setOnSystemUiVisibilityChangeListener(new OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { ActionBar actionBar = activity.getActionBar(); if (actionBar != null) { if (visibility == View.STATUS_BAR_VISIBLE) { actionBar.show(); } else { actionBar.hide(); } } } }); This material is licensed under the Creative Commons License BY-NC-SA 4.0. 167
- 168. System Bar, Action Barの制御（確 認） 確認 イメージクリック時にSystem BarとAction Barの表示状態が変わること を確認 クリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 168
- 169. System Bar, Action Barの制御（解 答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 169
- 170. Action Mode Action Modeとは インタラクティブなUIを実現し、終了するまで通常のUIの一部を置き換 えることが可能 主に、ロングタップや複数選択、テキスト選択のタイミングでAction Modeに切り替えます テキスト選択時 ロングタップしてからのドラッグアンドドロップ This material is licensed under the Creative Commons License BY-NC-SA 4.0. 170
- 171. Action Modeの設定（１） Action Modeの使い方 ActionMode.Callbackインタフェースを実装する タイトルや表示アイテムの設定 アイテム選択時の処理 Action Mode終了時の処理 Action Mode開始のメソッドを呼び出す Action ModeのUIに切り替わる メニューアイテムの選択や、キャンセルなどのタイミングでAction Modeを終了する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 171
- 172. Action Modeの設定（２） ActionMode.Callbackインタフェースを実装する Action Mode時のメニューリソースを用意する • /res/menu/[任意のリソース名].xml Action Mode時のイベントを受け取るためのインタフェース 主に以下のような処理を実装する • Action Mode時に表示するタイトルやアイテムを組み立てる • アイテム選択時の処理を実装する • Action Modeが終了した時の処理を実装する ActionMode.Callbackの定義 戻り 値 メソッド 説明 boolean onCreateActionMode(ActionMode mode, Menu menu) Action Modeが新しく作成されるときに呼ばれる Action Mode用のメニューを作成し、通常はtrueを 返す boolean onPrepareActionMode(ActionMode mode, Menu menu) 表示中のアイテムやタイトルのデータなどを更新 する必要があるときに呼び出される。 boolean onActionItemClicked(ActionMode mode, MenuItem item) Action Modeのアイテムがクリックされたときに呼 び出される void onDestroyActionMode(ActionMode mode)licensed under the Creative Action Modeが破棄される時に呼び出される This material is 172 Commons License BY-NC-SA 4.0.
- 173. Action Modeの設定（３） ActionMode.Callbackの実装例（ソースコード） ActionMode.Callback actionModeCallback = new Callback() { @Override public boolean onPrepareActionMode(ActionMode mode, Menu menu) { return false; } @Override public void onDestroyActionMode(ActionMode mode) { currentActionMode = null; ※currentActionModeについては後述 } @Override public boolean onCreateActionMode(ActionMode mode, Menu menu) { mode.setTitle("Photo selection"); MenuInflater inflater = getActivity().getMenuInflater(); inflater.inflate(R.menu.action_mode_menu, menu); return true; } @Override public boolean onActionItemClicked(ActionMode mode, MenuItem item) { Toast.makeText(getActivity(), item.getTitle(), Toast.LENGTH_SHORT).show(); mode.finish(); return true; } }; This material is licensed under the Creative Commons License BY-NC-SA 4.0. 173
- 174. Action Modeの設定（４） ActionMode.Callbackの実装例（メニューのリソースファイル） action_mode_menu.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/share" android:icon="@android:drawable/ic_menu_share" android:showAsAction="always|withText" android:title="Share"> </item> </menu> 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 174
- 175. Action Modeの設定（５） Action Modeの開始 Activity#startActionModeメソッドでAction Modeを開始する 引数にActionMode.Callbackを指定する 戻り値ではActionModeオブジェクトを受け取ることもできる。 任意のタイミングでAction Modeを終了する Action Modeの実行フラグとして使用する ActionMode actionMode = getActivity().startActionMode(actionModeCallback); ActionMode.Callback#onCreateActionModeが呼び出されるので、メソッ ド内でタイトル設定やメニューを組み立てを行う @Override public boolean onCreateActionMode(ActionMode mode, Menu menu) { mode.setTitle("Photo selection"); MenuInflater inflater = getActivity().getMenuInflater(); inflater.inflate(R.menu.action_mode_menu, menu); return true; } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 175
- 176. Action Modeの設定（６） Action Modeのアイテム選択 ActionMode.Callback#onActionItemClickedが呼び出されるので、メソッ ド内で必要な処理を行う。 各メニューに対応した選択処理 ActionModeの終了 @Override public boolean onActionItemClicked(ActionMode mode, MenuItem item) { Toast.makeText(getActivity(), item.getTitle(), Toast.LENGTH_SHORT).show(); mode.finish(); return true; } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 176
- 177. Action Modeの設定（７） Action Modeの終了 startActionModeの戻り値であるActionModeオブジェクトよりfinishメソ ッドを呼び出す currentActionMode.finish(); ActionMode.Callback#onDestroyActionModeが呼び出されるので、メソ ッド内で必要な終了処理を行う。 確保していたActionModeの参照を外す等 @Override public void onDestroyActionMode(ActionMode mode) { currentActionMode = null; } This material is licensed under the Creative Commons License BY-NC-SA 4.0. 177
- 178. Action Mode対応（１） 実習 3 イメージロングクリック時にAction Modeに切り替える ロング クリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 178
- 179. Action Mode対応（２） 手順 1. stringリソースの作成 2. Action Mode用のメニューリソースを作成 3. ContentFragmentの修正 メンバ変数の追加 • ActionMode ActionMode.Callbackインタフェースの実装クラスの定義 Action Mode開始のメソッドを呼び出す This material is licensed under the Creative Commons License BY-NC-SA 4.0. 179
- 180. Action Mode対応（３） 1. stringリソースの作成 Name Value photo_selection_cab_title Photo selection 2. Action Mode用のメニューリソースを作成 /res/menu/photo_context_menu.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/share" android:icon="@android:drawable/ic_menu_share" android:showAsAction="always|withText" android:title="Share"> </item> </menu> This material is licensed under the Creative Commons License BY-NC-SA 4.0. 180
- 181. Action Mode対応（４） 3. ContentFragmentの修正 メンバ変数の追加 • ActionMode // Current action mode private ActionMode currentActionMode; This material is licensed under the Creative Commons License BY-NC-SA 4.0. 181
- 182. Action Mode対応（５） 3. ContentFragmentの修正（続き） ActionMode.Callbackインタフェース実装クラスの定義 • 内部クラスで定義しメンバ変数として確保する • 下記メソッドのオーバライド – onCreateActionMode – タイトルの設定 – Menuの組み立て処理 – onActionItemClicked – アイテム選択時にToastを表示する – メッセージ：Share item selected. – Action Modeの終了 – onDestroyActionMode – contentViewの選択解除 – currentActionModeの参照を外す – onPrepareActionMode – falseを返す This material is licensed under the Creative Commons License BY-NC-SA 4.0. 182
- 183. Action Mode対応（６） ActionMode.Callbackインタフェース実装クラス（ソース） ActionMode.Callback actionModeCallback = new ActionMode.Callback() { @Override public boolean onPrepareActionMode(ActionMode mode, Menu menu) { return false; } @Override public void onDestroyActionMode(ActionMode mode) { contentView.setSelected(false); currentActionMode = null; } @Override public boolean onCreateActionMode(ActionMode mode, Menu menu) { mode.setTitle(R.string.photo_selection_cab_title); MenuInflater inflater = getActivity().getMenuInflater(); inflater.inflate(R.menu.photo_context_menu, menu); return true; } @Override public boolean onActionItemClicked(ActionMode mode, MenuItem item) { switch (item.getItemId()) { case R.id.share: Toast.makeText(getActivity(), "Share item selected.", Toast.LENGTH_SHORT).show(); mode.finish(); return true; } return false; } }; This material is licensed under the Creative Commons License BY-NC-SA 4.0. 183
- 184. Action Mode対応（７） 3. ContentFragmentの修正（続き） onCreateViewメソッド内でAction Mode開始のメソッドを呼び出す ロングクリックイベントを検知するためのリスナをセットする • OnLongClickListener ロングクリックイベントでAction Modeに切り替える • startActionModeメソッドの呼び出し • 引数にActionMode.Callbackインタフェースを指定 • 戻り値を取得し、メンバ変数にセット // When long-pressing a photo, activate the action mode for selection, showing the // contextual Action Bar (CAB). contentView.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View v) { if (currentActionMode != null) { return false; } currentActionMode = getActivity().startActionMode(actionModeCallback); contentView.setSelected(true); return true; } This material is licensed under the Creative }); Commons License BY-NC-SA 4.0. 184
- 185. Action Mode対応（確認） 確認 以下のように表示されることを確認 ロング クリック This material is licensed under the Creative Commons License BY-NC-SA 4.0. 185
- 186. Action Mode対応（解答） 解答 別ドキュメント参照 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 186
- 187. Tips Selectorリソース selectorとは クリック時や選択時、標準状態などの状態に応じて画像やリソースを自 動的に変更する機能を持ったリソースファイル selectorを使えば以下の状態を自動的に変更することができる Androidで使用されているデフォルトのButtonの場合 通常時 • フォーカスがあたってない(normal) • フォーカスがあたっている(selected) • クリック(pressed) 使用不可 • フォーカスがあたっていない(disable) • フォーカスがあたっている(disable_focused) disable disable_focused normal pressed This material is licensed under the Creative Commons License BY-NC-SA 4.0. selected 187
- 188. Tips Selectorリソース selectorの使い方 res/drawable以下に状態ごとにリソースの対応付けを定義したxmlファイ ルを作成する colorプロパティやdrawableプロパティを指定し、状態ごとのリソースの 対応付け設定する 作成したselectorをViewのbackgroundプロパティに設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 188
- 189. Tips Selectorリソース selectorの作成方法 selectorタグを作成し、itemタグに状態に応じたリソースを定義する Viewの状態はitemタグのandroid:state_**プロパティで設定する android:drawableに設定したいリソースを定義する selectorは以下の書式で作成する ルートノードに<selector>を指定する 子ノードに<item>を指定する • 必要に応じてプロパティを設定する <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:color="hex_color" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_selected=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector> This material is licensed under the Creative Commons License BY-NC-SA 4.0. 189
- 190. Tips Selectorリソース selectorの作成方法 state_**プロパティには以下の項目を設定できる書式で作成する プロパティ 値 説明（trueの場合） android:state_pressed boolean 押されたとき android:state_focused boolean フォーカス時 android:state_selected boolean 選択時 android:state_checkable boolean チェック可能な状態 android:state_checked boolean チェック時 android:state_enabled boolean 有効な状態 android:state_window_focuse d boolean ウィンドウにフォーカ スがある状態 This material is licensed under the Creative Commons License BY-NC-SA 4.0. 190
- 191. Tips Selectorリソース selectorを使用したサンプル レイアウトリソースファイルに定義したViewのbackgroundプロパティに 作成済みのselectorを指定する。 selectorファイル <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- pressed --> <item android:state_pressed="true" android:drawable="@drawable/panel_picture_frame_bg_pressed_blue" /> <!-- focused --> <item android:state_focused="true" android:drawable="@drawable/panel_picture_frame_bg_focus_blue" /> <!-- default --> <item android:drawable="@drawable/panel_picture_frame_bg_normal" /> </selector> layoutファイル <Button android:id="@+id/button2" android:text="abcdefghejflmnopqrstuvwxyz" android:textColor="#ffffff" android:background="@drawable/my_selector" This material is licensed under the Creative android:layout_width="wrap_content" Commons License BY-NC-SA 4.0. android:layout_height="wrap_content"></Button> 191
- 193. 概要 概要 Step3ではListFragmentの使い方について習得する Step3は更に2つのStepで構成される Step 3-1 • ListFragmentを使ってタイトル一覧を表示する Step 3-2 • ListFragmentをカスタマイズする This material is licensed under the Creative Commons License BY-NC-SA 4.0. 193
- 194. ListFragment ListFragmentとは 一覧表示用に特化したFragment 内部にListViewを持ったレイアウトが設定されているので、専用のレイ アウトファイルを必要としない プログレスバーの表示機能が標準で備わっている This material is licensed under the Creative Commons License BY-NC-SA 4.0. 194