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



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

                @youten_redo(ようてん)
                          2011.08.19
はじめに


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



                                   2
UIに関するAndroidの10機能


 プログラマは当然抑えておきたい
 デザイナもさらっとは理解しておきたい
 できればプログラマがデザイナに説明しておきたい

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

 注意
    「デザイン」の話ではありません。
    押しやすいボタン配置とか
    適切なフォントサイズとかマージンとか
    そういうのは他で。
                               3
UIに関するAndroidの10機能


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

  センタリングや上下左右寄せ、マージン/パディングがほぼ全てのUI要素に対して指定できます。
こういう、文字列を中央に配置したい際に
           ABCDEFGH

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

           ABCDEFGH         layout_marginLeft="200px"

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

           ABCDEFGH         layout_gravity="center_horizontal"

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

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

   なるべく論理的にデザインして欲しいですし、プログラマも論理的に解釈すべきです。
       マジックナンバーは極力排除すべきと思ってます。
   プログラマはマージン(要素の外側の余白)とパディング(要素の内側に配備されるコンテンツ配
    備余白)の差もきちんと抑えておいてください。
                                                5
2. 透過PNG使えます

  透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できる
   ARGB32bitカラーの24-PNGも使えます。
  よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。
たとえば、以下の様な部分を構成するのに、

    ABCDEFGH

こうじゃなくて



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

   下部の影は黒→白というグラデーションではなくて、黒→透明というグラデーションにしておくと、
    下地の背景色に依存しないのでお得です。
   もう少し言うと、タイトル・ボタンの画像が全て同じmarginTop指定で済む様に画像サイズを合わ
    せてもらえると、プログラマが喜びます。

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

   均等配置できます。



   比率配置できます。
                                         3:2:1

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

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



   これを利用して桁揃えの様なことができます。
                項目1
            項目2ですよ
      長めの項目3があります

                                                       7
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
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
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
7. タイマー使えます

 Timerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含
  めた、一般的な「タイマー」は一通り使えます。
 「画面を表示してから3秒後に」みたいなタイマー使えます。
              ABCDEFGH    ABCDEFGH
      ロゴ            ロゴ                   スプラッシュスクリーンに…


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


                                         周期的なアクセントに…
                                     …
 「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。
   時刻ごとに背景を変えるとか、メッセージを変えるとか。
 「バックグラウンドで1時間に1回」みたいな定期処理できます。
   でもメモリ不足時などには勝手に終了してしまうので、必須の処理にはあまり向きません。




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

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

                                                                                 12
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
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
余談A:画像素材レベルと向き・不向き
      レベル0               レベル1              レベル2                レベル3

                                                            bauhaus93
ABCDEFGH                                                        .ttf


                                      ABCDEFGH




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

                                                                         15
余談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

More Related Content

Viewers also liked (11)

PDF
エンジニアなら知っておきたい「仮想マシン」のしくみ v1.1 (hbstudy 17)
Takeshi HASEGAWA
 
PDF
月間10,000PVのブログになるまでに学んだSEO 2014年12月7日
Nanae Hibino
 
PDF
磯野ー!関数型言語やろうぜー!
Ra Zon
 
PDF
株価予想
masataka nishimori
 
KEY
AdServerの仕組み
Eiji Kuroda
 
PPT
インフラエンジニアのためのcassandra入門
Akihiro Kuwano
 
PPTX
アルゴリズム取引のシステムを開発・運用してみて分かったこと
Satoshi KOBAYASHI
 
PDF
Information sharing and Experience consistency at Cookpad mobile application
ichiko_revjune
 
PDF
0528 kanntigai ui_ux
Saori Matsui
 
PDF
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
 
PDF
SlideShare 101
Amit Ranjan
 
エンジニアなら知っておきたい「仮想マシン」のしくみ v1.1 (hbstudy 17)
Takeshi HASEGAWA
 
月間10,000PVのブログになるまでに学んだSEO 2014年12月7日
Nanae Hibino
 
磯野ー!関数型言語やろうぜー!
Ra Zon
 
株価予想
masataka nishimori
 
AdServerの仕組み
Eiji Kuroda
 
インフラエンジニアのためのcassandra入門
Akihiro Kuwano
 
アルゴリズム取引のシステムを開発・運用してみて分かったこと
Satoshi KOBAYASHI
 
Information sharing and Experience consistency at Cookpad mobile application
ichiko_revjune
 
0528 kanntigai ui_ux
Saori Matsui
 
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
 
SlideShare 101
Amit Ranjan
 

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

PDF
Android multiscreen
Kazuaki Ueda
 
PPT
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
 
PDF
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
 
PDF
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
 
PDF
AndroidのUI設計で押さえておきたいポイント
Takayuki Inoue
 
PDF
⑬I phoneアプリを作ってみよう!(超初心者向け)
Nishida Kansuke
 
PDF
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Chihiro Tomita
 
PDF
Weekend Androidのススメ
Suzuki Junko
 
PDF
Android Design ざっくりレビュー
Naoki Hashimoto
 
PDF
Android UI Guidelines より アイコン
Hiromi Tsuzuki
 
PDF
勘違いだらけのAndroid UIデザイン
Nobuya Sato
 
PDF
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
 
KEY
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
Kenichi Kambara
 
PDF
アプリリリース後に後悔しないための20のこと
leverages_event
 
PDF
Head First XML Layout on Android
Yuki Anzai
 
PDF
20120324 ABC2012S Android開発者とデザイナーの効率的な連携に利く話
youten (ようてん)
 
PDF
Androidアプリ製作で気をつけたいこと
Hiroyuki Shimanishi
 
PDF
夜子まま塾講義10(画面の呼び出し)
Masafumi Terazono
 
