More Related Content
Similar to マルチスクリーン対応と最近のアプリの傾向 (20)
More from Yuki Anzai (10)
マルチスクリーン対応と最近のアプリの傾向
- 2. あんざいゆき
• blog : Y.A.M の雑記帳
• y-anz-m.blogspot.com
• twitter : @yanzm (やんざむ)
• Android女子部副部長
• uPhyca Inc. (株式会社ウフィカ)
- 8. Drawer UI
Navigation → 左側で ー が3つのアイコン
Navigation 以外 → 右側で個別のアイコン
Navigation の場合グレーの背景が多い
SNS など、機能や画面数が多いアプリに適して
いる
- 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
- 35. 設計時のポイント
• 小さい画面サイズに合わせてつくる
• 特に横幅は必ず > 320dip
• 縦、横、それぞれどこを拡大・縮小させるか決める
(拡縮できる部分は必ず設ける!)
• よくある困った例:画面ぴったりに設計したら小さ
い画面で切れる、大きい画面で左上によってしまう
- 36. 拡縮レイアウト
• 余白分配
• LinearLayout で layout_weight を活用
• 相対配置
• RelativeLayout で toRightOf, toLeftOf, align... を活用
• スクロールさせる
• ListView, GridView, ScrollView...
• TextView で折り返し
- 39. それぞれに 保存に layout_weight = “1”
layout-weight = “1” チェックインに layout_weight = “2”
- 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>
- 45. 縦方向の拡縮
• ListView や GridView, ScrollView などを活用
• オリジナルのダイアログは注意が必要
• 高さが固定のダイアログ
• 縦の短いデバイスでも大丈夫?
• 480dip でも収まるようにする
- 48. centerInParent
centerInParent で中心に配置
↓
周りの余白が拡大縮小
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>
- 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の倍数にする 4, 8, 16... dip
- 57. PADDING を活用する
• 余白を入れたいが、その部分も
タッチ領域にしたい
• 青 : padding の場合のタッチ領域
• 赤 : margin の場合のタッチ領域
- 58. TOUCHDELEGATE を活用する
• デザイン上 48dip の領域を確保で
きない(したくない)が、タッチ
領域は 48dip ほしい
• 仮想的なタッチ領域を作成
• 赤 : View の大きさ
• 青 : タッチで反応する領域
- 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