2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Androidレイアウトの
スタンダードアプローチ
住友 孝郎
@cattaka_net

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
自己紹介
● 住友 孝郎(すみとも たかお)
● HN : Cattaka(キャットタカ)
● twitter : @cattaka_net
● 株式会社ブリリアントサービス所属
(2012/01/01〜)

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
何やってる人
● 工作機系のWindowsアプリ作ってました
● 業務系Webシステム作ってました
● Androidアプリ作ってます

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
gdgdいろいろ作ってます

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
ロボットアーム作ってます
AndroidからADKで制御

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
今回のターゲット
● Android向けのレイアウトXMLを作る人
● プログラマ〜デザイナの辺り

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Androidアプリ開発を取り巻く問題
● まだベストプラクティスが確立されてない
● 従来のベストプラクティス
● Web → Struts, Ruby on Rails
● アプリ → .NET, MFC, Qt
● クラウド → Slim3, Hadoop
● プログラマさんもデザイナさんも
従来の手法でアプリを作ってしまう
→だから一緒に考えましょ♪

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
ややこしくする要因
● 様々な文化の人が関わる
● 組み込み屋さん
● Web屋さん
● 携帯アプリ屋さん
● 業務アプリ屋さん
● スマートフォンのアプリはいろんな文化が混ざる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
やりがちなこと
● プログラマさんが
● ピクセル決め打ちのレイアウト
● マウス前提の画面仕様
● 画面サイズを考慮してない
● etc
● デザイナさんがやりがちなこと(?)
● Web系の手法がそのまま持ち込まれる
● Bitmapがデーンと貼られる
● etc

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
やりがちなことが何故問題か？
● Androidはいろんな文化が混ざり込んでいる
● その中で生まれた文化がある
● Android固有の問題がある
● レイアウトについての文化
● 画像サイズにまつわる問題
● 画面サイズによる問題

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
画像サイズにまつわる問題

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズと言っても２種類ある
● ファイルサイズ
● APKが大きくなる
→端末の容量を圧迫する
→最近はSDカードに保存できるのでOK
● 展開されたときのサイズ
● JPGやPNGは圧縮が効くけど、展開すると問題になるこ
ともある
→展開時にOOMになる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズを小さくするためには
● Bitmapは必要最小限にする
● xmlで描画させる
● Nine-patchを使う
ap X
Nine ml
Bitm -pat
ch

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
xmlで描画させる
● Shape Drawable
● Layer List
● Etc
● Bitmap+xmlでタイリングする
● Clip Drawable

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Shape Drawable
● XMLでボタンや背景用の画像が生成できる
● 四角や丸が描ける
● 丸四角ができる
● グラデーション
● 枠線も描ける

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
APIDemoのサンプル(1)
● 四角
● 丸
● 丸四角

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
APIDemoのサンプル(2)
● 境界が点線
● グラデーション

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
実例
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
→角を10dip丸める
<corners
android:radius="10dp" />
<gradient
android:angle="90"
android:startColor="#ffd8b2"
android:endColor="#ffbf7f" →グラデーション
android:type="linear" />
→枠線は2dipで青
<stroke
android:width="2dp"
android:color="#0184D1"/>
</shape>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Layer List
● ShapeやBitmapをまとめて
１つのDrawableとして扱える
● 例：BitmapとShapeを重ねた場合

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
実践：xmlだけで二重グラデーション
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:startColor="#ff007fff"
android:centerColor="#00007fff"
android:endColor="#700f7fff"
android:type="linear"
android:centerX="0.7"
android:centerY="0.3"/>
<stroke
android:width="2dp"
android:color="#0184D1"/>
</shape> 重ねる
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:centerX="0.3"
android:centerY="0.3"
android:gradientRadius="200"
android:startColor="#007f7fff"
android:centerColor="#007f7fff"
android:endColor="#7f7f7fff"
android:type="radial"/>
<stroke android:width="2dp"
android:color="#0184D1"/>
</shape>
</item>
</layer-list>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Nine-Patch(1)
● 伸び縮みする画像で汎用的に使える
横に引き伸ばす
縦に引き伸ばす

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Nine-Patch(2)
● Android SDK同封のdraw9patchで作れます

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズにまつわる問題の対策
● xmlとNine-patchを使おう
● メリット
● 多言語化もしやすくなる
● 言語ごとに画像ファイルを作っていたのが不要になる
● 画像数が減るのでAPKが小さくなる
● メモリにやさしくなる
● デメリット
● デコられた文字のボタンは作れない
– 対応策に出こられたフォントを使うという手はある
● Nine-patchは拡大縮小されるのでノイズが気になる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
個々の画面サイズによる問題

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
画面サイズの違いは問題山積み
● Webサイトと同じようにしたら大変なことに・・・
● 小さいボタンが密集すると指じゃ押せない
● 方向を変えたら崩壊した
● 縦画面前提で作ったら横にしたら潰れる
● スマートフォン用アプリをタブレットで使うと大きす
ぎる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
何故問題か
● 一般にPCは画面が十分に大きい
● 多少レイアウトが悪くても広さで誤魔化せる
● スマートフォンは画面が小さい
● 全画面が前提
● その癖にデバイスごとにサイズが違う

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
それらを解決するために
● フレキシブルなレイアウトを作りましょう
● 各Viewの特性やレイアウトを理解して組み合わせ
ましょう

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Viewのサイズ(1)
● 各Viewはそれぞれ理想的なサイズを持つ
● 意図的なサイズ指定をしない限り理想的なサイズを
維持する
● 意図的に指定する方法
● layout_width/layout_heightに値を指定する
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
文字列の包含が
理想的な幅

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Viewのサイズ(2)
● layout_width/heightの値 親の幅
● wrap_contents(理想的なサイズ)
● match_parent(親の幅に合わせる)
● 数値を決め打ち(指定した大きさ)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<Button
android:id="@+id/button1" android:text="Button1"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Button
android:id="@+id/button2" android:text="Button2"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
<Button
android:id="@+id/button3" android:text="Button3"
android:layout_width="200dip" android:layout_height="wrap_content" />
</LinearLayout>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
マージンとパディング
● 実際の幅 = コンテンツの幅 ＋ パディング
● マージンはViewの外側
● パディングは内側
コンテンツ
パディング 1.4cm
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:padding="30dip"
android:layout_margin="20dip"/> 実際の幅
1.39cm マージン

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
レイアウトの種類
● LinearLayout
● 横/縦に並べる
● TableLayout
● グリッド状に並べる
● RelativeLayout
● それぞれのViewを組み合わせて並べる
● FrameLayout
● 単に重ねる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
LinearLayout(1)
● 縦/横に並べる
● 横に並べる場合
● 縦幅は一番大きいものに合わせる
● 横幅は指定が無い限り各Viewの理想的な幅になる
● 割り当てられた領域はlayout_gravityで指定する
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content" android:layout_height="wrap_content" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="ボタン1" android:layout_gravity="top"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="ボタン2
ボタン2
ボタン2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="ボタン3" android:layout_gravity="bottom"
/>
</LinearLayout>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
LinearLayout(2)
● layout_weightの意味
● 余った領域を割り振る
余った領域 <LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/button1" android:text="Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
0:1:2の割合で android:id="@+id/button2" android:text="Button2"
android:layout_width="wrap_content"
割り振る android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="@+id/button3" android:text="Button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"/>
</LinearLayout>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
LinearLayoutの小技
● 幅を均等に割り振る手法
● layout_width=”0dip”を指定
● layout_weight=”1”を指定
<LinearLayout
全てが余った領域 android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/button1" android:text="Button1"
android:layout_width="0dip"
android:layout_height="wrap_content"
1:1:1の割合で android:layout_weight="1"/>
<Button
割り振る android:id="@+id/button2" android:text="Button2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="@+id/button3" android:text="Button3"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
TableLayout
● グリッド状に並べる
● 各セルの縦横の幅は一番大きい物に合わせる
● セルの結合が出来る（横方向のみ）

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
RelativeLayout(1)
● 各Viewを組み合わせて並べる
● 考え方は上下左右を「何に合わせるか」というもの
RelativeLayout 上端をどこに合わせる？
左端をどこに合わせる？
View
右端をどこに合わせる？
下端をどこに合わせる？

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
RelativeLayout(2)
● 上下左右の各端が合わせ方
1.理想的なサイズ
2.親の端に合わせる
3.他のViewの近い方の端
4.他のViewの遠い方の端
● 例)右端を揃えるパターン
● 指定なし
→ 理想的なサイズ
RelativeLayout 他のView
● layout_toLeftOf View
→ 他のViewの左端に合わせる
● layout_alignRight
→ 他のViewの右端に合わせる
● layout_alignParentRight
→ 親の右端に合わせる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
RelativeLayout(3) View
● 上端の指定方法 ● 左端の指定方法
● 指定なし → 理想的なサイズ ● 指定なし → 理想的なサイズ
● layout_alignParentTop → 親の上端 ● layout_alignParentLeft → 親の左端
に合わせる に合わせる
● layout_below → 他のViewの下端に合 ● layout_toRightOf → 他のViewの右端
わせる に合わせる
● layout_alignTop → 他のViewの上端 ● layout_alignLeft → 他のViewの左端
に合わせる に合わせる
● 下端の指定方法 ● 右端の指定方法
● 指定なし → 理想的なサイズ ● 指定なし → 理想的なサイズ
● layout_alignParentBottom → 親の下 ● layout_alignParentRight → 親の右端
端に合わせる に合わせる
● layout_above → 他のViewの上端に合 ● layout_toLeftOf → 他のViewの左端に
わせる 合わせる
● layout_alignBottom → 他のViewの下 ● layout_alignRight → 他のViewの右
端に合わせる 端に合わせる

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
FrameLayout
● 重ねるレイアウト
● 他の部品と組み合わせて使う
● 例
● 予め重ねておいて
プログラムから切り替えて使う

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
レイアウトの使い分け例
想定している画面
入力欄だけ拡大縮小して欲しい？
氏名
郵便番号
住所 氏名
電話番号 郵便番号
住所
電話番号
氏名
郵便番号 氏名
郵便番号
住所
住所
電話番号 電話番号
全体が拡大縮小して欲しい？ 横方向だけ拡大縮小して欲しい？

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
例(1)

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
例(2)
● 1→2→3の順にレイアウトを置く
● すると、3の部分が伸び縮みして、
画面サイズの違いを吸収してくれる
1
2
3

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
個々の画面サイズによる問題の対策
● 画面の違いを想定する
● 方向の違い
● アスペクト比の違い
● サイズの違い
● 見せたいものが画面に収まるように
レイアウトを工夫する

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
まとめ
● 画像サイズにまつわる問題
● ファイルサイズだけじゃなくメモリもご注意
● Apkサイズは小さくする
● 画像の実サイズも加減する
● XMLを使う
● 個々の画面サイズによる問題
● 画面の違いを考慮して作る
● 見せたいものが画面に収まるように工夫する

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
最後に
● ベストプラクティスを覚えて
サクッと作りましょう
● ハッカソンもサクッと作りましょう
● Android未経験のデザイナさんと
お仕事するときは文化の違いを話しましょう

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
ご清聴ありがとうございました
住友 孝郎
@cattaka_net

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
The Bad Know-how
● 多段LinearLayout
● 一個のXMLで縦横両対応
● SurfaceViewにUI部品を被せる