Action Bar and Menu

  • 4,171 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,171
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

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