Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android multiscreen

2,228 views

Published on

株式会社AMSさん主催のAndroidセミナーにてプレゼンを行いました。
2012年11月22日(木)19:00-21:00
at コワーキングスペース 'ダイヤモンドクロス'

  • Be the first to comment

Android multiscreen

  1. 1. Android アプリ開発とマルチスクリーン対応 (有)ネットプラン松山 上田 和章 twitter: @twikaz Android Play: netplan_jp
  2. 2. アンドロイダー公認デベロッパー http://goo.gl/fcbqI
  3. 3. まず最初に
  4. 4. Sorry, Santa (ToT)
  5. 5. クリスマス中止のお知らせ?
  6. 6. Issue 39692https://code.google.com/p/android/issues/detail?id=39692
  7. 7. 試してみました
  8. 8. 普通のカレンダーは大丈夫みたいです。
  9. 9. マルチスクリーンへの対応Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  10. 10. ちなみにPortions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  11. 11. Content Licensehttp://developer.android.com/license.html
  12. 12. Exact Reproductions http://code.google.com/policies.html Portions of this page are reproduced from work created andshared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. http://creativecommons.org/licenses/by/2.5/
  13. 13. Modified Versions http://code.google.com/policies.html Portions of this page are modifications based on work created andshared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. http://creativecommons.org/licenses/by/2.5/
  14. 14. サイトポリシーhttp://code.google.com/intl/ja/policies.htmlGoogle は、 Google のドキュメントを必要に応じて引用、変更、再利用、再目的化、再編集することを明示的に奨励する条件の下で、 Google Code 上のドキュメントの大半のライセンスを付与します。このページの内容の一部は、Google が作成、提供しているコンテンツをベースに複製したもので、クリエイティブ・コモンズの表示 3.0 ライセンスに記載の条件に従って使用しています。
  15. 15. では、あらためまして
  16. 16. 今日考えたいこと● フラグメントによる動的 UI の生成 http://goo.gl/OQWXo (別の機会に ... )● マルチスクリーンなデザイン http://goo.gl/VNYRP
  17. 17. 第一章スクリーンの様々な要素
  18. 18. 例えば ... リスト 詳細Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  19. 19. 例えば ... リスト 詳細 更新情報Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  20. 20. 例えば ... 伸縮Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  21. 21. 例えば ... 再配置Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  22. 22. ちなみに ...
  23. 23. ちなみにラリー・ペイジ (Larry Page)Google の創業者、最高経営責任者 (CEO)「ラリー・ペイジ」( 2012 年 11 月 8 日 ( 木 ) 04:28 UTC の版)『ウィキペディア日本語版』。http://goo.gl/VHHURマティアス・ドゥアルテ (Matias Duarte)元 Palm 社で、 webOS のヒューマン I/F ディレクター2010 年 5 月より、 Android の UX (ユーザエクスペリエンス)ディレクター「 Matias Duarte 」( 00:03, 31 October 2012 UTC の版)『ウィキペディア英語版』。http://en.wikipedia.org/wiki/Matias_Duarte
  24. 24. まず、スクリーンに関する 主な要素について整理
  25. 25. スクリーン対応の要素1. スクリーンサイズ2. スクリーン密度3. オリエンテーション4. 解像度5. 密度に依存しないピクセル http://developer.android.com/intl/ja/guide/practices/screens_support.html
  26. 26. 1. スクリーンサイズスクリーンの物理的な大きさ、対角線small 2 ~ 4inch ぐらい、最小: 320x426dpnormal 3 ~ 5inch ぐらい、最小: 320x470dplarge 4 ~ 7inch ぐらい、最小: 480x640dpextra large 7inch ~、最小: 720x960dp
  27. 27. 2. スクリーン密度 (dpi)単位面積あたりのピクセル数low 120dpi ぐらいnormal 160dpi ぐらいhigh 240dpi ぐらいextra high 320dpi ぐらい、 API level 8 ~
  28. 28. 3. オリエンテーション画面の向き● Landscape ランドスケープ、横長● Portrait ポートレイト、縦長
  29. 29. 4. 画面解像度画面全体のピクセル数● QVGA(Quarter VGA) 320x240 ピクセル、従来の携帯電話● HVGA(Half VGA) 480x320 ピクセル、初期のスマートフォン● VGA(Video Graphics Array) 640x480 ピクセル、 DOS/V の基本サイズ● WVGA(Wide VGA) 800x480 ピクセル、ハイエンド携帯・スマホ
  30. 30. 4. 画面解像度(の続き)● FWVGA(Full Wide VGA) 854x480 ピクセル、 16:9 、スマホ● QHD(Quarter HD) 960×540 ピクセル、フル HD の 1/4 (面積)● HD(High Definition) 1,280x720 ピクセル、走査線 720 本の HDTV● FHD(Full HD) 1,920x1080 ピクセル、走査線 1080 本の HDTV
  31. 31. 4. 画面解像度(の比較) HD 1280x720 WVGA 800x480 HVGA QVGA 480x320320x240
  32. 32. 5. 密度に依存しないピクセルdp Density-independent pixel● 160dpi の 1 ピクセル● px = dp * (dpi / 160)● 例) 240dpi のスクリーンで 1dp の大きさ 1 * (240 / 160) = 1.5 ピクセル 画面密度が違っても同じ大きさを表現できる
  33. 33. 練習してみます。スクリーンの 5 つの要素をふまえてサイズ指定の単位 (dp, sp, px) を変えると解像度の異なる端末でどうなるか。
  34. 34. TextViewTextView(20sp)TextView(20px)ButtonButton(width: 200dp)Button(width: 200px)
  35. 35. 48dp RhythmPortions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  36. 36. Why 48dp? 48dp は物理サイズで 約 9mm タッチスクリーンで 安心して操作できる大きさPortions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  37. 37. Mind gaps それぞれの UI の間隔を 8dp に。Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  38. 38. 配置例Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  39. 39. 第一章のまとめ● 物理的なサイズ指定 端末のスクリーン密度で変化する レイアウトのバランスが変わる● 密度に依存しないサイズ指定 端末のスクリーン密度で変化しない レイアウトのバランスが保てる● 何が問題? UI の大きさが変わると操作しにくい デザイン性
  40. 40. 第二章代替リソース
  41. 41. Providing Alternative Resources 替わりとなるリソースの提供 例えば ・複数の解像度に対応するビットマップ ・複数の言語に対応する文字列 ※http://goo.gl/tBBoS
  42. 42. Alternative ResourcesAndroid は端末の構成を元にして、アプリに適切なリソースを読み込みます。
  43. 43. res - リソースフォルダ● animator/ ・・・アニメーションの設定● anim/ ・・・アニメーション (tween) の設定● color/ ・・・ビューオブジェクトの状態による色指定● drawable/ ・・・ビットマップファイル、 9patch に対応● layout/ ・・・ユーザインターフェース (UI) レイアウト● menu/ ・・・メニューの設定● raw/ ・・・任意の RAW ファイル● values/ ・・・文字、数値、色の設定● xml/ ・・・任意の XML ファイル
  44. 44. res - リソースフォルダ● animator/ ・・・アニメーションの設定● anim/ ・・・アニメーション (tween) の設定● color/ ・・・ビューオブジェクトの状態による色指定● drawable/ ・・・ビットマップファイル、 9patch に対応● 全部見ていくのは大変なので(汗 layout/ ・・・ユーザインターフェース (UI) レイアウト● menu/ ・・・メニューの設定● raw/ ・・・任意の RAW ファイル● values/ ・・・文字、数値、色の設定● xml/ ・・・任意の XML ファイル
  45. 45. res - リソース名● animator/ ・・・アニメーションの設定● anim/ ・・・アニメーション (tween) の設定● color/ ・・・ビューオブジェクトの状態による色指定● drawable/ ・・・ビットマップファイル、 9patch に対応● layout/ ・・・ユーザインターフェース (UI) レイアウト まずここに● menu/ ・・・メニューの設定 注目します● raw/ ・・・任意の RAW ファイル● values/ ・・・文字、数値、色の設定● xml/ ・・・任意の XML ファイル
  46. 46. リソースを切り替えるための config_qualifier( qualifier: 識別子)
  47. 47. リソース名 と 識別子 ● 言語と地域 (language and region) -ja, -en-rUS, -en-rGB, -fr-rCA, fr-rFR ● スクリーンサイズ (screen size) -small, -normal, -large, -xlarge ● 画面の向き (orientation) -port, -landなどなど ...http://developer.android.com/intl/ja/guide/topics/resources/providing-resources.html
  48. 48. res/ フォルダの中に
  49. 49. res/drawable● drawable● drawable-ldpi ※ 低密度用● drawable-mdpi ※ 中密度用● drawable-hdpi ※ 高密度用● drawable-xhdpi ※ 超高密度用
  50. 50. res/drawableそれぞれのスクリーン密度に対応した ビットマップファイルを用意したい
  51. 51. すべての解像度を用意しなくてもよい
  52. 52. Providing Alternative ResourcesAt runtime, Android detects the current device configuration and loads the appropriate resources for your application.http://goo.gl/xlZhz実行時に、 Android はデバイスの設定によって適切なリソースを読み込みます。Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  53. 53. res/drawable● drawable 160dpi(1 倍 )● drawable-ldpi 120dpi(3/4 倍 )● drawable-mdpi 160dpi(1 倍 )● drawable-hdpi 240dpi(1.5 倍 )● drawable-xhdpi 320dpi(2 倍 )
  54. 54. bitmap の例 (9patch) button_pressed.9.pngPortions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  55. 55. 練習してみます。 button_grad.png
  56. 56. 9patch 画像の作成android-sdktools フォルダにツールがあります。
  57. 57. draw9patch.bat
  58. 58. レイアウトに追加 <Button android:id="@+id/ButtonGrad" android:layout_height="48dp" android:layout_width="200dp" android:layout_centerHorizontal="true" android:layout_below="@id/ButtonPX" android:layout_marginTop="20dp" android:background="@drawable/button_grad" />res/drawable-ldpi/button_grad.9.png
  59. 59. 9patch による伸縮ldpi xhdpi
  60. 60. 実行してみますldpi xhdpi
  61. 61. ボタン部分を拡大 ldpi xhdpildpi 用に作成した 9patch のボタンを xhdpi で表示させてみました。一応の形は保てますが、これぐらい拡大されると角丸のなめらかさやグラデーションの品質が落ちます。
  62. 62. res/drawable のまとめ● 端末に応じて適切なリソースを読み込み 端末の設定を参照して自動的にリソースを切り替え● drawable ( 1 個)でも対応可能 ただし、拡大・縮小によってぼやけたり ...● 解像度毎にビットマップ 品質が良くなります。● 解像度毎に 9patch 品質が良くなります。
  63. 63. 第三章values リソースによるレイアウトの切り替え
  64. 64. res - リソース名● animator/ ・・・アニメーションの設定● anim/ ・・・アニメーション (tween) の設定● color/ ・・・ビューオブジェクトの状態による色指定● drawable/ ・・・ビットマップファイル、 9patch に対応● layout/ ・・・ユーザインターフェース (UI) レイアウト● menu/ ・・・メニューの設定 次はこの辺に● raw/ ・・・任意の RAW ファイル 注目します● values/ ・・・文字、数値、色の設定● xml/ ・・・任意の XML ファイル
  65. 65. (Sample) NewsReader Training: Designing multi screens
  66. 66. NewsReader で練習
  67. 67. zip ファイルを展開
  68. 68. Eclipse に取り込みます
  69. 69. Eclipse に取り込みます
  70. 70. Eclipse に取り込みます
  71. 71. Eclipse に取り込めました
  72. 72. ソースを覗いてみます// Determine whether we are in single-pane or// dual-pane mode by testing the visibility// of the article view.View articleView = findViewById(R.id.article);mIsDualPane = articleView != null && articleView.getVisibility() == View.VISIBLE; articleView : 記事本文の表示領域 mIsDualPane : タイトルと本文の表示領域があるかないかPortions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  73. 73. mIsDualPaneレイアウトに R.id.article が存在するか、存在しないか
  74. 74. values の違い 画面の大きさや解像度により 適切な values が読み込まれる
  75. 75. values( デフォルト ) のレイアウト<resources> <item name="main_layout" type="layout">@layout/onepane_with_bar</item> <bool name="has_two_panes">false</bool></resources> values/layouts.xml ・ layout リソースの指定 ・表示領域が 2 つあるかどうか
  76. 76. レイアウト: onepane_with_bar <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:gravity="center" android:layout_height="50dp"> <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/logo" android:paddingRight="30dp" android:layout_gravity="left" android:layout_weight="0" android:contentDescription="TODO"/> <View android:layout_height="wrap_content" android:id="@+id/view1" android:layout_width="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/categorybutton" android:background="@drawable/button_bg" android:layout_height="match_parent" android:layout_weight="0" android:layout_width="120dp" style="@style/CategoryButtonStyle"/> </LinearLayout> <fragment android:id="@+id/headlines"表示領域 (pane) が 1 個 android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment"アクションバーを実装 android:layout_width="match_parent" /> </LinearLayout>Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  77. 77. values-sw600dp-land<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool></resources> values-sw600dp-land/layouts.xml ・ layout リソースの指定 ・ 2 つの表示領域あり
  78. 78. レイアウト: twopanes <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/headlines" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="121dp" android:layout_height="fill_parent" android:layout_marginRight="10dp" /> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" />表示領域 (pane) が 2 個 </LinearLayout>アクションバーは自動
  79. 79. NewsReader のレイアウト valules の識別子でリソースを切り替えます。● values ● values-v11 onepane_with_bar onepane● values-sw600dp-land ● values-xlarge-land twopanes twopanes● values-sw600dp-port ● values-xlarge-port onepane twopanes-narrow
  80. 80. layout の種類onepane twopanes_with_bar -narrowonepane twopanes
  81. 81. layout に関するリソースlayout values (A), 1 面(A)onepane_with_bar values-sw600dp-land (D), 2 面(B)onepane values-sw600dp-port (C), 2 面(C)twopanes_narrow values-v11 (B), 1 面(D)twopanes values-xlarge-land (D), 2 面 values-xlarge-port (C), 2 面
  82. 82. ArticleActivity.java   // (省略) // If we are in two-pane layout mode, this activity is no longer necessary if (getResources().getBoolean(R.bool.has_two_panes)) { finish(); Twopane なレイアウトは return; Fragment で処理済み。 } // Place an ArticleFragment as our content pane Onepane なレイアウトは ArticleFragment f = new ArticleFragment(); ここで Article を表示。   // (省略)Portions of this page are modifications based on work created and shared by the Android Open Source Projectand used according to terms described in the Creative Commons 2.5 Attribution License.
  83. 83. 第三章のまとめ● layout に複数のレイアウトを用意 1 ヶ所にまとめる 見通しが良くなる● values リソース切り替え 解像度によって values が切り替わる パラメータの定義だけなのでシンプル
  84. 84. 第4章Eclipse でレイアウトを作成
  85. 85. サンプルプロジェクト
  86. 86. ランチャーアイコン設定
  87. 87. デフォルトのアイコン選択
  88. 88. アクティビティを作る
  89. 89. アクティビティ作成の確認
  90. 90. プロジェクトができた
  91. 91. layout-xlargeタブレット用のレイアウトxlarge 追加してみます。
  92. 92. Package Explorer から
  93. 93. 手動で追加
  94. 94. または
  95. 95. Graphical Layout から
  96. 96. xlarge がない ...
  97. 97. 画面サイズを切り替えます
  98. 98. X-Large が選べました。
  99. 99. X-Large ができました。
  100. 100. layout-sw600dp
  101. 101. レイアウトが追加されました
  102. 102. 画面サイズの選択
  103. 103. オリエンテーションの切り替え
  104. 104. タブレットのレイアウト● http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts● タブレット最初の世代 Android 3.0● xlarge のレイアウトを追加 res/layout-xlarge/
  105. 105. 新しいレイアウト手法これまで Large や xlarge でグループ化これから レイアウトに必要なサイズを指定
  106. 106. グループ化が良くない例● 7 インチのタブレット レイアウト: large ー> 5 インチのハンドセットと同じグループ● 7 インチと 5 インチのスペースの違い ー> 同一のレイアウトにすべきではない
  107. 107. ご清聴ありがとうございます。 m(. .)m

×