Your SlideShare is downloading. ×
0
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Action Bar and Menu
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Action Bar and Menu

4,409

Published on

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

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ActionBar & Menu Action BarとMenuを共存させたマルチバージョン対応12年9月29日土曜日
  • 2. よくある Action Bar Landscape Portrait12年9月29日土曜日
  • 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. Action Bar on 2.3.x Action Bar Sherlock 推奨 Google I/O 2012 Code Labs でも使用 セッションで、Support Library でもうすぐ提供さ れていると言っていたが... はや、3ヶ月...12年9月29日土曜日
  • 5. Device with a Physical Menu Key 2.3.x 2.3.x 物理メニューキー付き 物理メニューキー付き 見えない! 白黒反転 小さい?12年9月29日土曜日
  • 6. Device with a Physical Menu Key 4.x 2.3.x 2.3.x 物理メニューキー付き 物理メニューキー付き 物理メニューキー付き 見えない! 白黒反転 小さい?12年9月29日土曜日
  • 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. Icon Colors on Action Bar Holo Light Holo Dark12年9月29日土曜日
  • 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. Action Bar に Menu用アイコンを表示 大きい!?12年9月29日土曜日
  • 11. ActionBarとMenuのアイコンガイドラインが違う ActionBarのアイコンをメニューに使用すると小さ い。 MenuのアイコンをActionBarに使用すると大き い。 Menu のバックパネルは、黒いと限らない。 2.3.xから黒だった気がするんだけど...12年9月29日土曜日
  • 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. 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. 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. 12年9月29日土曜日
  • 16. 12年9月29日土曜日
  • 17. 12年9月29日土曜日
  • 18. 12年9月29日土曜日
  • 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. 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. 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. 12年9月29日土曜日
  • 23. 12年9月29日土曜日
  • 24. 12年9月29日土曜日
  • 25. 文字の色が変わらない!12年9月29日土曜日
  • 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. 2つ種類のアイコン画像を作成するのがめんど くさい... Menuパネルの色は変わっても、文字の色は変わ らないの...? 2.3.x でも、ActionBarのオバーフローメニュー が使用したい...12年9月29日土曜日
  • 28. ActionBarに指定しないメニューはアイコンを捨てる 4.Xでもアイコン表示されないし...12年9月29日土曜日
  • 29. 物理キーメニューを捨てる 2.3.xでもつけれる...12年9月29日土曜日
  • 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. 物理キーメニューそのままで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. 2.3.x 4.x12年9月29日土曜日
  • 33. 以上12年9月29日土曜日

×