android在多屏幕、多设备上的适配 | 布丁 任斐
DESCRIPTION
安卓热点话题总结性剖析：《Android在多屏幕、多设备上的适配》 | Android DevCamp | 7月28日 北京 话题简介：对于安卓多屏幕和多设备适配问题，早在2010年的Google IO大会，就有专门探讨过。这些年来，对于这个普遍存在的问题，Android官方文档并没有给出明确的答案，而各类草根评论，对于这个问题的阐述以及给出的解决方案，也都是众说纷纭，仁者见仁，智者见智。本演讲将从应用开发的角度，讨论在Android应用程序开发中，面对众多 Android 设备可能遇到的适配问题及解决方案，对众多的思想进行归纳总结，对一些案例进行剖析，并探讨在寻找最优解决方案过程中，应该注意和规避的一些问题。 演讲嘉宾：任斐，布丁移动资深安卓开发工程师，主要负责布丁优惠券、布丁电影票等多款产品 Android 前端的开发工作。TRANSCRIPT
Android DevCamp
Produced by CSDN
Website:
http://devcamp.csdn.net/
Weibo:
http://weibo.com/cmdnclub/
Supporting Multiple Screens in Android
Android多屏幕适配
Preface} Author：
} Ren Fei. Android developer } Buding Mobile / Innovation Works
} Announcement： } 本slide内容全部来自互联网，以及我自己的⼀一点臆想，如有错误，欢迎随便指出。
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 } 10.1" Moto Xoom } …..
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 } SVGA 600*800 } DVGA 960*640 } WSVGA 1024*600 } WXGA 1280*768 } qHD 540*960 } HD 1280*720 } ……
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 per inch), xdpi, ydpi } DPI= RES. / SIZE
} DIP (Density-independent pixel) } px = dp * (dpi / 160)
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
mdpi (Medium density) 160 dpi 1
hdpi (High density) 240 dpi 1.5
xhdpi(Extra-high density) 320 dpi 2
Generalized SIZE definition
} Android does not currently support screens smaller than small screens.
G.SIZE Qualifier(at least)
xlarge 960dp x 720dp
large 640dp x 480dp
normal 470dp x 320dp
small 426dp x 320dp
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 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
DPI à G.DPI} G.DPI 大部分等于真实DPI最临近的G.DPI。
} 如果DPI正好在两个G.DPI正中间怎么办？
} G.DPI可能和DPI相差很多。 } Samsung galaxy tab
} G.DPI是由手机厂商定义的。 } 选择标准是使新的设备能最好的适用于现有app。
SIZE à G.SIZE} SIZE 和 G.SIZE 并没有很明显的关系。
} G.SIZE是由RES.(dp) 定义的。 } 参考G.SIZE的下界限定。
} RES.(px) + G.DPI à RES.(dp) à G.SIZE
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.(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
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.
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 LinearLayout/RelativeLayout, not AbsoluteLayout. } Provide different drawables for different dpi. } Use more 9-patch drawable. } …
A simple demo
320*480px mdpi 480*800px hdpi
540*960px hdpi 720*1280px xhdpi
Support more devices (handset & tablet)
如何支持更多的设备？
The first guideline} Develop one app for all devices.
} Tablets和Handsets没有明显的界限。 } 为不同的设备、分辨率开发不同的app耗费巨大且效果不佳。
} Anti-example:
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 designer.
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.
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.
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
Responsive mobile design} Same content, same logical, but different representation.
} 同样的内容，同样的逻辑，不同的展示方式。
} Use configuration qualifiers to provide different layout for different devices.
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…
New screen size qualifiers} Smallest Width
} sw600dp
} Available Width } w600dp
} Available height } h600dp
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
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 introduce some useful patterns. } Action Bar } Workspace } Dashboard } Slide navigation
Action Bar} Replace the old TitleBar. } Many functions:
} Menu } Search } Navigation
} Tab } Spinner } Up
} Action Mode } Split Action Bar
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 designer
} 遵从系统的guideline，尽可能多的使用成熟的UI
patterns.
The End
Thanks for watching
Contact
欢迎各种交流与切磋 @Renfei Email：[email protected] 期待你的加入，与布丁⼀一起创造、成长！ Welcome to Buding Mobile（布丁移动） Contact：[email protected]
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
Q&A} Email: [email protected]
Other
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
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery
Web demo gallery