Androidレイアウトのスタンダードアプローチ

2012/02/18 Global Android Dev Camp Kyoto @cattaka_net

Androidレイアウトの
スタンダードアプローチ

住友孝郎
@cattaka_net


自己紹介

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


何やってる人
● 工作機系のWindowsアプリ作ってました
● 業務系Webシステム作ってました
● Androidアプリ作ってます


gdgdいろいろ作ってます


ロボットアーム作ってます

AndroidからADKで制御


今回のターゲット
● Android向けのレイアウトXMLを作る人
● プログラマ〜デザイナの辺り


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


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


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


やりがちなことが何故問題か？
● Androidはいろんな文化が混ざり込んでいる
● その中で生まれた文化がある
● Android固有の問題がある

● レイアウトについての文化
● 画像サイズにまつわる問題
● 画面サイズによる問題


画像サイズにまつわる問題


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


サイズを小さくするためには
● Bitmapは必要最小限にする
● xmlで描画させる
● Nine-patchを使う

ap X
Nine ml
Bitm -pat
ch


xmlで描画させる
● Shape Drawable
● Layer List
● Etc
● Bitmap+xmlでタイリングする
● Clip Drawable


Shape Drawable
● XMLでボタンや背景用の画像が生成できる
● 四角や丸が描ける
● 丸四角ができる
● グラデーション
● 枠線も描ける


APIDemoのサンプル(1)
● 四角
● 丸
● 丸四角


APIDemoのサンプル(2)

● 境界が点線

● グラデーション


実例

<?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>


Layer List
● ShapeやBitmapをまとめて
１つのDrawableとして扱える

● 例：BitmapとShapeを重ねた場合


実践：xmlだけで二重グラデーション
<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"
</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"
</shape>
</item>
</layer-list>


Nine-Patch(1)
● 伸び縮みする画像で汎用的に使える

横に引き伸ばす

縦に引き伸ばす


Nine-Patch(2)
● Android SDK同封のdraw9patchで作れます


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


個々の画面サイズによる問題


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


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


それらを解決するために
● フレキシブルなレイアウトを作りましょう
● 各Viewの特性やレイアウトを理解して組み合わせ
ましょう


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" />

文字列の包含が
理想的な幅


Viewのサイズ(2)
● layout_width/heightの値親の幅

● wrap_contents(理想的なサイズ)
● match_parent(親の幅に合わせる)
● 数値を決め打ち(指定した大きさ)
<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:layout_width="fill_parent" android:layout_height="wrap_content" />
<Button
android:layout_width="200dip" android:layout_height="wrap_content" />
</LinearLayout>


マージンとパディング
● 実際の幅 = コンテンツの幅＋パディング
● マージンはViewの外側
● パディングは内側
コンテンツ

パディング 1.4cm

<Button
android:text="Button"
android:padding="30dip"
android:layout_margin="20dip"/> 実際の幅

1.39cm マージン


レイアウトの種類
● LinearLayout
● 横/縦に並べる
● TableLayout
● グリッド状に並べる
● RelativeLayout
● それぞれのViewを組み合わせて並べる
● FrameLayout
● 単に重ねる


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


LinearLayout(2)
● layout_weightの意味
● 余った領域を割り振る

余った領域 <LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_height="wrap_content"/>
<Button
0:1:2の割合で android:id="@+id/button2" android:text="Button2"
割り振る android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
</LinearLayout>


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


TableLayout
● グリッド状に並べる
● 各セルの縦横の幅は一番大きい物に合わせる
● セルの結合が出来る（横方向のみ）


RelativeLayout(1)
● 各Viewを組み合わせて並べる
● 考え方は上下左右を「何に合わせるか」というもの

RelativeLayout 上端をどこに合わせる？

左端をどこに合わせる？

View

右端をどこに合わせる？
下端をどこに合わせる？


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


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の右
端に合わせる端に合わせる


FrameLayout
● 重ねるレイアウト
● 他の部品と組み合わせて使う
● 例
● 予め重ねておいて
プログラムから切り替えて使う


レイアウトの使い分け例
想定している画面
入力欄だけ拡大縮小して欲しい？
氏名
郵便番号
住所氏名
電話番号郵便番号
住所
電話番号

氏名

郵便番号氏名
郵便番号
住所
住所
電話番号電話番号

全体が拡大縮小して欲しい？横方向だけ拡大縮小して欲しい？


例(1)


例(2)
● 1→2→3の順にレイアウトを置く
● すると、3の部分が伸び縮みして、
画面サイズの違いを吸収してくれる

1
2
3


個々の画面サイズによる問題の対策
● 画面の違いを想定する
● 方向の違い
● アスペクト比の違い
● サイズの違い
● 見せたいものが画面に収まるように
レイアウトを工夫する


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


最後に
● ベストプラクティスを覚えて
サクッと作りましょう
● ハッカソンもサクッと作りましょう

● Android未経験のデザイナさんと
お仕事するときは文化の違いを話しましょう


ご清聴ありがとうございました

住友孝郎
@cattaka_net


The Bad Know-how
● 多段LinearLayout
● 一個のXMLで縦横両対応
● SurfaceViewにUI部品を被せる

Androidレイアウトのスタンダードアプローチ

More Related Content

What's hot

Similar to Androidレイアウトのスタンダードアプローチ

More from Takao Sumitomo

Recently uploaded

Androidレイアウトのスタンダードアプローチ