プログラマとデザイナが共有すべきUIに関するAndroidの10の機能

@youten_redo（ようてん）2011.08.19

ちょっと文字多いので読みにくくてすいません

2

はじめに

意外（？）と、プログラマにとって嬉しい形式で画像素材が提供されることはありません。

不向きな画像でがんばると、結果としてメンテナンス性・拡張性がよろしくないコードが出来上がります。

なぜ？

1. プログラマの画面の作り方と、デザイナの画面の作り方は違う

2. デザイナはプログラマの画面の作り方は知らない

デザイナ→プログラマという成果物の流れを考えると、プログラマが「適切に要求仕様を提示する」ことが必要です。

3

UIに関するAndroidの10機能

プログラマは当然抑えておきたい

デザイナもさらっとは理解しておきたい

できればプログラマがデザイナに説明しておきたい

UIに関するAndroidの10機能を以下に説明します。

注意 「デザイン」の話ではありません。

押しやすいボタン配置とか

適切なフォントサイズとかマージンとか

そういうのは他で。

4

UIに関するAndroidの10機能

1. センタリング・アライン・マージン/パディング

2. 透過PNG

3. 均等配置・比率配置・HTMLの<table>と桁揃え

4. 通常時・押した時・無効時のボタン画像自動切り替え

5. タイトルバーのカスタマイズ

6. UI要素と画面遷移のアニメーション

7. タイマー

8. フォントのカスタマイズ

9. サイズやピクセル密度の違うデバイスのためのしくみ

10.アイコンとウィジェットのサイズ

5

1. センタリング・アライン・マージン/パディング使えます

センタリングや上下左右寄せ、マージン/パディングがほぼ全てのUI要素に対して指定できます。

こういう、文字列を中央に配置したい際に

左端から200ピクセルとかじゃなくて

中央という指定が可能です。

右寄せ＋ちょっとマージンあけるというのも可能です。

なるべく論理的にデザインして欲しいですし、プログラマも論理的に解釈すべきです。

マジックナンバーは極力排除すべきと思ってます。

プログラマはマージン（要素の外側の余白）とパディング（要素の内側に配備されるコンテンツ配備余白）の差もきちんと抑えておいてください。

ABCDEFGH

ABCDEFGH layout_marginLeft="200px"

ABCDEFGH layout_gravity="center_horizontal"

ABCDEFGH layout_gravity="right" layout_margin="10dip"

6

2. 透過PNG使えます

透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できるARGB32bitカラーの24-PNGも使えます。

よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。

たとえば、以下の様な部分を構成するのに、

こうじゃなくて

こうがいいということです。

下部の影は黒→白というグラデーションではなくて、黒→透明というグラデーションにしておくと、下地の背景色に依存しないのでお得です。

もう少し言うと、タイトル・ボタンの画像が全て同じmarginTop指定で済む様に画像サイズを合わせてもらえると、プログラマが喜びます。

ABCDEFGH

ABCDEFGH

7

3. 均等配置・比率配置・HTMLの<table>な桁揃えできます

均等配置できます。

比率配置できます。

HTMLの<table>みたいなことができます。

これを利用して桁揃えの様なことができます。

３：２：１

項目１

項目２ですよ

長めの項目３があります

colspanはありますが、rowspanはありません。ちょっとだけ面倒ですが他の方法で同じ見た目にはできます。

8

4. 通常時・押した時・無効時のボタン画像自動切り替えできます

ボタンの画像は入れ替えが可能です。

押された時の画像の入れ替えが可能です。

その他、無効化時(enabled="false")や、2値トグルスイッチのon/off時画像など、いくつかの状態が定義されており、それらの状態にあわせて画像を入れ替えることが可能です。

ボタンの状態によって画像を入れ替えるのにコードを書く必要はなく、XMLだけでOKです。

おまけの話ですが、画像ファイル名はsnake case（全部小文字、単語間をアンダースコア'_'で繋ぐ）でお願いします。先頭に数字も使えません。

Submit Submit

Submit Submit

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_image_pressed" /> <item android:drawable="@drawable/button_image_normal" /></selector>

9

5. タイトルバーのカスタマイズ可能です

タイトルバー部分はカスタマイズが可能です。

