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

1. プログラマとデザイナが共有すべき
UIに関するAndroidの10の機能
ちょっと文字多いので
読みにくくてすいません
@youten_redo（ようてん）
2011.08.19

2. はじめに
 意外（？）と、プログラマにとって嬉しい形式で画像素材が提
供されることはありません。
 不向きな画像でがんばると、結果としてメンテナンス性・拡張
性がよろしくないコードが出来上がります。
 なぜ？
1. プログラマの画面の作り方と、デザイナの画面の作り方は違う
2. デザイナはプログラマの画面の作り方は知らない
 デザイナ→プログラマという成果物の流れを考えると、プログ
ラマが「適切に要求仕様を提示する」ことが必要です。
2

3. UIに関するAndroidの10機能
 プログラマは当然抑えておきたい
 デザイナもさらっとは理解しておきたい
 できればプログラマがデザイナに説明しておきたい
UIに関するAndroidの10機能を以下に説明します。
 注意
 「デザイン」の話ではありません。
 押しやすいボタン配置とか
 適切なフォントサイズとかマージンとか
 そういうのは他で。
3

4. UIに関するAndroidの10機能
1. センタリング・アライン・マージン/パディング
2. 透過PNG
3. 均等配置・比率配置・HTMLの<table>と桁揃え
4. 通常時・押した時・無効時のボタン画像自動切り替え
5. タイトルバーのカスタマイズ
6. UI要素と画面遷移のアニメーション
7. タイマー
8. フォントのカスタマイズ
9. サイズやピクセル密度の違うデバイスのためのしくみ
10.アイコンとウィジェットのサイズ
4

5. 1. センタリング・アライン・マージン/パディング使えます
 センタリングや上下左右寄せ、マージン/パディングがほぼ全てのUI要素に対して指定できます。
こういう、文字列を中央に配置したい際に
ABCDEFGH
左端から200ピクセルとかじゃなくて
ABCDEFGH layout_marginLeft="200px"
中央という指定が可能です。
ABCDEFGH layout_gravity="center_horizontal"
右寄せ＋ちょっとマージンあけるというのも可能です。
ABCDEFGH layout_gravity="right" layout_margin="10dip"
 なるべく論理的にデザインして欲しいですし、プログラマも論理的に解釈すべきです。
 マジックナンバーは極力排除すべきと思ってます。
 プログラマはマージン（要素の外側の余白）とパディング（要素の内側に配備されるコンテンツ配
備余白）の差もきちんと抑えておいてください。
5

6. 2. 透過PNG使えます
 透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できる
ARGB32bitカラーの24-PNGも使えます。
 よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。
たとえば、以下の様な部分を構成するのに、
ABCDEFGH
こうじゃなくて
こうがいいということです。
ABCDEFGH
 下部の影は黒→白というグラデーションではなくて、黒→透明というグラデーションにしておくと、
下地の背景色に依存しないのでお得です。
 もう少し言うと、タイトル・ボタンの画像が全て同じmarginTop指定で済む様に画像サイズを合わ
せてもらえると、プログラマが喜びます。
6

7. 3. 均等配置・比率配置・HTMLの<table>な桁揃えできます
 均等配置できます。
 比率配置できます。
３：２：１
 HTMLの<table>みたいなことができます。
colspanはありますが、rowspanはありませ
ん。ちょっとだけ面倒ですが他の方法で同
じ見た目にはできます。
 これを利用して桁揃えの様なことができます。
項目１
項目２ですよ
長めの項目３があります
7

8. 4. 通常時・押した時・無効時のボタン画像自動切り替えできます
 ボタンの画像は入れ替えが可能です。
Submit Submit
 押された時の画像の入れ替えが可能です。
Submit Submit
 その他、無効化時(enabled="false")や、2値トグルスイッチのon/off時画像など、いくつかの状態
が定義されており、それらの状態にあわせて画像を入れ替えることが可能です。
 ボタンの状態によって画像を入れ替えるのにコードを書く必要はなく、XMLだけでOKです。
<?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>
 おまけの話ですが、画像ファイル名はsnake case（全部小文字、単語間をアンダースコア'_'で繋
ぐ）でお願いします。先頭に数字も使えません。
8

9. 5. タイトルバーのカスタマイズ可能です
 タイトルバー部分はカスタマイズが可能です。
標準 カスタマイズ後（ボタン入り）
 左上のロゴを押すとアプリトップに戻ったり、右上に「その画面で行える操作」のボタンを配置した、
Action Barという概念があって、そちらがオススメです。
 iOSでは中央タイトル左右にボタンが多いでしょうか。
 Action BarはHoneycombでレギュラー入りしました。きっとICSでもレギュラー入りするでしょう。
EVERNOTEの例 Honeycombではレギュラー入り
 具体的な実装手順（対プログラマ）
 requestWindowFeature(Window.FEATURE_CUSTOM_TITLE)した後に、独自のlayoutを指定する方法が
ありますが、もともとのTitleBarのstyleを継承してしまうせいかカスタマイズが手間なので、タイトルバーを
消去の上、「タイトルバーに見える別のもの」を描いた方が楽な気がします。
 タイトルバーの消し方ですが、requestWindowFeature(Window.FEATURE_NO_TITLE)のコードを書く方法
