ActionBar & Menu              Action BarとMenuを共存させたマルチバージョン対応12年9月29日土曜日
よくある        Action Bar                                Landscape               Portrait12年9月29日土曜日
Menu Definition         <menu xmlns:android="http://schemas.android.com/apk/res/android" >             <item               ...
Action Bar on 2.3.x              Action Bar Sherlock 推奨              Google I/O 2012 Code Labs でも使用              セッションで、Su...
Device with a              Physical Menu Key                                  2.3.x        2.3.x                          ...
Device with a              Physical Menu Key            4.x                   2.3.x        2.3.x        物理メニューキー付き        ...
Android Developers -              Iconography              http://developer.android.com/design/style/iconography.html#acti...
Icon Colors              on Action Bar                              Holo Light                              Holo Dark12年9月...
Icon Design          ANDROID 2.3 ( API レベル 9 ) 以降のメニューアイコンのガイドライン          https://sites.google.com/a/techdoctranslator.co...
Action Bar に Menu用アイコンを表示                                     大きい!?12年9月29日土曜日
ActionBarとMenuのアイコンガイドラインが違う              ActionBarのアイコンをメニューに使用すると小さ              い。              MenuのアイコンをActionBarに使用す...
Multi Version Support              menu.xml を分ける!               /res                 /menu     / menu.xml                 ...
value/menu.xml              <menu xmlns:android="http://schemas.android.com/apk/res/android" >                  <item     ...
value-v11/manu.xml              <menu xmlns:android="http://schemas.android.com/apk/res/android" >                  <item ...
12年9月29日土曜日
12年9月29日土曜日
12年9月29日土曜日
12年9月29日土曜日
style/color for 2.3.x              Menu Panel にスタイルを定義                  style               <style name="Theme.apptheme" p...
style/color for 2.3.x              Menu Panel にスタイルを定義                                                                    ...
style/color for 2.3.x              Menu Panel にスタイルを定義                                                                    ...
12年9月29日土曜日
12年9月29日土曜日
12年9月29日土曜日
文字の色が変わらない!12年9月29日土曜日
attrs.xml              <!-- ============ -->              <!-- Panel styles -->              <!-- ============ -->        ...
2つ種類のアイコン画像を作成するのがめんど              くさい...              Menuパネルの色は変わっても、文字の色は変わ              らないの...?              2.3.x でも...
ActionBarに指定しないメニューはアイコンを捨てる              4.Xでもアイコン表示されないし...12年9月29日土曜日
物理キーメニューを捨てる                         2.3.xでもつけれる...12年9月29日土曜日
<menu xmlns:android="http://schemas.android.com/apk/res/android" >                  <item                      android:id=...
物理キーメニューそのままでOverflowを使う。              style.xml               <style name="AppTheme" parent="Theme.Sherlock.Light.DarkActi...
2.3.x   4.x12年9月29日土曜日
以上12年9月29日土曜日
Upcoming SlideShare
Loading in...5
×

Action Bar and Menu

4,512

Published on

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

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

No Downloads
Views
Total Views
4,512
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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日土曜日

×