Download as PDF, PPTX
More Related Content
![[Droidcon]Developing Apps for Android on 2.x/3.x/4.x](https://cdn.slidesharecdn.com/ss_thumbnails/droidconandroiddevelopingapptipskambarakenichirevised-121101233658-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[ABC2012S]Android2x/3x/4x対応アプリ開発Tips](https://cdn.slidesharecdn.com/ss_thumbnails/abc2012sandroid234kanbara-120324082804-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
マルチスクリーン対応と最近のアプリの傾向
- 1. マルチスクリーン対応 最近のアプリの傾向
- 2. あんざいゆき • blog :Y.A.M の雑記帳 • y-anz-m.blogspot.com • twitter : @yanzm （やんざむ） • Android女子部副部長 • uPhyca Inc. (株式会社ウフィカ)
- 4.
- 5.
- 6.
- 7.
- 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.
- 12. 白背景 黒背景 → クールだけど難しい、アプリのテーマカ ラーをあまり活かせない 白背景→ 割と簡単にスタイリッシュにできる、色 をのせやすい
- 13.
- 14.
- 15.
- 16. ヘルプポップアップ 初回にオーバーレイで使い方を表示する ← 2年前くらい から流行ってた パターン
- 17.
- 18.
- 19. オリジナル Progress 昔から 4sqは凝ってたよね
- 20. ショーケース Web ではすでにおなじみ 写真（だけ）をスワイプして切り替える ← Indicator ほしい
- 21.
- 22.
- 23.
- 24. ANDROID はデバイスの画面サ イズがたくさんあって大変 Androidの流儀を無視してると
- 25.
- 26.
- 27.
- 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 x427dp • 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.
- 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.