tande lab.

Androidアプリのデザインの幅を広げるコツとTips 4回目 #aadesigns 最終回に参加してきた

最終回の4回目、参加してきました。
今回のスライドも力作で、とても分かりやすかったです!

前回までの内容

Androidアプリのデザインの幅を広げるコツとTips 1回目 #aadesigns に参加してきた

  • Android ならではのポイントについて
  • 9patch について

Androidアプリのデザインの幅を広げるコツとTips 2回目 #aadesigns に参加してきた

  • より凝ったグラフィック
  • 9patch についてより詳しく
  • デザインパーツにすべきところ、コードで表現すべきところ

Androidアプリのデザインの幅を広げるコツとTips 3回目 #aadesigns に参加できなかった

  • 全力でカスタムUI

3回目だけ参加できなかったんですよね(;_;)

以下、今回の最終回(4回目)についての @koeri 的メモです。

イベント概要

4回目のテーマは "レイアウト編" ということで、よく使うレイアウト事例をXMLで組むとこうなるよ!という内容を @tommmmy さんが実例交えて教えてくださいました。

簡単にできるだろーと思うものが意外と実装難しかったり。
難しいだろーと思うものが意外と簡単に実装できたり、奥が深い。

4回目のテーマは "レイアウト編"

  • よく使うレイアウト
  • 単位と余白
  • Photoshop や Fireworks でデザイン案を作る時の三箇条

よく使うレイアウト

主に使う要素は2つ

wrap_content
HTML でいうと インライン要素 (<span>, <img>, <a> とか) っぽいもの。

fill_parent / match_parent
HTML でいうと ブロック要素 (<div>, <p>, <hr> とか) っぽいもの。
行全体にまたがるものはこれを使う。

参考 ブロックレベル要素とインライン要素

これらの要素をこんな感じで、常に指定してレイアウトを作っていきます。

android:layout_width="fill_parent"
android:layout_height="wrap_content"

レイアウト方法

LinearLayout を使ったレイアウト

(例) Android アプリ "Pulse"
http://j.mp/TkfYCc

テキストを使ったシンプルなアプリなので、主に

<TextView />

<ImageView />

の組み合わせでレイアウトされてる。

これらを

<LinearLayout> </LinearLayout>

の中に入れて、縦に並べるか横に並べるかを指定することでレイアウトしていく。

基本構造としては、こんな感じ。

<LinearLayout>
    <TextView />
    <ImageView />
</LinearLayout>

※ 説明のために簡略化して書いてます。

これを入れ子にして複雑なレイアウトにしていくことも可能。

<LinearLayout>
    <TextView />
    <ImageView />
    <LinearLayout>
        <TextView />
        <ImageView />
    </LinearLayout>
</LinearLayout>

横に並べる

■■□■

要素が横並びで、□部分は画面幅によって伸縮させたい場合

android:layout_weight="1"
layout_width="0dp"
layout_height="wrap_content"

縦に並べる




要素が縦並びで、□部分は画面高さによって伸縮させたい場合

android:layout_weight="1"
layout_width="fill_parent"
layout_height="0dp"

LinearLayout の難点

  • 構造が複雑になりがちで、階層が深くなる。
  • 数が多いと、アプリが重い原因となる。

LinearLauout の得意なこと

  • 等分割や割合を指定した分割が得意。
  • 使わないスペースを最大限に伸ばすことができる。

LinearLayout で layout_weight を使うときは、
解像度によって自動で伸長して欲しいところを 0dp にするのが決まりらしい。

そもそも layout_weight って何?

と思ったので調べました。

Androyer in Japan: layout_weightの留意点

layout_weightは、複数のViewを任意の大きさの割合で配置することができるコマンド

とのことです。
ほうほう。

RelativeLayout を使ったレイアウト

親とするオブジェクトにIDを振り、そいつに対して、隣に配置、下に配置、というような相対指定ができるレイアウト方法。

Relative = 相対 という意味。

ぼくが親だよー

android:id = "@+id/Oya"

として、親オブジェクトを決めた場合、

ぼく親の右どなりのAだよー

android:layouttoRightOf = "@it/Oya"

ぼくAの右どなりのBだよー

android:layout_toRightOf = "@id/A"

ぼくAの下でAと左端が同じなCだよー

android:layout_below = "@id/A"
android:layout_alignLeft = "@id/A"

ぼくCの上でCと右はじが同じDだよー

android:layout_above = "@id/C"
android:layout_alignRight = "@id/C"

てな感じで、親オブジェクトを基準に相対的にレイアウト配置していくことができる。

RelativeLayout の得意なところ

  • LinearLayout だと階層が深くなってしまうところを、1階層で表現できる!
  • パフォーマンス が良くなる場合がある。

どちらがいいとかではなく、場合によって、パフォーマンスを見ながら使い分けていく必要がある。

FrameLayout を使ったレイアウト

重ねるときに使う。

写真サムネイル上端から黒〜透明のグラデがかかって、その上に白い文字が載るっていうコメント表示方法が、最近の流行りかな、と思ってる。

例えば、そういう表現を作るときに使うと良い。

<TextView />
<Shape />
<ImageView />

グラデーションは

  • startColor #8000
  • endColor #0000

という風に指定可能で、そうやって XML で表現したものを
サムネイルの上に重ねあわせて利用したりできる。

ScrollView を使ったレイアウト

スクロール表現も実は簡単にできる。
ScrollView の中にスクロールしたい要素を入れるだけ。

