【幻灯片分享】Android在多屏幕、多设备上的适配 | 布丁 任斐 | Android DevCamp
安卓热点话题总结性剖析：《Android在多屏幕、多设备上的适配》 | Android DevCamp
话题简介：对于安卓多屏幕和多设备适配问题，早在2010年的Google IO大会，就有专门探讨过。这些年来，对于这个普遍存在的问题，Android官方文档并没有给出明确的答案，而各类草根评论，对于这个问题的阐述以及给出的解决方案，也都是众说纷纭，仁者见仁，智者见智。本演讲将从应用开发的角度，讨论在Android应用程序开发中，面对众多 Android 设备可能遇到的适配问题及解决方案，对众多的思想进行归纳总结，对一些案例进行剖析，并探讨在寻找最优解决方案过程中，应该注意和规避的一些问题。
演讲嘉宾：任斐，布丁移动资深安卓开发工程师，主要负责布丁优惠券、布丁电影票等多款产品 Android 前端的开发工作。
【幻灯片在线观看】*：
Android在多屏幕、多设备上的适配 | 布丁 任斐 from
Shining @DevCamp
【幻灯片下载页面】： 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: } } 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：[email protected] 期待你的加入，与布丁⼀一起创造、成长！ Welcome to Buding Mobile（布丁移动） Contact：[email protected]
- 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: [email protected]
- 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