では、初期化前に一瞬未カスタマイズのタイトルバーが表示されてかっこ悪いので、AndroidManifest.xml
にThemeを指定する方法を採用してください。
9

10. 6. UI要素と画面遷移のアニメーションを制御できます
 テキスト・画像・ボタンの様な最小のUI要素と、それを重ねたり並べたりグルーピングした概念があ
りますが、これらのほぼ全てにアニメーションを指定することができます。
 ＠IT：Androidアプリで"アニメーション"するための基礎知識
http://www.atmarkit.co.jp/fsmart/articles/android20/android20_1.html
 以下の4種類が基本アニメーションで、組み合わせもできます。
• Alpha（透明度）
Alpha＋Translateが使いやすいです。 AndroidのAnimationを生成・動作確認
• Rotate（回転） Rotateは『どこを中心に回転するか』 するアプリを作成しました。Android実
という指定が必要なため使いどころ 機をお持ちの方は検索してインストー
• Scale（拡大・縮小） が難しいです。 ルしてみてください。
• Translate（平行移動）
 Flashのモーショントゥイーンとだいたい同じものです。
• イージング、つまり「徐々に加速」とか「徐々に減速」ができます。
• シェイプトゥイーンはできません。 「AnimGen」
 画面遷移時のアニメーションもできます
 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
10

11. 7. タイマー使えます
 Timerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含
めた、一般的な「タイマー」は一通り使えます。
 「画面を表示してから3秒後に」みたいなタイマー使えます。
ABCDEFGH ABCDEFGH
ロゴ ロゴ スプラッシュスクリーンに…
 「画面を表示している間、30秒に1回に」みたいなタイマー使えます。
周期的なアクセントに…
…
 「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。
 時刻ごとに背景を変えるとか、メッセージを変えるとか。
 「バックグラウンドで1時間に1回」みたいな定期処理できます。
 でもメモリ不足時などには勝手に終了してしまうので、必須の処理にはあまり向きません。
11

12. 8. フォントは少しカスタマイズできます
 フォントのサイズ・色・透明度などが変更できます。
 ふつうに使える
• サイズ・透明度込みの色（#AARRGGBB）
 分かりにくいけど使える
• 影の色・影のサイズ・影の方向・横方向倍率
• 袋文字とかは出来ないのが残念です。（影のサイズを大きくすると、勝手
にブラーがかかってしまう）
 あまり期待できない
• BoldとかItalicとかserif/sans-serifとかmonospaceも定義はありますが
、それらの指定により見た目がきちんと変化するシステムフォントが組み
込まれていないこともよくあります。
 アプリ内にフォントを埋め込むこともできます。
 英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と
思われます。
 日本語フォントはサイズが大きいので使い方には注意してください。
• 本体数百kバイトのアプリに、5Mバイトのフォントデータはアンバランスで
すよね…？
• 固定文字列が大半なので、画像化した方がデータサイズ的にも優しかっ 「Droid_Robot font」と
たりしませんか？ 横方向倍率・影の例
• ライセンス等、利用方法も本当に問題ない？
12

13. 9. ディスプレイサイズ・ピクセル密度と単位
 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とか
13

14. 10. アイコンとウィジェットはアプリの顔です
 アイコンや、ウィジェット（ホーム画面に表示され、情報を表示したり、入力を受け付けたりできま
す。）はアプリの顔ですので、忘れずに検討してください。
 アイコンのサイズはディスプレイのピクセル密度によって（今のところ）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になります。
14

15. 余談A：画像素材レベルと向き・不向き
レベル0 レベル1 レベル2 レベル3
bauhaus93
ABCDEFGH .ttf
ABCDEFGH
固定サイズのpngやjpg（あるい 1枚絵をタイル切りした素材が 適切なセンタリング・アライン・ 9patchに対応、アプリへのフォ
はaiやpsd）にて提供される。 提供される。切り出しサイズによ マージン調整を前提とした素材 ント埋め込みまで検討した最高
プログラマがレタッチソフトで切 るマジックナンバー問題により 群が提供される。 レベルの素材。
り出すことが前提でコストが高く コードの素材依存度が上がり、 最終的な調整がXMLでできる様 ただしここまでやるには双方に
、慣れない作業でピクセルずれ 改造コストが高くなる。 になり、フォント等システムマター 相当の知識が必要な上しっかり
や補完リサイズによるジャギーが 素材作成側のコストが低いため の問題への対応コストが下がる。 とした意識あわせが必要。
発生しがちになる。 、紙芝居デモ等初期検討向けに 機種・解像度が1,2種程度に限 多デバイス展開が戦略上必須
正直オススメできない。 は有効。 定できる際に有効。 であれば採用を検討したい。
15

16. 余談B：9patch PNG
 ボタンやダイアログの背景画像など、単純な拡大ではなく、「画像の一部のみ伸縮して欲しい」際
に、それをファイル1つで指定することができます。
 CSSがきちんとしていない昔のHTMLにて、<table>タグで3x3の9マス作ってきれいな角丸表示を
試みたことがある人は、それとだいたい同じものだと思ってもらって問題ありません。
 システムリソースである、標準ボタンの9patch PNGの例
normal disable pressed focused
 @tomorrowkeyさんのサイトがとっても分かりやすいので紹介して終わりにします。
 明日の鍵：9patchを覚えよう！
 http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217
16