左上のロゴを押すとアプリトップに戻ったり、右上に「その画面で行える操作」のボタンを配置した、Action Barという概念があって、そちらがオススメです。

iOSでは中央タイトル左右にボタンが多いでしょうか。

Action BarはHoneycombでレギュラー入りしました。きっとICSでもレギュラー入りするでしょう。

具体的な実装手順（対プログラマ）

requestWindowFeature(Window.FEATURE_CUSTOM_TITLE)した後に、独自のlayoutを指定する方法がありますが、もともとのTitleBarのstyleを継承してしまうせいかカスタマイズが手間なので、タイトルバーを消去の上、「タイトルバーに見える別のもの」を描いた方が楽な気がします。

タイトルバーの消し方ですが、requestWindowFeature(Window.FEATURE_NO_TITLE)のコードを書く方法では、初期化前に一瞬未カスタマイズのタイトルバーが表示されてかっこ悪いので、AndroidManifest.xmlにThemeを指定する方法を採用してください。

標準 カスタマイズ後（ボタン入り）

EVERNOTEの例 Honeycombではレギュラー入り

10

6. UI要素と画面遷移のアニメーションを制御できます

テキスト・画像・ボタンの様な最小のUI要素と、それを重ねたり並べたりグルーピングした概念がありますが、これらのほぼ全てにアニメーションを指定することができます。

＠IT：Androidアプリで"アニメーション"するための基礎知識http://www.atmarkit.co.jp/fsmart/articles/android20/android20_1.html

以下の4種類が基本アニメーションで、組み合わせもできます。

• Alpha（透明度）

• Rotate（回転）

• Scale（拡大・縮小）

• Translate（平行移動）

Flashのモーショントゥイーンとだいたい同じものです。

• イージング、つまり「徐々に加速」とか「徐々に減速」ができます。

• シェイプトゥイーンはできません。

画面遷移時のアニメーションもできます

throw Life：ActivityのOpenとCloseをアニメーションさせるhttp://www.adamrocker.com/blog/289/activity_open_close_animation.html

gifアニメの様なコマ送りアニメーションもできます

ソフトウェア技術ドキュメントを勝手に翻訳：View アニメーションhttps://sites.google.com/a/techdoctranslator.com/jp/android/guide/graphics/view-animation#frame-animation

Alpha＋Translateが使いやすいです。Rotateは『どこを中心に回転するか』という指定が必要なため使いどころが難しいです。

AndroidのAnimationを生成・動作確認するアプリを作成しました。Android実機をお持ちの方は検索してインストールしてみてください。

「AnimGen」

11

Timerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含めた、一般的な「タイマー」は一通り使えます。

「画面を表示してから3秒後に」みたいなタイマー使えます。

「画面を表示している間、30秒に1回に」みたいなタイマー使えます。

「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。

時刻ごとに背景を変えるとか、メッセージを変えるとか。

「バックグラウンドで1時間に1回」みたいな定期処理できます。

でもメモリ不足時などには勝手に終了してしまうので、必須の処理にはあまり向きません。

7. タイマー使えます

ロゴABCDEFGH

スプラッシュスクリーンに…

…

ABCDEFGHロゴ

周期的なアクセントに…

12

フォントのサイズ・色・透明度などが変更できます。 ふつうに使える

• サイズ・透明度込みの色（#AARRGGBB）

分かりにくいけど使える

• 影の色・影のサイズ・影の方向・横方向倍率

• 袋文字とかは出来ないのが残念です。（影のサイズを大きくすると、勝手

にブラーがかかってしまう）

あまり期待できない

• BoldとかItalicとかserif/sans-serifとかmonospaceも定義はありますが

、それらの指定により見た目がきちんと変化するシステムフォントが組み

込まれていないこともよくあります。

アプリ内にフォントを埋め込むこともできます。 英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と

思われます。

日本語フォントはサイズが大きいので使い方には注意してください。

• 本体数百kバイトのアプリに、5Mバイトのフォントデータはアンバランスで

すよね…？

• 固定文字列が大半なので、画像化した方がデータサイズ的にも優しかっ

たりしませんか？

• ライセンス等、利用方法も本当に問題ない？

8. フォントは少しカスタマイズできます

「Droid_Robot font」と横方向倍率・影の例

