【幻灯片分享】Android在多屏幕、多设备上的适配 | 布丁 任斐 | Android DevCamp

安卓热点话题总结性剖析：《Android在多屏幕、多设备上的适配》 | Android DevCamp

话题简介：对于安卓多屏幕和多设备适配问题，早在2010年的Google IO大会，就有专门探讨过。这些年来，对于这个普遍存在的问题，Android官方文档并没有给出明确的答案，而各类草根评论，对于这个问题的阐述以及给出的解决方案，也都是众说纷纭，仁者见仁，智者见智。本演讲将从应用开发的角度，讨论在Android应用程序开发中，面对众多 Android 设备可能遇到的适配问题及解决方案，对众多的思想进行归纳总结，对一些案例进行剖析，并探讨在寻找最优解决方案过程中，应该注意和规避的一些问题。

演讲嘉宾：任斐，布丁移动资深安卓开发工程师，主要负责布丁优惠券、布丁电影票等多款产品 Android 前端的开发工作。

【幻灯片在线观看】*：

【幻灯片下载页面】： Android DevCamp幻灯片下载：Android在多屏幕、多设备上的适配 | 布丁 任斐 -来自CSDN下载频道（不需要积分，自由下载）

• 1. Android DevCampProduced by CSDN
• 2. Supporting Multiple Screens in Android Android多屏幕适配
• 3. Preface}?? Author： }?? Ren Fei. Android developer }?? Buding Mobile / Innovation Works}?? Announcement： }?? 本slide内容全部来自互联网，以及我自己的?一点臆想，如 有错误，欢迎随便指出。
• 4. Origin of the problem 问题的由来
• 5. Fragmentation}?? 上千种android设备。 }?? 不同的平台版本。 }?? 不同的屏幕尺寸、分辨率。 }?? 不同的输入方式。
• 6. Platform version}?? From v1.5 to v4.1.}?? 8 main version. 14 sub version.
• 7. 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}?? …..
• 8. Screen Resolution iPhone}?? iPhone }?? 320*480 }?? 640*960}?? iPad }?? 1024*768 }?? 2048*1536
• 9. 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}?? ……
• 10. Screen RES. iPhone vs. Android
• 11. Android System Support Android系统支持
• 12. What does android do ?
• 13. 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)
• 14. Generalized SIZE/DPI}?? G.DPI: hdpi/mdpi/ldpi/xhdpi}?? G.SIZE: small/normal/large/xlarge
• 15. 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
• 16. 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.
• 17. Relationships}?? RES. + SIZE à? DPI }?? DPI = RES. / SIZE}?? DPI à? G.DPI }?? ?}?? SIZE à? G.SIZE }?? ?
• 18. 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
• 19. DPI à? G.DPI}?? G.DPI 大部分等于真实DPI最临近的G.DPI。 }?? 如果DPI正好在两个G.DPI正中间怎么办？}?? G.DPI可能和DPI相差很多。 }?? Samsung galaxy tab}?? G.DPI是由手机厂商定义的。 }?? 选择标准是使新的设备能最好的适用于现有app。
• 20. SIZE à? G.SIZE}?? SIZE 和 G.SIZE 并没有很明显的关系。}?? G.SIZE是由RES.(dp) 定义的。 }?? 参考G.SIZE的下界限定。}?? RES.(px) + G.DPI à? RES.(dp) à? G.SIZE
• 21. Relationships}?? RES. + SIZE à? DPI}?? DPI à? G.DPI (mostly)}?? G.DPI + RES. à? G.SIZE
• 22. 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
• 23. 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.
• 24. Support general handset 如何支持普通手机？
• 25. Handset features}?? Small and Normal devices take over 90%.}?? These devices are nearly all handsets.
• 26. Handset qualifier}?? G.SIZE: small/normal}?? Default Orientation: portrait}?? RES.(dp): 426dp x 320dp - 640dp x 480dp.
• 27. 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. }?? …
• 28. A simple demo 720*1280px xhdpi 540*960px hdpi 480*800px hdpi320*480px mdpi
• 29. Support more devices (handset & tablet) 如何支持更多的设备？
• 30. The first guideline}?? Develop one app for all devices. }?? Tablets和Handsets没有明显的界限。 }?? 为不同的设备、分辨率开发不同的app耗费巨大且效果不佳。}?? Anti-example:
• 31. Official Guidelines}?? Build your activity designs based on fragments}?? Use the action bar}?? Implement flexible layouts
• 32. Implement flexible layouts}?? How to implement flexible layouts in one app? }?? Official answer: Think like a web designer.
• 33. 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.
• 34. 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.
• 35. 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
• 36. Responsive mobile design}?? Same content, same logical, but different representation. }?? 同样的内容，同样的逻辑，不同的展示方式。}?? Use configuration qualifiers to provide different layout for different devices.
• 37. 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…
• 38. New screen size qualifiers}?? Smallest Width }?? sw600dp}?? Available Width }?? w600dp}?? Available height }?? h600dp
• 39. 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
• 40. App demos}?? IOSched2011}?? IOSched2012}?? Google Play
• 41. IOSched2011}?? 3 fragments}?? 4 layouts
• 42. IOSched2011}?? layout/ layout-land/
• 43. IOSched2011}?? layout-xlarge-land-v11/ layout-xlarge-v11
• 44. IOSched2012}?? 4 fragments}?? 4 layouts
• 45. IOSched2012
• 46. IOSched2012}?? layout/}?? layout-land/
• 47. IOSched2012}?? layout-large-v11/ layout-large-land-v11/
• 48. Google Play}?? Version: 3.4.4}?? 4 layouts}?? generic_details.xml
• 49. Google Play}?? layout/ layout-land/
• 50. Google Play}?? layout-w600dp-h540dp/ layout-w800dp-h540dp/
• 51. UI Design Patterns UI设计模式
• 52. Android UI design patterns}?? Design pattern }?? 对于?一些普遍出现的问题的通用解决方法。}?? 成熟的UI patterns能在不同的设备环境下自我调节。}?? Here we introduce some useful patterns. }?? Action Bar }?? Workspace }?? Dashboard }?? Slide navigation
• 53. Action Bar}?? Replace the old TitleBar.}?? Many functions: }?? Menu }?? Search }?? Navigation }?? Tab }?? Spinner }?? Up }?? Action Mode }?? Split Action Bar
• 54. Action Bar}?? Navigation(Tab)
• 55. Action Bar}?? Navigation(Spinner)/Split Action Bar/Action Mode
• 56. Action Bar
• 57. Workspace}?? A scrollable TabView.}?? Could combine with ActionBar.
• 58. Workspace
• 59. Dashboard}?? Acted as the landing page and holds all main functions.
• 60. Dashboard
• 61. Slide navigation}?? Could replace the Dashboard.}?? Make the navigation easier.}?? Appearance is better in tablets.
• 62. Slide navigation
• 63. Conclusion}?? Android系统实现的Density Independence 在多屏幕适 配中担当了很重要的角色。}?? 在?一个app中实现灵活、动态的布局。 }?? think like a web designer}?? 遵从系统的guideline，尽可能多的使用成熟的UI patterns.
• 64. The EndThanks for watching
• 65. Contact 欢迎各种交流与切磋 @Renfei Email：renfei@buding.cn 期待你的加入，与布丁?一起创造、成长！ Welcome to Buding Mobile（布丁移动） Contact：hr@buding.cn
• 66. 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.php
• 67. Q&A}?? Email: renfei@buding.cn
• 68. Other
• 69. 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
• 70. Web demo gallery
• 71. Web demo gallery
• 72. Web demo gallery
• 73. Web demo gallery
• 74. Web demo gallery
• 75. Web demo gallery