1. マルチスクリーン対応
最近のアプリの傾向

2. あんざいゆき
• blog : Y.A.M の雑記帳
• y-anz-m.blogspot.com
• twitter : @yanzm （やんざむ）
• Android女子部副部長
• uPhyca Inc. (株式会社ウフィカ)

4. 最近のアプリの傾向

5. Drawer UI
Navigation として利用

6. Drawer UI
まだまだあるよ Navigation として利用

7. Drawer UI
Navigation 以外としても

8. Drawer UI
Navigation → 左側で ー が3つのアイコン
Navigation 以外 → 右側で個別のアイコン
Navigation の場合グレーの背景が多い
SNS など、機能や画面数が多いアプリに適して
いる

9. Drawer UI
Navigation が上にでるパターン
← Google Current
メインの
Navigation は下か
らでるDrawer
記事の Navigation
は上にでる Drawer

10. ActionBar
2.x でも ActionBar を表示するアプリがほとんど
→ ActionBarSherlock 使おう
→
ActionBarSher
lock を使って
なさそうな
のもある

11. ActionBar の UP
みんなやってます。面倒くさがらずやりましょう

12. 白背景
黒背景 → クールだけど難しい、アプリのテーマカ
ラーをあまり活かせない
白背景 → 割と簡単にスタイリッシュにできる、色
をのせやすい

13. 白背景
ただの白じゃない

14. 白背景
ただの白じゃない

15. 白背景
ただの白

16. ヘルプポップアップ
初回にオーバーレイで使い方を表示する
← 2年前くらい
から流行ってた
パターン

17. ヘルプポップアップ
パーツの上に丸を出すのが最近のはやり

18. チュートリアル
スワイプ切り替えが多い

19. オリジナル Progress
昔から 4sq は凝ってたよね

20. ショーケース
Web ではすでにおなじみ
写真（だけ）をスワイプして切り替える
←
Indicator
ほしい

21. ログインフォームを上に寄せる
キーボードがでても隠れないようになっている

22. マルチスクリーン対応
マルチスクリーン対応

23. ANDROID はデバイスの画面サ
イズがたくさんあって大変？

24. ANDROID はデバイスの画面サ
イズがたくさんあって大変
Android の流儀を無視してると

25. px

26. px

27. DIP, DP について“ちゃんと”理解する

28. DIP, DP で考える
• dip, dp : Density-independent Pixels
• 画面のピクセル密度に基づいて抽象的な単位
• 画面設計する場合は pixel ではなく dip, dp で行
うこと！

29. 1DIPって何PXなの？
• デバイスの dpi 解像度（ピクセル密度）によっ
て異なる
• デバイスの dpi が5種類（ldpi, mdpi, hdpi, xhdpi,
xxhdpi）のどれに当てはまるかによる

30. LDPI, MDPI, HDPI, XHDPI,XXHDPI
ldpi 約120dpi 1 dip = 0.75 px
mdpi 約160dpi 1 dip = 1 px
hdpi 約240dpi 1 dip = 1.5 px
xhdpi 約320dpi 1 dip = 2 px
xxhdpi 約480dpi 1 dip = 3 px
• ldpi : mdpi : hdpi : xhdpi : xxhdpi = 3 : 4 : 6 : 8 : 12

31. DP 単位の画面サイズを求める
• 4.0 inch で WVGA (800 x 480)
• sqrt(800^2 + 480^2) / 4 = 2.33dpi → hdpi
• hdpi : 1dip = 1.5 px
• 800 px = 533 dip, 480 px = 320dip
いろんなデバイス
→ http://bit.ly/Rl4XAh
について調べた

32. 抑えておくべき画面サイズ
（ハンドセット）
• 320 dp x 480 dp 320 dp x 480 dp に収まるようにする
ただし、最近は 320 dp x 533dp 以上
• 320 dp x 533 dp のデバイスしか出ていない
• 320 dp x 569 dp これ以外のサイズはマイノリティな
• 360 ので、保証対象から外す方が安全
dp x 640 dp

33. • 320dp x 427dp
• 320 dp x 480 dp
• 320 dp x 533 dp
• 320 dp x 569 dp
• 360 dp x 640 dp

34. 拡縮領域を意識する

35. 設計時のポイント
• 小さい画面サイズに合わせてつくる
• 特に横幅は必ず > 320dip
• 縦、横、それぞれどこを拡大・縮小させるか決める
（拡縮できる部分は必ず設ける！）
• よくある困った例：画面ぴったりに設計したら小さ
い画面で切れる、大きい画面で左上によってしまう

36. 拡縮レイアウト
• 余白分配
• LinearLayout で layout_weight を活用
• 相対配置
• RelativeLayout で toRightOf, toLeftOf, align... を活用
• スクロールさせる
• ListView, GridView, ScrollView...
• TextView で折り返し

37. 横方向の拡大縮小

38. LINEARLAYOUT
• パーツを縦または横に並べる
• android:layout_weight で余白を分配できる
• 拡縮してもパーツの大きさの比率が一定

39. それぞれに 保存に layout_weight = “1”
layout-weight = “1” チェックインに layout_weight = “2”

40. RELATIVELAYOUT
• パーツを相対位置で並べる
• オーバーレイ以外でも有用
• 拡縮する部分が1カ所の場合に使える
• ListView の1行のレイアウトに最適

41. • アイコンの大きさは固定
• ボタンは最小さいず
• 残りをタイトルと詳細に
• 詳細は TextView は折り返し

