• Save
Action Bar and Menu
Upcoming SlideShare
Loading in...5
×
 

Action Bar and Menu

on

  • 4,989 views

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

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

Statistics

Views

Total Views
4,989
Views on SlideShare
4,987
Embed Views
2

Actions

Likes
2
Downloads
8
Comments
0

2 Embeds 2

https://twitter.com 1
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Action Bar and Menu Action Bar and Menu Presentation Transcript

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