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

mmdev

浏览: 12890143 次
性别:
来自: 大连

最近访客更多访客>>

jklwan

u012363178

anttu

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15973)

社区版块

存档分类

2013-03 ( 14)
2013-02 ( 88)
2013-01 ( 196)
更多存档...

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

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

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

推荐指数：4星半

推荐理由：非常全面的总结，从问题的阐述到解决方案的剖析都很有料，全英文的幻灯片内容相当翔实，值得收藏和反复学习。

不足之处：现场受时间影响，讲师的语速有些快，很多与会者未能很好的消化。

现场评分：3.9

【讲师现场靓照】

【幻灯片在线观看】*：

Android在多屏幕、多设备上的适配 | 布丁任斐 from Shining @DevCamp

备注：* 因为炫姐姐对SlideShare这一平台的偏爱，尽管需要使点小技巧才能上传分享，但是炫姐姐还是坚持选择了这一功能强大却简洁好用的平台。一来对国外这些开发出优秀的工具和平台、造福于互联网和人类的团队表示致敬，二来则是对国内对于这些优秀的工具和平台的限制表示一下立场。读者如果不能正常浏览，那么需要像炫姐姐一样用点小技巧。而对于那些还是不知道炫姐姐在说什么的小白读者，可以移步到这里查询原因。

【幻灯片下载页面】： 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