• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Android在多屏幕、多设备上的适配 | 布丁 任斐
 

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

on

  • 2,467 views

安卓热点话题总结性剖析:《Android在多屏幕、多设备上的适配》 | Android DevCamp | 7月28日 北京 ...

安卓热点话题总结性剖析:《Android在多屏幕、多设备上的适配》 | Android DevCamp | 7月28日 北京

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

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

Statistics

Views

Total Views
2,467
Views on SlideShare
2,322
Embed Views
145

Actions

Likes
3
Downloads
37
Comments
0

6 Embeds 145

http://blog.csdn.net 82
http://rritw.com 46
http://www.myexception.cn 13
http://www.tuicool.com 2
http://webcache.googleusercontent.com 1
http://www.010cnc.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Android在多屏幕、多设备上的适配 | 布丁 任斐 Android在多屏幕、多设备上的适配 | 布丁 任斐 Presentation Transcript

    • Android DevCampProduced by CSDNWebsite: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.5xhdpi(Extra-high density) 320 dpi 2
    • 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.
    • 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*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
    • 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 720*1280px xhdpi 540*960px hdpi 480*800px hdpi320*480px mdpi
    • 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 EndThanks for watching
    • Contact 欢迎各种交流与切磋 @Renfei Email:renfei@buding.cn 期待你的加入,与布丁⼀一起创造、成长! Welcome to Buding Mobile(布丁移动) Contact:hr@buding.cn
    • 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: renfei@buding.cn
    • 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