PPTX
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
Konomi Kawaharada
 
PDF
みゆっき☆Think#3 「androidに触ってみるよ!」
techtalkdwango
 
Android multiscreen
Kazuaki Ueda
 
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
 
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
 
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
 
AndroidのUI設計で押さえておきたいポイント
Takayuki Inoue
 
⑬I phoneアプリを作ってみよう!(超初心者向け)
Nishida Kansuke
 
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Chihiro Tomita
 
Weekend Androidのススメ
Suzuki Junko
 
Android Design ざっくりレビュー
Naoki Hashimoto
 
Android UI Guidelines より アイコン
Hiromi Tsuzuki
 
勘違いだらけのAndroid UIデザイン
Nobuya Sato
 
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
 
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
Kenichi Kambara
 
アプリリリース後に後悔しないための20のこと
leverages_event
 
Head First XML Layout on Android
Yuki Anzai
 
20120324 ABC2012S Android開発者とデザイナーの効率的な連携に利く話
youten (ようてん)
 
Androidアプリ製作で気をつけたいこと
Hiroyuki Shimanishi
 
夜子まま塾講義10(画面の呼び出し)
Masafumi Terazono
 
当たり前を当たり前だと思ってはいけない!スマートフォンフォンUIデザイン
Konomi Kawaharada
 
みゆっき☆Think#3 「androidに触ってみるよ!」
techtalkdwango
 
Ad

More from youten (ようてん) (20)

PDF
ネトゲで人生を脅かされた人は今VRで何を思うのか
youten (ようてん)
 
PDF
Google VRとDaydreamの最近の話
youten (ようてん)
 
PDF
CardboardとDaydreamの覚えてなくても困らない話 #ABC2017s
youten (ようてん)
 
PDF
本を書こう(雑に)
youten (ようてん)
 
PDF
Android History 2016
youten (ようてん)
 
PDF
「0.5VRぐらい」の話 #VRごっちゃにLT #cluster
youten (ようてん)
 
PDF
Android History 2015
youten (ようてん)
 
PDF
IoTゲームの難易度雑感
youten (ようてん)
 
PDF
錬金術師ごっこ #OcuJam #Ocunif
youten (ようてん)
 
PDF
Android History 2014
youten (ようてん)
 
PDF
Oculus Rift+Unity+MMD #andeb
youten (ようてん)
 
PDF
SeikenWear その1
youten (ようてん)
 
PDF
Google I/O 2014
youten (ようてん)
 
PDF
JSON吸って吐く機械
youten (ようてん)
 
PDF
やはりお前らのAndroidのBLEが不安定だという認識は間違っている
youten (ようてん)
 
PDF
BLEくびかりぞく
youten (ようてん)
 
PDF
AndroidとiOSのBLEな事情 3
youten (ようてん)
 
PDF
20131126 Android昔話 2013
youten (ようてん)
 
PDF
FourBeat apk, enchant.js memo #FourBeat
youten (ようてん)
 
ネトゲで人生を脅かされた人は今VRで何を思うのか
youten (ようてん)
 
Google VRとDaydreamの最近の話
youten (ようてん)
 
CardboardとDaydreamの覚えてなくても困らない話 #ABC2017s
youten (ようてん)
 
本を書こう(雑に)
youten (ようてん)
 
Android History 2016
youten (ようてん)
 
「0.5VRぐらい」の話 #VRごっちゃにLT #cluster
youten (ようてん)
 
Android History 2015
youten (ようてん)
 
IoTゲームの難易度雑感
youten (ようてん)
 
錬金術師ごっこ #OcuJam #Ocunif
youten (ようてん)
 
Android History 2014
youten (ようてん)
 
Oculus Rift+Unity+MMD #andeb
youten (ようてん)
 
SeikenWear その1
youten (ようてん)
 
Google I/O 2014
youten (ようてん)
 
JSON吸って吐く機械
youten (ようてん)
 
やはりお前らのAndroidのBLEが不安定だという認識は間違っている
youten (ようてん)
 
BLEくびかりぞく
youten (ようてん)
 
AndroidとiOSのBLEな事情 3
youten (ようてん)
 
20131126 Android昔話 2013
youten (ようてん)
 
FourBeat apk, enchant.js memo #FourBeat
youten (ようてん)
 
Ad

Recently uploaded (6)

PDF
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
PDF
Google Driveハブ型Obsidian同期環境:PC編集とモバイル閲覧を安全・効率的に実現するクロスデバイス構築ガイド
honeshabri
 
PDF
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
PDF
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 
PPTX
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
PDF
LoRaWAN ウェザーステーションキット v3 -WSC3-L 日本語ユーザーマニュアル
CRI Japan, Inc.
 
第三世代 ウェザーステーションキット v3 ー WSC3-L 日本語カタログ
CRI Japan, Inc.
 
Google Driveハブ型Obsidian同期環境:PC編集とモバイル閲覧を安全・効率的に実現するクロスデバイス構築ガイド
honeshabri
 
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
VMUG Japan book vsan 20250515 CPU/Memory vSAN
Kazuhiro Sota
 
2025_7_25_吉祥寺_設計ナイト_ADR運用におけるデータ利活用の考え方.pptx
ssuserfcafd1
 
LoRaWAN ウェザーステーションキット v3 -WSC3-L 日本語ユーザーマニュアル
CRI Japan, Inc.
 

プログラマとデザイナが共有すべき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>な桁揃えできます  均等配置できます。  比率配置できます。 3:2:1  HTMLの<table>みたいなことができます。 colspanはありますが、rowspanはありませ ん。ちょっとだけ面倒ですが他の方法で同 じ見た目にはできます。  これを利用して桁揃えの様なことができます。 項目1 項目2ですよ 長めの項目3があります 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