13

Androidは様々なディスプレイサイズ・ピクセル密度のデバイスに対応するために、それらの差分を吸収するための仕組みがあります。

実際のところは仕組みがあるだけで、きちんと対応するにはそれなりの手間がかかります。

ディスプレイサイズやピクセル密度別のリソースをディレクトリ（フォルダ）ごとに指定することができます。

例

• drawable：共通のリソース置き場

• drawable-hdpi：高ピクセル密度端末用リソース置き場

• drawable-mdpi：中ピクセル密度端末用リソース置き場

• drawable-ldpi：低ピクセル密度端末用リソース置き場

※ディスプレイサイズ：small, middle, large, xlarge,

※ピクセル密度（dip）：ldpi, mdpi, hdpi, xhdpi,

種々のサイズを指定するのに、物理的なpx（ピクセル）ではなく、dp(dip, Density-independent Pixels)という画面密度に基づいた抽象的な単位を使うのが望ましいです。

たとえば「10dip」という指定をすれば、ldpiの端末でもmdpiの端末でもhdpiの端末でもだいたい見た目の大きさが同じぐらいになる様なサイズを指定したことになります。

dp以外にもspとか

9. ディスプレイサイズ・ピクセル密度と単位

14

アイコンや、ウィジェット（ホーム画面に表示され、情報を表示したり、入力を受け付けたりできます。）はアプリの顔ですので、忘れずに検討してください。

アイコンのサイズはディスプレイのピクセル密度によって（今のところ）4段階に分かれます。

• 96px, 72px, 48px, 32px

Android 3.0 Honeycombから導入されたAction Bar左上のアイコンは、未指定ではアプリケーションのアイコンが表示されますが、logo画像として別途指定することもできるそうです。

開発者向け公式サイトに、他のアイコンと一緒に「アイコンデザインガイドライン」というページがあります。

http://developer.android.com/intl/ja/guide/practices/ui_guidelines/icon_design.html

が、極端にiOSチックでなければそこまで守らないでもいいんじゃないかな、と個人的には思っています。

Galaxyシリーズの標準ホームでは変な背景を付けられたりしてしまいますし…。

ウィジェットのサイズは、74x74dipを1セルとして、Gingerbreadまでの標準では最大4x4セルまで対応します。

ただし1辺のサイズは正確には((セル数x74)-2)dipであらわされ、例えば4x1であれば294x72dipになります。

10. アイコンとウィジェットはアプリの顔です

この部分→

15

余談A：画像素材レベルと向き・不向き

ABCDEFGH

固定サイズのpngやjpg（あるいはaiやpsd）にて提供される。プログラマがレタッチソフトで切り出すことが前提でコストが高く、慣れない作業でピクセルずれや補完リサイズによるジャギーが発生しがちになる。正直オススメできない。

1枚絵をタイル切りした素材が提供される。切り出しサイズによるマジックナンバー問題によりコードの素材依存度が上がり、改造コストが高くなる。素材作成側のコストが低いため、紙芝居デモ等初期検討向けには有効。

適切なセンタリング・アライン・マージン調整を前提とした素材群が提供される。最終的な調整がXMLでできる様になり、フォント等システムマターの問題への対応コストが下がる。機種・解像度が1,2種程度に限定できる際に有効。

9patchに対応、アプリへのフォント埋め込みまで検討した最高レベルの素材。ただしここまでやるには双方に相当の知識が必要な上しっかりとした意識あわせが必要。多デバイス展開が戦略上必須であれば採用を検討したい。

ABCDEFGH

bauhaus93.ttf

レベル0 レベル1 レベル2 レベル3

16

ボタンやダイアログの背景画像など、単純な拡大ではなく、「画像の一部のみ伸縮して欲しい」際に、それをファイル1つで指定することができます。

CSSがきちんとしていない昔のHTMLにて、<table>タグで3x3の9マス作ってきれいな角丸表示を試みたことがある人は、それとだいたい同じものだと思ってもらって問題ありません。

システムリソースである、標準ボタンの9patch　PNGの例

@tomorrowkeyさんのサイトがとっても分かりやすいので紹介して終わりにします。 明日の鍵：9patchを覚えよう！

http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217

余談B：9patch PNG

normal disable pressed focused