Honeycomb 標準UIでのアプリ開発 基本のき - ReDo

2011年4月 8日

Honeycomb 標準UIでのアプリ開発 基本のき

honey01.png

au Xoom TBi11M発売記念ということで、XoomでAPI Level 11のSDKによるアプリ開発がどうなるのか、主に標準UIの観点からチェックしてみました。
今回いじってみた限りでは、「-xlarge-mdpi」「フォントサイズ」の観点での一手間は必要そうですが、他の観点での互換性はがんばって保たれているかな、という印象です。

それにしてもいつも4を指定しているminSdkVersionに11とか入れちゃうとなんか無駄にドキドキしますね!


○SDKとminSdkVersion

Honeycombはそれ以前のバージョンと違い、「Notification Bar・Option Menu・Title Bar」の構成が見直され、「System Bar・Action Bar」というUIになりました。

アプリケーションの下位互換性を保つために、Honeycomb特有のUIを有効にするには、AndroidManifest.xmlにてminSdkVersionまたはtargetSdkVersionの指定が必要です。

ざっと試してみた感じでは、以下の通りでした。

・SDK1.6(4)、minSdkVersion指定なし
 ⇒HVGA互換モード表示
・SDK1.6(4)、minSdkVersion="4"
 ⇒MENU互換モード表示
・SDK1.6(4)、minSdkVersion="4" targetSdkVersion="11"
 ⇒Hoenycombモード表示
・SDK3.0(11)、minSdkVersion指定なし
 ⇒HVGA互換モード表示(HVGA)
・SDK3.0(11)、minSdkVersion="4"
 ⇒MENU互換モード表示
・SDK3.0(11)、minSdkVersion="11"
 ⇒Honeycombモード表示
・SDK3.0(11)、minSdkVersion="4" targetSdkVersion="11"
 ⇒Hoenycombモード表示

# SDKはdefault.propertiesの数値を変更して切り替えるのが楽です。

【Honeycombモード】
・最上段がTitle Barじゃなくて、Action Barになる。
・Action Barの左端にはアプリケーションアイコンが表示される。
・System Barに互換のためのMENUボタンは表示されない。

honey03.png honey04.png

○Screen SizeとDensity

honey02.png

10.1インチで1280x800はmdpiのxlarge。

リソースフォルダの完全限定修飾子は「-xlarge-notlong-mdpi」になります。
drawableだったら、drawable-xlarge-notlong-mdpi。
実際に試してみます。

こんな感じのリソースフォルダを用意して書き換えたiconを用意すると、
honey05.png

きちんと反映されました。
honey06.png

○Option MenuとAction BarのAction

honey07.png

Activity#onCreateOptionsMenu内でMenu#addする既存の互換コードのみを実装すると、右上端の「≡」な感じのボタンから開始する、プルダウンメニューになります。

API11から追加されたMenuItem#setShowAsActionにてMenuItem.SHOW_AS_ACTION_IF_ROOMフラグを設定するとアイコンのみがAction Barに追加され、あわせてMenuItem.SHOW_AS_ACTION_WITH_TEXTフラグも設定すると、テキスト+アイコンがAction Barに追加されます。

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // iconだけAction
        MenuItem menuItem1 = menu.add(0, MENU_DUMMY_1, 0, "Menu 1");
        menuItem1.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        menuItem1.setIcon(android.R.drawable.ic_menu_add);
        
        // TEXT付Action
        MenuItem menuItem2 = menu.add(0, MENU_DUMMY_2, 0, "Menu 2");
        menuItem2.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM
                | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
        menuItem2.setIcon(android.R.drawable.ic_menu_delete);
        
        // 普通のMENU:Honeycombでは右上端のプルダウンメニューにぶら下がる
        MenuItem menuItem3 = menu.add(0, MENU_DUMMY_3, 0, "Menu 3");
        menuItem3.setIcon(android.R.drawable.ic_menu_edit);
        
        return true;
    }

○TextViewのtextSize

textSizeについてはデフォルト(未指定)の14dipでは使い物にならないので、「-xlarge-mdpi」あたりのstyleを用意する必要がありそうです。

○各種UI部品

【Theme.Holo】
honey08.png

【Theme.Holo.Light】
honey09.png

デフォルトのThemeは「Theme.Holo」。Theme.BlackやTheme.Lightは別物になってしまいますのでご注意を。
Gmail等で使われているHoneycombベースのLight版は「Theme.Holo.Light」を指定します。

パッと見はSpinnerの展開が違うのが印象的です。

コメントする