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

1. ActionBar & Menu
Action BarとMenuを共存させたマルチバージョン対応
12年9月29日土曜日

2. よくある Action Bar
Landscape
Portrait
12年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.0
12年9月29日土曜日

8. Icon Colors
on Action Bar
Holo Light
Holo Dark
12年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. ２つ種類のアイコン画像を作成するのがめんど
くさい...
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.x
12年9月29日土曜日

33. 以上
12年9月29日土曜日