Androidアプリレイアウト勉強会に行ってきた

デザイナーのためのAndroidアプリ レイアウト勉強会 in 大阪 : ATND に参加してきた。Androidに限らず、デザイン力がゼロなのでその辺を補完する目的。

内容

だいたい 5部に分かれて、ちょっと詰め込みすぎかというほど色々説明ありました。

  1. 環境構築
  2. 基礎編
  3. レイアウト編
  4. マルチデバイス
  5. テクニック編
環境構築、基礎編

環境構築と基礎的な話はちょっと聞き流しつつ、AndroidSDKがいつのまにかr16になっていたのでアップデート作業をしてました。

基礎編の中で印象に残っているのは、やはりAndroidの欠点として、メーカー独自の部分があるのでカメラアプリなどを作成するときに機種に応じたコーディングが必要になる、とか。

ビジネスとして有料アプリでは儲からなくて、広告による収益を考える必要がある。そのためには見た目が非常に重要になってくる、という話。そもそも無料アプリで非常に優れたものが存在している現状で、有料アプリは非常に不利な状況にある。

レイアウト編

レイアウト編くらいからちゃんと聞いた。
Eclipse のグラフィカルレイアウトエディタはやはり使えない、という評価。
実際のデバイスにインストールした時と見た目が違うのでレイアウトエディタとしては信用できない、Button の xml ファイルの書き方どうだっけ?という風に使う。

Android のレイアウトでは ViewGroup が基本的な器としてあって、それが HTML で言うところの divタグのようなもの。
レイアウトを組むときに最もよく使われているのは LinearLayout だが、RelativeLayout 便利だよ、という話。
ただ、RelativeLayout は xml ファイルになった時に見た目と記述の順序が一致しないので、非常にソースが見難いとのこと。
(懇親会では、最初初心者は LinearLayout から始めて、次に RelativeLayout にかぶれて、また LinearLayout に戻ってくるとか)

他にも FrameLayout を使うと、透過画像を複数枚重ねて表現できる、などの話あり。

意外と TableLayout はあまり利用されていなそうな。

マルチデバイス

Androidにはやはり様々なデバイスがあって、画面解像度による別(QVGA とか HGVA)と画面密度による別(hdpiとか mdpi)ある。この辺Sign in - Google Accountsに詳しいらしい。

今日本にある機種はだいたい normal サイズの hdpi になっている。
デザイン時の注意として、hdpi の画面では単位 1dp がだいたい 1.5px にあたるので、デザインを作る人は注意しないと思った線の太さにならん、とかなるよう。

画面サイズごとにレイアウトを切り替えるには layout フォルダの他に layout-large とか layout-small とかフォルダに修飾子を付けたものを作成して、その中に特定解像度向けの xml ファイルを置く。

画像のリソースも画面密度ごとに提供する、だいたい hdpi の細かい機種ごとの差異は自動的に拡大・縮小される
逆に自動的に拡大・縮小して欲しくない画像(ゲームとかで多いらしい)は drawable-nodpi というフォルダを作成してそこに入れる。

フォルダの修飾子は他にも言語(jaとか)、サイズ(normalとか)、向き(portraitとか)色々あって、各順序も決まっている。まあ、エクリプスでリソース作る時に修飾子を選択すれば大丈夫だと思うけど。

単位についても説明があって、dp というのがデバイスに対する相対サイズ、sp とうのがフォントに対する相対サイズらしい。なので、View のサイズは dp で指定してTextSizeなどは sp で指定するのがよいのだろう。ただ、ユーザー設定フォントって利用している端末があまりないので今の所あんまり気にしなくてよさそう。

画像の拡大、縮小は png に対して draw9patch ツールを使って、伸ばしていい部分を指定すると、綺麗に拡大できる。ただし、ストライプとかグラデーションの入った画像はうまくいかない。

テクニック編

ここはすごく参考になった。そもそも私は今まで drawable の中に xml ファイルが置けることすら知らなかったので、shape や selector を使ってかなり自由に View を変更できることを知って驚いた。

また style.xml を作成して、それを各レイアウトで指定することで、一定の書式に合わせることができる。これも知ってる人にはあたり前でも「おー」と内心思ってた。

またボタンを等間隔に置く時に layout_weight="1" に加えて、layout_width="0dp" にすると中に書かれている文字に多寡があってもうまく行く、というのも始めて知った。

まとめ
  1. xml の表現力は想像以上に高い
  2. 見た目はエミュレータで確認する
  3. 画像はあまり使わず、shape などで実現できるものはそっちを使う

第2部

実際にデザイナーの方がandroidのデザインを組んでみました、という話。
非常に完成度の高いデザインを 1、2日で作成されたとのこと、驚き。
またプレゼンが非常に見易い。デザイナーすげー。