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.

Action Bar and Menu

5,470 views

Published on

ActionBar と Menuを共存させたマルチバージョン対応

Published in: Technology
  • Be the first to comment

Action Bar and Menu

  1. 1. ActionBar & Menu Action BarとMenuを共存させたマルチバージョン対応12年9月29日土曜日
  2. 2. よくある Action Bar Landscape Portrait12年9月29日土曜日
  3. 3. Menu Definition <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/menu_social_person" android:icon="@drawable/ic_action_social_person_holo_dark" android:orderInCategory="100" android:showAsAction="ifRoom" android:title="Person"/> <item android:id="@+id/menu_refresh" android:icon="@drawable/ic_action_refresh_holo_dark" android:orderInCategory="110" android:showAsAction="ifRoom" android:title="Refresh"/> <item android:id="@+id/menu_content_save" android:icon="@drawable/ic_action_content_save_holo_dark" android:orderInCategory="200" android:showAsAction="ifRoom" android:title="Save"/> <item showAsAction 説明 android:id="@+id/menu_settings" android:icon="@drawable/ic_action_setting_holo_dark" ifRoom スペースがあれば表示 android:orderInCategory="300" android:showAsAction="ifRoom" always 常に表示 android:title="Settings"/> </menu> never 常に非表示 withText テキスト付き12年9月29日土曜日
  4. 4. Action Bar on 2.3.x Action Bar Sherlock 推奨 Google I/O 2012 Code Labs でも使用 セッションで、Support Library でもうすぐ提供さ れていると言っていたが... はや、3ヶ月...12年9月29日土曜日
  5. 5. Device with a Physical Menu Key 2.3.x 2.3.x 物理メニューキー付き 物理メニューキー付き 見えない! 白黒反転 小さい?12年9月29日土曜日
  6. 6. Device with a Physical Menu Key 4.x 2.3.x 2.3.x 物理メニューキー付き 物理メニューキー付き 物理メニューキー付き 見えない! 白黒反転 小さい?12年9月29日土曜日
  7. 7. Android Developers - Iconography http://developer.android.com/design/style/iconography.html#action-bar ActionBar DPI Pixel Scale ldpi 24x24 px x0.75 mdpi 32x32 px - hdpi 48x48 px x1.5 xdpi 64x64 px x2.012年9月29日土曜日
  8. 8. Icon Colors on Action Bar Holo Light Holo Dark12年9月29日土曜日
  9. 9. Icon Design ANDROID 2.3 ( API レベル 9 ) 以降のメニューアイコンのガイドライン https://sites.google.com/a/techdoctranslator.com/jp/android/practices/ui_guidelines/icon_design/icon_design_menu オフィシャルからは削除されている? Menu Icon DPI Pixel Scale ldpi 36x36 px x0.75 mdpi 48x48 px - hdpi 72x72 px x1.5 xdpi - -12年9月29日土曜日
  10. 10. Action Bar に Menu用アイコンを表示 大きい!?12年9月29日土曜日
  11. 11. ActionBarとMenuのアイコンガイドラインが違う ActionBarのアイコンをメニューに使用すると小さ い。 MenuのアイコンをActionBarに使用すると大き い。 Menu のバックパネルは、黒いと限らない。 2.3.xから黒だった気がするんだけど...12年9月29日土曜日
  12. 12. Multi Version Support menu.xml を分ける! /res /menu / menu.xml /menu-v11 / menu.xml アイコンを分ける! /res /drawable-hdpi ActionBar用 /ic_action_content_save_holo_dark.png /ic_menu_content_save.png Menu用12年9月29日土曜日
  13. 13. value/menu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/menu_social_person" android:icon="@drawable/ic_action_social_person_holo_dark" android:orderInCategory="100" android:showAsAction="ifRoom" android:title="Person"/> <item android:id="@+id/menu_refresh" android:icon="@drawable/ic_action_refresh_holo_dark" android:orderInCategory="110" android:showAsAction="ifRoom" android:title="Refresh"/> <item Menu用アイコン android:id="@+id/menu_content_save" android:icon="@drawable/ic_menu_content_save" android:orderInCategory="200" android:showAsAction="never" android:title="Save"/> <item android:id="@+id/menu_settings" android:icon="@drawable/ic_menu_setting" android:orderInCategory="300" android:showAsAction="never" android:title="Settings"/> </menu> neverを指定して必ずMenuパネルに表示する12年9月29日土曜日
  14. 14. value-v11/manu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/menu_social_person" android:icon="@drawable/ic_action_social_person_holo_dark" android:orderInCategory="100" android:showAsAction="ifRoom" android:title="Person"/> <item android:id="@+id/menu_refresh" android:icon="@drawable/ic_action_refresh_holo_dark" android:orderInCategory="110" android:showAsAction="ifRoom" android:title="Refresh"/> <item android:id="@+id/menu_content_save" android:icon="@drawable/ic_action_content_save_holo_dark" android:orderInCategory="200" android:showAsAction="ifRoom" android:title="Save"/> showAsAction 説明 <item android:id="@+id/menu_settings" android:icon="@drawable/ic_action_setting_holo_dark" ifRoom スペースがあれば表示 android:orderInCategory="300" android:showAsAction="ifRoom" always 常に表示 android:title="Settings"/> </menu> never 常に非表示 withText テキスト付き12年9月29日土曜日
  15. 15. 12年9月29日土曜日
  16. 16. 12年9月29日土曜日
  17. 17. 12年9月29日土曜日
  18. 18. 12年9月29日土曜日
  19. 19. style/color for 2.3.x Menu Panel にスタイルを定義 style <style name="Theme.apptheme" parent="@style/Theme.Sherlock.Light.DarkActionBar"> <item name="android:panelBackground">@color/panel_color</item> <item name="android:panelFullBackground">@color/panel_color</item> <item name="android:panelTextAppearance">@style/apptheme_PanelTextAppearance</item> </style> <style name="apptheme_PanelTextAppearance"> <item name="android:textColor">@android:color/black</item> </style> color <resources> <color name="panel_color">#eee</color> </resources>12年9月29日土曜日
  20. 20. style/color for 2.3.x Menu Panel にスタイルを定義 パネル背景 style <style name="Theme.apptheme" parent="@style/Theme.Sherlock.Light.DarkActionBar"> <item name="android:panelBackground">@color/panel_color</item> <item name="android:panelFullBackground">@color/panel_color</item> <item name="android:panelTextAppearance">@style/apptheme_PanelTextAppearance</item> </style> <style name="apptheme_PanelTextAppearance"> <item name="android:textColor">@android:color/black</item> </style> color <resources> <color name="panel_color">#eee</color> </resources>12年9月29日土曜日
  21. 21. style/color for 2.3.x Menu Panel にスタイルを定義 パネル背景 style <style name="Theme.apptheme" parent="@style/Theme.Sherlock.Light.DarkActionBar"> <item name="android:panelBackground">@color/panel_color</item> <item name="android:panelFullBackground">@color/panel_color</item> <item name="android:panelTextAppearance">@style/apptheme_PanelTextAppearance</item> </style> <style name="apptheme_PanelTextAppearance"> 文字のアピアランス <item name="android:textColor">@android:color/black</item> </style> color <resources> <color name="panel_color">#eee</color> </resources>12年9月29日土曜日
  22. 22. 12年9月29日土曜日
  23. 23. 12年9月29日土曜日
  24. 24. 12年9月29日土曜日
  25. 25. 文字の色が変わらない!12年9月29日土曜日
  26. 26. attrs.xml <!-- ============ --> <!-- Panel styles --> <!-- ============ --> <eat-comment /> <!-- The background of a panel when it is inset from the left and right edges of the screen. --> <attr name="panelBackground" format="reference|color" /> <!-- The background of a panel when it extends to the left and right edges of the screen. --> <attr name="panelFullBackground" format="reference|color" /> <!-- Default color of foreground panel imagery. --> <attr name="panelColorForeground" format="reference|color" /> <!-- Color that matches (as closely as possible) the panel background. --> <attr name="panelColorBackground" format="reference|color" /> <!-- Default appearance of panel text. --> <attr name="panelTextAppearance" format="reference" />12年9月29日土曜日
  27. 27. 2つ種類のアイコン画像を作成するのがめんど くさい... Menuパネルの色は変わっても、文字の色は変わ らないの...? 2.3.x でも、ActionBarのオバーフローメニュー が使用したい...12年9月29日土曜日
  28. 28. ActionBarに指定しないメニューはアイコンを捨てる 4.Xでもアイコン表示されないし...12年9月29日土曜日
  29. 29. 物理キーメニューを捨てる 2.3.xでもつけれる...12年9月29日土曜日
  30. 30. <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/menu_social_person" android:icon="@drawable/ic_action_social_person_holo_dark" android:orderInCategory="100" android:showAsAction="always" android:title="Person"/> <item android:id="@+id/menu_refresh" android:icon="@drawable/ic_action_refresh_holo_dark" android:orderInCategory="110" android:showAsAction="always" android:title="Refresh"/> SubMenuで実装 <item android:id="@+id/menu_roverflow" android:icon="@drawable/ic_action_moreoverflow_holo_dark" android:orderInCategory="120" android:showAsAction="always" android:title="Overflow"> <menu> <item android:id="@+id/menu_content_save" android:orderInCategory="200" android:showAsAction="never" android:title="Save"/> <item android:id="@+id/menu_settings" android:orderInCategory="300" android:showAsAction="never" android:title="@string/menu_settings"/> </menu> </item> </menu>12年9月29日土曜日
  31. 31. 物理キーメニューそのままでOverflowを使う。 style.xml <style name="AppTheme" parent="Theme.Sherlock.Light.DarkActionBar"> <item name="absForceOverflow">true</item> </style> absForceOverflow を true 物理キーを押してもMENUパネルは表示されず、 OVERFLOWのプルダウンが表示される。 メニューのXMLは、V8もV11も共通のひとつでよくなる12年9月29日土曜日
  32. 32. 2.3.x 4.x12年9月29日土曜日
  33. 33. 以上12年9月29日土曜日

×