More Related Content
Similar to Androidレイアウトのスタンダードアプローチ
Similar to Androidレイアウトのスタンダードアプローチ (20)
More from Takao Sumitomo (20)
Androidレイアウトのスタンダードアプローチ
- 2. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
自己紹介
● 住友 孝郎(すみとも たかお)
● HN : Cattaka(キャットタカ)
● twitter : @cattaka_net
● 株式会社ブリリアントサービス所属
(2012/01/01〜)
- 7. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Androidアプリ開発を取り巻く問題
● まだベストプラクティスが確立されてない
● 従来のベストプラクティス
● Web → Struts, Ruby on Rails
● アプリ → .NET, MFC, Qt
● クラウド → Slim3, Hadoop
● プログラマさんもデザイナさんも
従来の手法でアプリを作ってしまう
→だから一緒に考えましょ♪
- 8. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
ややこしくする要因
● 様々な文化の人が関わる
● 組み込み屋さん
● Web屋さん
● 携帯アプリ屋さん
● 業務アプリ屋さん
● スマートフォンのアプリはいろんな文化が混ざる
- 9. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
やりがちなこと
● プログラマさんが
● ピクセル決め打ちのレイアウト
● マウス前提の画面仕様
● 画面サイズを考慮してない
● etc
● デザイナさんがやりがちなこと(?)
● Web系の手法がそのまま持ち込まれる
● Bitmapがデーンと貼られる
● etc
- 10. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
やりがちなことが何故問題か?
● Androidはいろんな文化が混ざり込んでいる
● その中で生まれた文化がある
● Android固有の問題がある
● レイアウトについての文化
● 画像サイズにまつわる問題
● 画面サイズによる問題
- 12. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズと言っても2種類ある
● ファイルサイズ
● APKが大きくなる
→端末の容量を圧迫する
→最近はSDカードに保存できるのでOK
● 展開されたときのサイズ
● JPGやPNGは圧縮が効くけど、展開すると問題になるこ
ともある
→展開時にOOMになる
- 13. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズを小さくするためには
● Bitmapは必要最小限にする
● xmlで描画させる
● Nine-patchを使う
ap X
Nine ml
Bitm -pat
ch
- 14. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
xmlで描画させる
● Shape Drawable
● Layer List
● Etc
● Bitmap+xmlでタイリングする
● Clip Drawable
- 15. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Shape Drawable
● XMLでボタンや背景用の画像が生成できる
● 四角や丸が描ける
● 丸四角ができる
● グラデーション
● 枠線も描ける
- 18. 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>
- 19. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
Layer List
● ShapeやBitmapをまとめて
1つのDrawableとして扱える
● 例:BitmapとShapeを重ねた場合
- 20. 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>
- 23. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
サイズにまつわる問題の対策
● xmlとNine-patchを使おう
● メリット
● 多言語化もしやすくなる
● 言語ごとに画像ファイルを作っていたのが不要になる
● 画像数が減るのでAPKが小さくなる
● メモリにやさしくなる
● デメリット
● デコられた文字のボタンは作れない
– 対応策に出こられたフォントを使うという手はある
● Nine-patchは拡大縮小されるのでノイズが気になる
- 25. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
画面サイズの違いは問題山積み
● Webサイトと同じようにしたら大変なことに・・・
● 小さいボタンが密集すると指じゃ押せない
● 方向を変えたら崩壊した
● 縦画面前提で作ったら横にしたら潰れる
● スマートフォン用アプリをタブレットで使うと大きす
ぎる
- 26. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
何故問題か
● 一般にPCは画面が十分に大きい
● 多少レイアウトが悪くても広さで誤魔化せる
● スマートフォンは画面が小さい
● 全画面が前提
● その癖にデバイスごとにサイズが違う
- 28. 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" />
文字列の包含が
理想的な幅
- 29. 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>
- 30. 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 マージン
- 31. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
レイアウトの種類
● LinearLayout
● 横/縦に並べる
● TableLayout
● グリッド状に並べる
● RelativeLayout
● それぞれのViewを組み合わせて並べる
● FrameLayout
● 単に重ねる
- 32. 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>
- 33. 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>
- 34. 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>
- 36. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
RelativeLayout(1)
● 各Viewを組み合わせて並べる
● 考え方は上下左右を「何に合わせるか」というもの
RelativeLayout 上端をどこに合わせる?
左端をどこに合わせる?
View
右端をどこに合わせる?
下端をどこに合わせる?
- 37. 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
→ 親の右端に合わせる
- 38. 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の右
端に合わせる 端に合わせる
- 39. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
FrameLayout
● 重ねるレイアウト
● 他の部品と組み合わせて使う
● 例
● 予め重ねておいて
プログラムから切り替えて使う
- 40. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
レイアウトの使い分け例
想定している画面
入力欄だけ拡大縮小して欲しい?
氏名
郵便番号
住所 氏名
電話番号 郵便番号
住所
電話番号
氏名
郵便番号 氏名
郵便番号
住所
住所
電話番号 電話番号
全体が拡大縮小して欲しい? 横方向だけ拡大縮小して欲しい?
- 43. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
個々の画面サイズによる問題の対策
● 画面の違いを想定する
● 方向の違い
● アスペクト比の違い
● サイズの違い
● 見せたいものが画面に収まるように
レイアウトを工夫する
- 44. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
まとめ
● 画像サイズにまつわる問題
● ファイルサイズだけじゃなくメモリもご注意
● Apkサイズは小さくする
● 画像の実サイズも加減する
● XMLを使う
● 個々の画面サイズによる問題
● 画面の違いを考慮して作る
● 見せたいものが画面に収まるように工夫する
- 45. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
最後に
● ベストプラクティスを覚えて
サクッと作りましょう
● ハッカソンもサクッと作りましょう
● Android未経験のデザイナさんと
お仕事するときは文化の違いを話しましょう
- 47. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net
The Bad Know-how
● 多段LinearLayout
● 一個のXMLで縦横両対応
● SurfaceViewにUI部品を被せる