<ScrollView
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
/* ここに要素を入れる */
</ScrollView>

横にスクロールも実は簡単、冒頭に "Horizontal" をつけるだけ。

<HorizontalScrollView
android:layout_width = "fill_parent"
android:layout_height = "fill_parent">
/* ここに要素を入れる */
</HorizontalScrollView>

小ネタタイム:by asamieee7 さん

レイアウトを PSD で作って、そのまま開発者に渡すデザイナーが結構いるらしいと聞いてびっくり!
パーツのスライスまで、ちゃんとデザイナーがやる仕事ですと思い、普段私がエンジニアの方に提出している作業指示書を紹介!

パーツを切り出してこないデザイナーがいたら、エンジニアの皆さん、それは切りだしてください!とデザイナーに突っ返していいと思います!

XML を書けないデザイナーは、ちゃんとレイアウト指示書をだすべきです。

@koeri 的感想

普段、自分のいる会社内で社内エンジニアに渡すデザイン指示書しか、そういった類のものを見たことなかったので、個人的にはとても面白かった。

やっぱり、皆さんなにかしら指示書つくっているんだな。
個人的にはこの指示書つくるほうが大変な作業です。

あとビックリしたのは、会場にいたエンジニアさんで結構な数の人が、デザイナーから提供されたレイアウト画面 PSD から自身でパーツを切り出した経験があると手を挙げていた。

ひゃーそれって大変すぎる。。。

小ネタタイム: by @adamrocker さん

安藤さんのブログに残らないくらいのスピードでやりたいと思います!
ActionBar を使うと色んな解像度でいい感じのデザインにしてくれるのでいいよ!
ActionBarSherlock というライブラリを使うと Android Ver. 2.x でも使えるよ!

# 残りネタはエンジニア寄りだったので本ブログでは割愛。

単位と余白

デザイナー向けに言語化して説明するのが難しい分野だが、知ってるのと知らないのとでは大違い。

Android アプリのレイアウトで使う単位

dp について
解像度が違うデバイスが多い、Androidならではの単位。
160dpi で 1px = 1dp。

sp について
テキストに使う単位。

単位に付いては以前、記事を書いたので詳細はこちらを参照してください。
[Android] Android特有の単位 “dp” と “sp” | tande lab.

Android 端末の設定にあるフォントサイズっていうのは、実際はスケールを表しているらしい。

標準サイズを 1 とすると

Small 1.7倍
Normal 2.0倍
Lartge 2.3倍
XtraLarge 2.6倍

と、なってるらしい。

重要なのは

dp/sp を意識してデザインすること。

Android の デザインガイドラインに書いてある例も、全て単位 dp で書いてある。

ガイドラインには
以下のサイズでデザイン検討すると良いと書いてある。

Phone 320*533dp
Tablet 360*640dp

だいたい、世の中のデバイスに当てはめると

Phone は hdpi
Tablet は xhdpi

が当てはまる。

デザイン上の注意点

xhdpi でデザインするときは

1dp = 2px

と思ってデザインしていくと良い。

また、Toolbar などは高さ 48dp にすると実寸で 9mm 前後になってボタンなどが押しやすくなる。ガイドラインにも 48dp Rhythm として 48dp でのデザインが推奨されている。

確かに色々見てみると、色んな UI の基準サイズに 48dp が採用されているような気がする!

Android Deisgn についてこことか分かりやすい!
Android Designの超約+コメント STYLE編 | realsuger.log

48dpを基準として、レイアウト組むことでグリッド感・バランスなどが保たれるので画面要素の基準サイズとして利用すること

だそうです。なるほどー。

Photoshop や Fireworks でデザインするときの三箇条

サイズは(ほぼ)2種類つくればOK!

Phone 320*533dp
Tablet 360*640dp

dp や sp を意識するところはしておく。

xhdpi の余白は 4 の倍数の dp だとベスト!

理由
xhdpi で 4の倍数で作っておくと hdpi でもキレイな整数になるので。

ガイドラインのデザイン例とかを見ても、全部4の倍数になってるので、
xhdpi と 4 という数字は相性がいい。

作ったあとは、実機で確認(要ものさし)

何 mm になるのかを実際にチェックする。

Android Design Preview っていうアプリが超便利!
パソコンと Android 端末を USB でつなぐと、そのまま Android で表示される!

最後に

Android Layout Cookbook の本は
何も分からない状態でデザイナーの方が読むと難しいと思うけど、勉強会でやったような基礎知識を身につけてから読むととても身に入ってくると思います。

Android Layout Cookbook アプリの価値を高める開発テクニック
あんざい ゆき
インプレスジャパン
売り上げランキング: 15036

今までの4回分の総集編+アルファ を GDG でやります!

2012.11.8 (木) at Google
http://goo.gl/iLBpo

大盛況すぎて、速攻埋まってしまった様子。
申し込めて良かったー!

感想

いやー、ほんとにステキな勉強会でした!
毎回毎回、素晴らしい資料を準備してくださった @tommmmy さん、本当にありがとうございました。

最後ということで思い切って、誰も知り合いいないボッチの状態で懇親会参加してみたのですが、@tommmmy さんはじめ、みなさん優しくしてくださってありがとうございました。

もっとデザイナー向けの勉強会増えるといいなぁ。

自分も開催してみたいネタがあるので、近いうち主催者側をやってみたいな。
色々ネタを温めつつアイディアを練っておこうっと。