Supporting Multiple Screens in                      Android                 Android多屏幕适配
Preface   Author:       Ren Fei. Android developer       Buding Mobile /       Innovation Works   Announcement:      ...
Origin of the problem              问题的由来
Fragmentation   上千种android设备。       不同的平台版本。       不同的屏幕尺寸、分辨率。       不同的输入方式。
Platform version   From v1.5 to v4.1.   8 main version. 14 sub version.
Screen sizes   2.6" HTC G16   3.2" 3.7" HTC G5/G7   4.0" 4.3" Samsung i9000/9100   7.0" 7.7" 8.9" Samsung Galaxy Tab ...
Screen Resolution iPhone   iPhone       320*480       640*960   iPad       1024*768       2048*1536
Screen Resolution Android   QVGA    240*320   WQVGA   240*400   HVGA    320*480   WVGA    480*800   FWVGA   480*854 ...
Screen RES. iPhone vs. Android
Android System Support             Android系统支持
What does android do ?
Some definition   Screen resolution       480*800   Screen size       3.7"   Screen density       252dpi   DPI(dots...
Generalized SIZE/DPI   G.DPI:    hdpi/mdpi/ldpi/xhdpi   G.SIZE:   small/normal/large/xlarge
Generalized DPI definition         G.DPI               DPI      1 DP = ? px   ldpi (Low density)       120 dpi      0.75 m...
Generalized SIZE definition             G.SIZE              Qualifier(at least)             xlarge               960dp x 7...
Relationships   RES. + SIZE  DPI       DPI = RES. / SIZE   DPI  G.DPI       ?   SIZE  G.SIZE       ?
Some model   device       SIZE      G.SIZE    DPI     G.DPI   RES. px     RES. dp HTC wildfire   2.8 in     small   140dpi...
DPI  G.DPI   G.DPI 大部分等于真实DPI最临近的G.DPI。       如果DPI正好在两个G.DPI正中间怎么办?   G.DPI可能和DPI相差很多。       Samsung galaxy tab   G...
SIZE  G.SIZE   SIZE 和 G.SIZE 并没有很明显的关系。   G.SIZE是由RES.(dp) 定义的。       参考G.SIZE的下界限定。   RES.(px) + G.DPI  RES.(dp)  ...
Relationships   RES. + SIZE  DPI   DPI  G.DPI (mostly)   G.DPI + RES.  G.SIZE
Effect of G.DPI   Developers do not need to care about real density.   RES.(px). are aggregated to RES.(dp).       RES....
Density independence   根据G.DPI,系统将dp units和drawables换算调整为    适配设备的大小(px).   A Button (100*100dp) and a icon (48px*48px i...
Support general handset            如何支持普通手机?
Handset features   Small and Normal devices take over 90%.   These devices are nearly all handsets.
Handset qualifier   G.SIZE: small/normal   Default Orientation: portrait   RES.(dp): 426dp x 320dp - 640dp x 480dp.
How to support?   Develop a scalable app.       Use wrap_content, fill_parent.       Use dp not px.       Use LinearLa...
A simple demo                                    720*1280px                        540*960px   xhdpi            480*800px ...
Support more devices   (handset & tablet)        如何支持更多的设备?
The first guideline   Develop one app for all devices.       Tablets和Handsets没有明显的界限。       为不同的设备、分辨率开发不同的app耗费巨大且效果不佳...
Official Guidelines   Build your activity designs based on fragments   Use the action bar   Implement flexible layouts
Implement flexible layouts   How to implement flexible layouts in one app?       Official answer: Think like a web desig...
Responsive web design   Build something that works on any possible width or    device instead of something that works on ...
Media queries   Sample:       <link media="screen and (max-device-width: 800px)"        href=“common.css" />   Media qu...
Website demo   http://www.alistapart.com/d/responsive-web-    design/ex/ex-site-FINAL.html   3 media queries divide widt...
Responsive mobile design   Same content, same logical, but different    representation.       同样的内容,同样的逻辑,不同的展示方式。   Us...
Configuration qualifiers   Screen Size:       small/normal/large/xlarge   Density:       ldpi/mdpi/hdpi/xhdpi…   Orie...
New screen size qualifiers   Smallest Width       sw600dp   Available Width       w600dp   Available height       h6...
Web design vs Android design   CSS vs Layout   CSS pixel vs Dip   Ems vs Sp   CSS3 media query vs Configuration qualif...
App demos   IOSched2011   IOSched2012   Google Play
IOSched2011   3 fragments   4 layouts
IOSched2011   layout/   layout-land/
IOSched2011   layout-xlarge-land-v11/   layout-xlarge-v11
IOSched2012   4 fragments   4 layouts
IOSched2012
IOSched2012   layout/   layout-land/
IOSched2012   layout-large-v11/   layout-large-    land-v11/
Google Play   Version: 3.4.4   4 layouts   generic_details.xml
Google Play   layout/   layout-land/
Google Play   layout-w600dp-h540dp/   layout-w800dp-    h540dp/
UI Design Patterns           UI设计模式
Android UI design patterns   Design pattern       对于一些普遍出现的问题的通用解决方法。   成熟的UI patterns能在不同的设备环境下自我调节。   Here we introd...
Action Bar   Replace the old TitleBar.   Many functions:       Menu       Search       Navigation           Tab     ...
Action Bar   Navigation(Tab)
Action Bar   Navigation(Spinner)/Split Action Bar/Action Mode
Action Bar
Workspace   A scrollable TabView.   Could combine with ActionBar.
Workspace
Dashboard   Acted as the landing page and holds all main    functions.
Dashboard
Slide navigation   Could replace the Dashboard.   Make the navigation easier.   Appearance is better in tablets.
Slide navigation
Conclusion   Android系统实现的Density Independence 在多屏幕    适配中担当了很重要的角色。   在一个app中实现灵活、动态的布局。       think like a web designe...
The EndThanks for watching
Contact 欢迎各种交流与切磋 @Renfei Email:renfei@buding.cn 期待你的加入,与布丁一起创造、成长! Welcome to Buding Mobile(布丁移动) Contact:hr@buding.cn
Reference   http://android-developers.blogspot.com/   https://developer.android.com/   http://www.pushing-pixels.org/ ...
Q&A   Email: renfei@buding.cn
Other
Most of small/normal devices are handsets   ∵      RES.(px) = DPI * SIZE          RES.(px) = RES.(dp) * G.DPI / 160   A...
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery
Upcoming SlideShare
Loading in …5
×

Supporting multi screen in android cn

3,312 views

Published on

Supporting multi-screen in android cn

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,312
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Supporting multi screen in android cn

  1. 1. Supporting Multiple Screens in Android Android多屏幕适配
  2. 2. Preface Author:  Ren Fei. Android developer  Buding Mobile / Innovation Works Announcement:  本slide内容全部来自互联网,以及我自己的一点臆想,如 有错误,欢迎随便指出。
  3. 3. Origin of the problem 问题的由来
  4. 4. Fragmentation 上千种android设备。  不同的平台版本。  不同的屏幕尺寸、分辨率。  不同的输入方式。
  5. 5. Platform version From v1.5 to v4.1. 8 main version. 14 sub version.
  6. 6. Screen sizes 2.6" HTC G16 3.2" 3.7" HTC G5/G7 4.0" 4.3" Samsung i9000/9100 7.0" 7.7" 8.9" Samsung Galaxy Tab 10.1" Moto Xoom …..
  7. 7. Screen Resolution iPhone iPhone  320*480  640*960 iPad  1024*768  2048*1536
  8. 8. Screen Resolution Android QVGA 240*320 WQVGA 240*400 HVGA 320*480 WVGA 480*800 FWVGA 480*854 SVGA 600*800 DVGA 960*640 WSVGA 1024*600 WXGA 1280*768 qHD 540*960 HD 1280*720 ……
  9. 9. Screen RES. iPhone vs. Android
  10. 10. Android System Support Android系统支持
  11. 11. What does android do ?
  12. 12. Some definition Screen resolution  480*800 Screen size  3.7" Screen density  252dpi DPI(dots per inch), xdpi, ydpi  DPI= RES. / SIZE DIP (Density-independent pixel)  px = dp * (dpi / 160)
  13. 13. Generalized SIZE/DPI G.DPI: hdpi/mdpi/ldpi/xhdpi G.SIZE: small/normal/large/xlarge
  14. 14. Generalized DPI definition G.DPI DPI 1 DP = ? px ldpi (Low density) 120 dpi 0.75 mdpi (Medium density) 160 dpi 1 hdpi (High density) 240 dpi 1.5xhdpi(Extra-high density) 320 dpi 2
  15. 15. Generalized SIZE definition G.SIZE Qualifier(at least) xlarge 960dp x 720dp large 640dp x 480dp normal 470dp x 320dp small 426dp x 320dp Android does not currently support screens smaller than small screens.
  16. 16. Relationships RES. + SIZE  DPI  DPI = RES. / SIZE DPI  G.DPI  ? SIZE  G.SIZE  ?
  17. 17. Some model device SIZE G.SIZE DPI G.DPI RES. px RES. dp HTC wildfire 2.8 in small 140dpi ldpi 240*320 320*428dp HTC hero 3.2 in normal 180dpi mdpi 320*480 320*480dp HTC desire 3.7 in normal 252dpi hdpi 480*800 320*533dp Dell Streak 5.0 in large 186dp mdpi 480*800 480*800dpHTC sensation 4.3 in normal 256dpi hdpi 540*960 360*640dp Galaxy note 5.3 in normal 280dpi xhdpi 800*1280 400*640dp HTC Flyer 7.0 in large 170dpi mdpi 600*1024 600*1024dp Galaxy tab 7.0 in normal 170dpi hdpi 600*1024 400*682dp Xoom 10.1 in xlarge 150dpi mdpi 800*1280 800*1280dp
  18. 18. DPI  G.DPI G.DPI 大部分等于真实DPI最临近的G.DPI。  如果DPI正好在两个G.DPI正中间怎么办? G.DPI可能和DPI相差很多。  Samsung galaxy tab G.DPI是由手机厂商定义的。  选择标准是使新的设备能最好的适用于现有app。
  19. 19. SIZE  G.SIZE SIZE 和 G.SIZE 并没有很明显的关系。 G.SIZE是由RES.(dp) 定义的。  参考G.SIZE的下界限定。 RES.(px) + G.DPI  RES.(dp)  G.SIZE
  20. 20. Relationships RES. + SIZE  DPI DPI  G.DPI (mostly) G.DPI + RES.  G.SIZE
  21. 21. Effect of G.DPI Developers do not need to care about real density. RES.(px). are aggregated to RES.(dp).  RES.(dp) has a much smaller range. device G.SIZE G.DPI RES. px RES. dp HTC wildfire small ldpi 240*320 320*428dp HTC hero normal mdpi 320*480 320*480dp HTC desire normal hdpi 480*800 320*533dp HTC sensation normal hdpi 540*960 360*640dp Galaxy note normal xhdpi 800*1280 400*640dp Galaxy tab normal hdpi 600*1024 400*682dp
  22. 22. Density independence 根据G.DPI,系统将dp units和drawables换算调整为 适配设备的大小(px). A Button (100*100dp) and a icon (48px*48px in mdpi) Go back to see first demo.
  23. 23. Support general handset 如何支持普通手机?
  24. 24. Handset features Small and Normal devices take over 90%. These devices are nearly all handsets.
  25. 25. Handset qualifier G.SIZE: small/normal Default Orientation: portrait RES.(dp): 426dp x 320dp - 640dp x 480dp.
  26. 26. How to support? Develop a scalable app.  Use wrap_content, fill_parent.  Use dp not px.  Use LinearLayout/RelativeLayout, not AbsoluteLayout.  Provide different drawables for different dpi.  Use more 9-patch drawable.  …
  27. 27. A simple demo 720*1280px 540*960px xhdpi 480*800px hdpi320*480px hdpimdpi
  28. 28. Support more devices (handset & tablet) 如何支持更多的设备?
  29. 29. The first guideline Develop one app for all devices.  Tablets和Handsets没有明显的界限。  为不同的设备、分辨率开发不同的app耗费巨大且效果不佳。 Anti-example:
  30. 30. Official Guidelines Build your activity designs based on fragments Use the action bar Implement flexible layouts
  31. 31. Implement flexible layouts How to implement flexible layouts in one app?  Official answer: Think like a web designer.
  32. 32. Responsive web design Build something that works on any possible width or device instead of something that works on all current widths and devices.  与其为当前所有设备、大小做支持,不如去支持所有可能 出现的情况。 Use css3 media queries. Usually combine with fluid web design.
  33. 33. Media queries Sample:  <link media="screen and (max-device-width: 800px)" href=“common.css" /> Media queries contain two components:  A media type. (screen, print)  A media feature(max-device-width) and query value(800px). Use media queries to filter css depend on device info.
  34. 34. Website demo http://www.alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html 3 media queries divide width to 4 part. @media (max-width: 400px) @media (max-width: 600px) @media (min-width: 1300px) Web Gallery
  35. 35. Responsive mobile design Same content, same logical, but different representation.  同样的内容,同样的逻辑,不同的展示方式。 Use configuration qualifiers to provide different layout for different devices.
  36. 36. Configuration qualifiers Screen Size:  small/normal/large/xlarge Density:  ldpi/mdpi/hdpi/xhdpi… Orientation:  port/land Platform version:  v3/v4/v11/v13… Language:  en/fr…
  37. 37. New screen size qualifiers Smallest Width  sw600dp Available Width  w600dp Available height  h600dp
  38. 38. Web design vs Android design CSS vs Layout CSS pixel vs Dip Ems vs Sp CSS3 media query vs Configuration qualifiers Fluid web design vs Scalable design Responsive web design vs Responsive mobile design
  39. 39. App demos IOSched2011 IOSched2012 Google Play
  40. 40. IOSched2011 3 fragments 4 layouts
  41. 41. IOSched2011 layout/ layout-land/
  42. 42. IOSched2011 layout-xlarge-land-v11/ layout-xlarge-v11
  43. 43. IOSched2012 4 fragments 4 layouts
  44. 44. IOSched2012
  45. 45. IOSched2012 layout/ layout-land/
  46. 46. IOSched2012 layout-large-v11/ layout-large- land-v11/
  47. 47. Google Play Version: 3.4.4 4 layouts generic_details.xml
  48. 48. Google Play layout/ layout-land/
  49. 49. Google Play layout-w600dp-h540dp/ layout-w800dp- h540dp/
  50. 50. UI Design Patterns UI设计模式
  51. 51. Android UI design patterns Design pattern  对于一些普遍出现的问题的通用解决方法。 成熟的UI patterns能在不同的设备环境下自我调节。 Here we introduce some useful patterns.  Action Bar  Workspace  Dashboard  Slide navigation
  52. 52. Action Bar Replace the old TitleBar. Many functions:  Menu  Search  Navigation  Tab  Spinner  Up  Action Mode  Split Action Bar
  53. 53. Action Bar Navigation(Tab)
  54. 54. Action Bar Navigation(Spinner)/Split Action Bar/Action Mode
  55. 55. Action Bar
  56. 56. Workspace A scrollable TabView. Could combine with ActionBar.
  57. 57. Workspace
  58. 58. Dashboard Acted as the landing page and holds all main functions.
  59. 59. Dashboard
  60. 60. Slide navigation Could replace the Dashboard. Make the navigation easier. Appearance is better in tablets.
  61. 61. Slide navigation
  62. 62. Conclusion Android系统实现的Density Independence 在多屏幕 适配中担当了很重要的角色。 在一个app中实现灵活、动态的布局。  think like a web designer 遵从系统的guideline,尽可能多的使用成熟的UI patterns.
  63. 63. The EndThanks for watching
  64. 64. Contact 欢迎各种交流与切磋 @Renfei Email:renfei@buding.cn 期待你的加入,与布丁一起创造、成长! Welcome to Buding Mobile(布丁移动) Contact:hr@buding.cn
  65. 65. Reference http://android-developers.blogspot.com/ https://developer.android.com/ http://www.pushing-pixels.org/ http://www.androiduipatterns.com/ http://androidniceties.tumblr.com/ http://en.wikipedia.org/ http://www.alistapart.com/articles/responsive-web- design/ http://opensignalmaps.com/reports/fragmentation.ph p
  66. 66. Q&A Email: renfei@buding.cn
  67. 67. Other
  68. 68. Most of small/normal devices are handsets ∵ RES.(px) = DPI * SIZE RES.(px) = RES.(dp) * G.DPI / 160 ASSUME G.DPI ≈ DPI ∴ RES.(dp) ≈ SIZE * 160 ∵ normal 的上界是640dp x 480dp 即一个SIZE ≈ 5" (4" * 3")的设备 ∴ normal设备的SIZE大部分小于5 in ∴ normal设备大部分为手机设备 Finish
  69. 69. Web demo gallery
  70. 70. Web demo gallery
  71. 71. Web demo gallery
  72. 72. Web demo gallery
  73. 73. Web demo gallery
  74. 74. Web demo gallery

×