42. <RelativeLayout>
<ImageView
android:layout_alignParentLeft=”true”
android:id=”@+id/left_icon />
<ImageView
android:layout_alignParentRight=”true”
android:id=”@+id/button” />
<TextView
android:toRightOf=”@+id/left_icon”
android:toLeftOf=”@+id/button” />
</RelativeLayout>

44. 縦方向の拡大縮小

45. 縦方向の拡縮
• ListView や GridView, ScrollView などを活用
• オリジナルのダイアログは注意が必要
• 高さが固定のダイアログ
• 縦の短いデバイスでも大丈夫？
• 480dip でも収まるようにする

46. 全体スクロール VS 一部スクロール
スクロールさせる？ 一部スクロール

47. RELATIVELAYOUT で縦拡縮
• 親の GroupView に対する相対位置で指定
• 残りの部分が拡縮される
• スクロールがない画面で有用

48. centerInParent
centerInParent で中心に配置
↓
周りの余白が拡大縮小
alignParentBottom
alignParentBottom で下部に配置

49. alignParentTop
alignParentBottom
alignParentBottom

50. 画面の周囲に接するサイズ固定の View から考える
<RelativeLayout>
<ImageView android:id=”@+id/thumb
android:layout_alignParentLeft=”true” />
<ImageView android:id=”@+id/horizontal
android:align_above=”@+id/thumb” />
<TextView android:id=”@+id/sub_title
android:align_above=”@+id/horizontal” />
<ImageView android:id=”@+id/star
android:align_above=”@+id/sub_title”
android:layout_alignParentRight=”true” />
<TextView android:id=”@+id/title
android:align_above=”@+id/sub_title”
android:toLeftOf=”@+id/star” />
</RelativeLayout>

51. パーツの大きさ

52. タップするパーツの大きさ
• タップできる領域は 7mm ∼ 9mm 必要
• Android のデザインガイドラインでは 48dip 以上が推
奨
• 48 dip が何mmになるかはデバイスによって異なる
• INFOBAR C01 (3.2in FWVGA hdpi) : 6mm
• Nexus One (3.7in WVGA hdpi) : 7mm
https://docs.google.com/spreadsheet/pub?
key=0At9tkpQpgWT2dGxTdlVhMXBiNWFmVG5NazZUd
GNtOWc&output=html

53. 48DIP単位の設計
• Navigation bar の高さ : 48dip
• デフォルトの ActionBar の高さ : 48dip
• デフォルトのタブの高さ : 48dip
• 48dip を単位として配置
• 余白は４の倍数にする 4, 8, 16... dip

54. 48dip

57. PADDING を活用する
• 余白を入れたいが、その部分も
タッチ領域にしたい
• 青 : padding の場合のタッチ領域
• 赤 : margin の場合のタッチ領域

58. TOUCHDELEGATE を活用する
• デザイン上 48dip の領域を確保で
きない（したくない）が、タッチ
領域は 48dip ほしい
• 仮想的なタッチ領域を作成
• 赤 : View の大きさ
• 青 : タッチで反応する領域

59. 画面サイズとリソース

60. 画面サイズに応じてレイアウトを変える
• dimen を使ってサイズを変える オススメ
• values-large, values-sw360dp, ...
オススメ
• style を使って配置方法を変える
• values-large, values-sw360dp, ...
• レイアウトファイルを変える
http://developer.android.com/guide/practices/
• layout-large, layout-sw360dp, ... screens_support.html#range
むやみにレイアウトファイルを分割するのはダメ！

61. レイアウトファイル分割の弊害
• 修正箇所が多くなる
• パーツの配置位置が変わったら？
• パーツの id が変わったら？
• テスト漏れを起こしやすい
どうしてレイアウトをサイズごとに変えたいのかを理解する

62. • 縦が小さい画面だとパーツが収まらない
• → dimen と small や notlong を使ってパーツの大きさや余白
を画面サイズに応じて変える
• 320dp x 427dp (small) や 320dp x 480dp 対応でよくある
• 横幅に対する文字サイズの大きさを同じにしたい
• → dimen と values-sw360dp を使って文字サイズを変える
• 横幅が 320dp と 360dp のハンドセット対応でよくある
sw**dp は Android 3.2 (API Level 13) からだが、 横幅が
360dp のハンドセットはほぼ 4.0 以降のデバイス

63. • Phone では画面サイズに合わせて、Tablet ではサイズ固定
• → style で layout-weight や layout-width, layout-height を画面サイ
ズに応じて変える
• タブレット対応でよくある
• タブレットでは 2 ペインにしたい
• レイアウトファイルを分割するしかないが...
• include を使って、分割部分は最小限に抑える！
• Fragment を使って、パーツ部分のレイアウトは共通化する

64. DIMEN を活用する
• リソースでサイズを指定できる
• values/dimens.xml
• values-small, values-sw360dp など画面サイズに応じて変えられる
• @dimen/hoge で指定
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_padding">8dip</dimen>
<dimen name="title_text_size">24dip</dimen>
</resources>
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

65. STYLE を活用する
• リソースで配置方法を指定できる
• values/styles.xml
• values-small, values-sw360dp など画面サイズに応じて変えられる
• @style/hoge で指定
<style name="ImageStyle">
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item> Phone
</style>
<style name="ImageStyle">
<item name="android:layout_width">400dip</item>
</style>
Tablet

66. ありがとうございました。