UI 适配

SP,DP,PX
1、屏幕的物理尺寸:屏幕对角线的长度,比如3.5寸、3.7寸、4寸、7寸等

2、分辨率:屏幕总共能显示的像素点,如480*800

3、Density:每英寸像素点数,单位为dpi

    屏幕实际分辨率为240px*320pxdensity=120     屏幕实际分辨率为320px*480pxdensity=160     屏幕实际分辨率为480px*800pxdensity=240

4、设备无关像素dp:以160dpi为标准,在一个160dpi的屏幕上的1个物理像素作为设备无关像素的1个像素,即1dp

5、sp:针对于字体,Android设计了sp这个单位,这个于dp的不同在于,字体大小在dp的基础上,可以根据用户的偏好设置,相应调整字体大小。sp除了与密度无关之外,还于scale无关。

6、px:软件的单位点,设备相关的点

分辨率(总像素数)= 物理尺寸 × 像素密度

  • 比如一个3寸的屏幕,分辨率为240×320,那么密度为 开方(240^2+320^2)/3 约等于为133。
  • 再比如一个3.5寸的屏幕,分辨率为320x480,那么密度为 开方(320^2+480^2) / 3.5 约等于165.
  • 再比如一个3.5寸的屏幕,分辨率为480×800,那么密度为 开方(480^2+800^2)/3.5 约等于为194。
  • 在比如一个3.5寸的屏幕,分辨率为960x640,那么密度为 开方(960^2+640^2)/3.5 约等于329。
  • 再比如一个4寸的屏幕,分辨率为480x800,那么密度为 开方(480^2+800^2)/4 约等于233。

    过去,开发人员通常以像素为单位设计计算机用户界面。例如,定义一个宽度为300像素的表单字段,列之间的间距为5个像素,图标大小为16×16像素等。这样处理的问题在于,如果在一个每英寸点数(dpi)更高的新显示器上运行该程序,则用户界面会显得很小。在有些情况下,用户界面可能会小到难以看清内容。

针对屏幕的三个参数,分析如下:

  • 同样物理尺寸,分辨率不同,那么如果按照像素设计,就会产生,分辨率大的那个,图像很小.物理尺寸就会很小.
  • 同样分辨率,不同物理尺寸,如果按钮找像素设计,实际看起来的物理比例是一样的.
  • 看起来物理尺寸一样,不同分辨率,分辨率大的,屏幕尺寸就要大.
  • 看起来物理尺寸一样,不同屏幕尺寸,大尺寸的,就要像素多.
所以提出了设备无关像素的概念。
谷歌的策略:

当屏幕density=240时使用hdpi标签的资源;

当屏幕density=160时,使用mdpi标签的资源 ;

当屏幕density=120时,使用ldpi标签的资源

  1. public staticint dip2px(Context context,float dipValue){
  2. final float scale = context.getResources().getDisplayMetrics().density;
  3. return (int)(dipValue * scale +0.5f);
  4. }
  5. public staticint px2dip(Context context,float pxValue){
  6. final float scale = context.getResource().getDisplayMetrics().density;
  7. return (int)(pxValue / scale +0.5f);
  8. }
  9. public staticint dip2px(Context context,float dipValue){
  10. final float scale = context.getResources().getDisplayMetrics().density;
  11. return (int)(dipValue * scale +0.5f);
  12. }
  13. public staticint px2dip(Context context,float pxValue){
  14. final float scale = context.getResource().getDisplayMetrics().density;
  15. return (int)(pxValue / scale +0.5f);
  16. }   
---------------------------------------------------------------------------------------
1英寸=2.54cm  
1寸=3.33cm
分辨率标准:


QVGA即Quarter VGA,即VGA的四分之一尺寸,在液晶屏幕上输出的分辨率是240×320像素  
HVGA (Half-size VGA, 即VGA(640*480)的一半,分辨率为(480*320),(3:2宽高比)。
WVGA,即Wide VGA ,其分辩率为800×480象素。是扩大了VGA(640×480)的分辨率。
分辨率 是指视频画面横向和纵向被切分成多少块,就比如棋盘上有多少个格子。
像素比 是指每个格子是方的还是扁的,1:1就是正方的,4:3是有点扁,16:9是很扁。
画面比(宽高比)是指,不管棋盘被横向和纵向分成多少个格子,也不管每个格子是方是扁,就直接用尺子去量这个棋盘的横边和竖边,得数一除就是画面宽高比啦。(你也可以播放一个文件试试,用尺子量一量你的显示器上的窗口看是不是这么回事。:-) (前提是你的桌面使用的是最佳分辨率)

   
   
   
   
一:不同的layout
Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? 
   其实很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。
二:hdpi、mdpi、ldpi
在之前的版本中,只有一个drawable,而2.1版本中有drawable-mdpi、drawable-ldpi、drawable-hdpi三个,这三个主要是为了支持多分辨率。
  drawable- hdpi、drawable- mdpi、drawable-ldpi的区别:
  (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
  (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)
  (3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)
  系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片。
  在开发程序时为了兼容不同平台不同屏幕,建议各自文件夹根据需求均存放不同版本图片。
UI 适配_第1张图片
UI 适配_第2张图片

UI 适配_第3张图片
dip: density irrrelevant pixels 密度无关像素
它是一种基于屏幕密度的抽象单位,程序用它来定义界面元素。同时,它作为一个与实际密度无关的单位,帮组程序员构建一个布局方案(界面元素的宽,高,位置)。
让我们模拟下此720×1134的引导图在720×1280分辨率的设备上的显示样式如下图:

图A:720×1134的引导图在720×1280设备的显示样式

UI 适配_第4张图片

当我们在一台480×800分辨率的设备上显示时,图片会缩小为480px的宽度显示,此时高度对应会等比缩小为756px显示,假设此时状态栏标准高度为38px,则会空余16px的空间。如果我们设置背景颜色为红色,则此时显示状态如下图:

图B:720×1134的引导图在480×800设备的显示样式



同理,当我们在一台320×480分辨率的设备上显示时,假设此时状态栏标准高度为25px,等比缩放后,图片会缩小为455px(480-25)的高度显示,此时宽度对应会等比缩小为289px显示,则会空余31px的空间。如果我们设置背景颜色为红色,则此时显示状态如下图:

图C:720×1134的引导图在320×480设备的显示样式


-------------------------------------------------------------------------------------------------------------------------------


-sw(N)dp  要求N小于分辨率中较小值。

比如976x678的分辨率,高度是976像素,宽度是678像素,因此N最大为678. 因为标准7英寸(600x1024 )设备就是使用600,而且framework里面可能只支持标准的尺寸,所以你应该使用600,即layout-sw600dp.像标准10英寸设备(720x1280)就是使用layout-sw720了,因为长和宽中最小值是720。

    你想适应平板和手机,肯定要用不同的Layout文件了,而不是仅仅改个layout文件夹的名字。基本上,手机使用layout-hdpi、layout-mdpi、layout-ldpi里面的布局,而平板使用layout-sw600dp,layout-sw720dp下面的布局。

values-v11代表在API 11+的设备上,用该目录下的styles.xml代替res/values/styles.xml values-v14代表在API 14+的设备上,用该目录下的styles.xml代替res/values/styles.xml
 
----------------------------------------------------------------------------------------------------------

你可能感兴趣的:(UI 适配)