Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
Destacado
Destacado (20)
Similar a マルチスクリーン対応と最近のアプリの傾向
Similar a マルチスクリーン対応と最近のアプリの傾向 (20)
Más de Yuki Anzai
Más de Yuki Anzai (10)
マルチスクリーン対応と最近のアプリの傾向
- 1. マルチスクリーン対応 最近のアプリの傾向
- 2. あんざいゆき • blog : Y.A.M の雑記帳 • y-anz-m.blogspot.com • twitter : @yanzm （やんざむ） • Android女子部副部長 • uPhyca Inc. (株式会社ウフィカ)
- 4. 最近のアプリの傾向
- 6. 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 を使って なさそうな のもある
- 12. 白背景 黒背景 → クールだけど難しい、アプリのテーマカ ラーをあまり活かせない 白背景 → 割と簡単にスタイリッシュにできる、色 をのせやすい
- 13. 白背景 ただの白じゃない
- 14. 白背景 ただの白じゃない
- 15. 白背景 ただの白
- 16. ヘルプポップアップ 初回にオーバーレイで使い方を表示する ← 2年前くらい から流行ってた パターン
- 19. オリジナル Progress 昔から 4sq は凝ってたよね
- 20. ショーケース Web ではすでにおなじみ 写真（だけ）をスワイプして切り替える ← Indicator ほしい
- 24. ANDROID はデバイスの画面サ イズがたくさんあって大変 Android の流儀を無視してると
- 25. px
- 26. px
- 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. ありがとうございました。