安卓热点话题总结性剖析：《Android在多屏幕、多设备上的适配》 | Android DevCamp | 7月28日 北京 话题简介：对于安卓多屏幕和多设备适配问题，早在2010年的Google IO大会，就有专门探讨过。这些年来，对于这个普遍存在的问题，Android官方文档并没有给出明确的答案，而各类草根评论，对于这个问题的阐述以及给出的解决方案，也都是众说纷纭，仁者见仁，智者见智。本演讲将从应用开发的角度，讨论在Android应用程序开发中，面对众多 Android 设备可能遇到的适配问题及解决方案，对众多的思想进行归纳总结，对一些案例进行剖析，并探讨在寻找最优解决方案过程中，应该注意和规避的一些问题。 演讲嘉宾：任斐，布丁移动资深安卓开发工程师，主要负责布丁优惠券、布丁电影票等多款产品 Android 前端的开发工作。

1. Android DevCamp
Produced by CSDN
Website:
http://devcamp.csdn.net/
Weibo:
http://weibo.com/cmdnclub/

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.5
xhdpi(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*800dp
HTC 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 hdpi
320*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 End
Thanks 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