デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第4回】 #aadesigns に行ってきました

ちゃんと間に合ったもんね！

オープニングトーク

HTML5の話
- まだ時期ではなかった by ザッカーバーグ
- IE6はレガシー過ぎて問題になっている。でも、新しすぎるのも問題である。
- ブラウザや端末によってばらばら
  - 傾きセンサー、加速度センサー
  - オーディオAPI
  - バイブレーション
宣伝
- http://hoolegan.com/
- イベントの盛り上がりを可視化するアプリ

本編

資料→【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

前回の復習
- 前回はカスタムUIについてでした
- SeekBarのカスタムについて話しましたが、あんざいゆきさんのブログで対応が書かれていましたので紹介。
- Y.A.M の雑記帳: Android　SeekBar のトラックとつまみの位置を合わせる
今回はレイアウトについて
- よく使うレウアウト
- 単位と余白
- フォトショとファイヤーワークスでの３箇条
領域について
- HTMLとの比較
  - インライン要素：wrap_content
  - ブロック要素：fill_parent or match_parent
  - 画像とか：サイズを指定する（48dpなど）
  - HTMLでは要素によってデフォルトでインライン要素か、ブロック要素か決まっていたが、Androidでは設定しなくてはならない。
  - 設定を記述しなくてはならない反面、自由が効く。
LinearLayout
- 横並びに配置するのか、縦並びに配置するのかを指定する
- タイムラインのレイアウトをLinearLayoutで指定する場合
  - LinearLayoutを入れ子にする必要があるので、階層が深くなって複雑になる
- 良い点
  - layout_weight="1", layout_width="0dp"を指定することで残りの余ったスペースを埋めてくれる
  - 1対1に等分したい場合もlayout_weight="1"をそれぞれ指定することで対応可能 →OKとCancelボタンの横並びなど。
  - ネガティブなボタン（Cancel）を小さく、ポジティブなボタン（OK）を大きくするようなことも、layout_weightを1:2にすれば良い。
- まとめ
  - 等分にしたり、割合で指定するのが得意。
  - 使わないスペースを最大限伸ばせる
RelativeLayout
- 親になる要素を決める
- 次の要素Aは親の隣とかを指定する
- さらに次の要素はAの下とかを設定する
  - layout_toRightOf, layout_toLeftOf
  - layout_alignParentLeft, layout_alignParentRight
  - layout_above, layout_below
- 良い点
  - 階層が浅くてシンプルになる
  - レイアウトとパフォーマンスを見ながら修正をしよう
FrameLayout
- 重ね合わせる時に使用する。斜め上から見下ろす感じだとわかりやすい。（スライド参照）
- 写真の上に透過した黒いグラデーションを置き、その上に白いテキストを乗せるようなもので使う。
  - 写真を全画面で見せたかったり、テキストのスペースを取りたい時とか
スクロールしたい場合
- ScrollViewを使う。
  - ただし、子要素は一つだけしか指定出来ないので、子要素にはLayoutを入れる。
  - 横スクロールさせるには、HorizontalScrollViewを利用する。
単位と余白
- dpとsp、わかりにくいよね。
dp
- Androidは端末ごとにサイズが違う、dpiも異なる。
- pxを同じサイズ単位で扱えたらいいよね。それが、dpです。
- mdpi, hdpi, xhdpi の比は1 : 1.5 : 2になっている。
  - xhdipに合わせるのが良い。mdpiは最近あんまり使われていない。
sp
- フォントスケール
デザイナはdpとspを意識しましょう。
- ドキュメントもViewのサイズはdp, フォントのサイズはspで書いてあります。
ハンドセットの場合
- 320dp * 533dp か 360dp * 640dp
- 320dpがhdip, 360dpがxhdip
- hdpiは1dpに1.5px, xhdpiは1pdに2px
- 公式のデザインサイトにあるのは、mdpi用なので、xhdpiにしたい場合は縦横倍にすれば良い。
- 横幅は360dpです。
- ActionBarやタブの高さは48dpです。実機で計測すると9mmでタッチしやすい。
余白
- デザインガイドラインに書いてあります。
- 4の倍数が丁度良いです。
  - mdpi : hdppi : xhdpi が1 : 1.5 : 2だから。つまり、2 : 3: 4。
  - 4の倍数にしておけば、どれにも綺麗に対応出来る。
まとめ
- サイズはほぼ2種類と思って良い
  - 320と360
  - dpとspを意識する
  - 大きい方でデザインすること
- xhdpiの余白は4の倍数が良い
- 作ったものは実機で確認すること
  - ものさしで実際に測ってみて確認してみる

小ネタタイム１

デザインの納品の話
- デザイナの皆さんはPSDで納品していませんか？
- エンジニアが切り出したりすることになってしまう。
- エンジニアの人はその状況は突っぱねましょう。
- デザイナーは部品にまで切り出して渡しましょう。
  - 細かい資料までは要らないと思う。

小ネタタイム２

資料→Android Design Mini Session 10/25 2012

Android Design読んでね！
- Design | Android Developers
ABC 2012 秋の資料読んでね！
- Abc2012f adamrocker
ActionBarを使いましょう
- 端末の違いをよしなに解決してくれます。
- でも、コンパチに入ってないのが残念だよね。
- ActionBarSherlockを使えば大丈夫。 →ActionBarSherlock - Home
  - 2.1から問題なく使えます。
画面遷移 Drawerパターン
- YoutubeとかFacebookとか重ねあわせのメニューのアプリ
- SimpleSideDrawer adamrocker/simple-side-drawer · GitHub
  - これを使えばさらっと2行くらいで実現出来ます。
- 仕組みはDecorをぶっこ抜いて、差し替えて2枚のViewGroupを重ねあわせて・・・中身は色々やってる。