UI界面设计 ·

APP设计常识解读:android界面适配的机制

这是一篇关于app设计师去了解下如何做android多分辨率多密度下界面适配方案的原理解读。如果你已经知道了,可以不用再来阅读了。本文ju111.net只是为了给一些app设计小白扫盲。让各位清楚的知道的android的UI界面到底是如何去解决适配问题的。

当然,网上很多关于android界面适配的文章也有很多,大同小异。包括ju111.net之前介绍过的Android APP设计教程与终极UI适配秘籍【图文版】Andriod界面设计的分辨率和尺寸适配全攻略

Android安卓手机APP设计

 

android界面适配的机制到底是咋样的呢?

很通俗的点说就是:Android系统本身就提供了UI界面在多平台的适配的完善的解决方案和机制。并不是我们移动APP设计师去解决适配的问题。或者是android程序员自己冥思苦想出来的最佳解决适配方案。

因为进行android开发的时候,系统默认有这几个文件夹,

0_1329445562hOBH

无论是android设计师或者android程序员把对应的ui设计资源放入对应的文档即可完成android UI 适配的最粗暴的解决方案!

 

Android适配机制原理如下:

Android适配机制就是在资源后面添加对这两种因素的限定,通过不同的限定区分不同的平台资源,Android在使用资源的时候会优先选择满足本平台限定的资源,再找最接近条件的,再找默认(即不加限定),通过选择适合当前平台的资源来完成不同平台的适配。

屏幕尺寸分为:small,normal,large,xlarge分别表示小,中,大,超大屏

屏幕密度分为:ldpi,mdpi,hdpi,xhdpi,它们的标准值分别是:120dpi,160dpi,240dpi,320dpi

通俗点讲就是:系统根据当前的屏幕大小和密度,然后动态的采用程序中提供特定的资源

 

Android Holo设计风格

 

如今最新的android适配资源需要五种:
界面布局方面

需要根据物理尺寸的大小准备5套布局

  1. layout: 放一些通用布局xml文件,比如界面中顶部和底部的布局,不会随着屏幕大小变化,类似windos窗口的title bar
  2. layout-small: 屏幕尺寸小于3英寸左右的布局
  3. layout-normal: 屏幕尺寸小于4.5英寸左右
  4. layout-large: 4英寸-7英寸之间
  5. layout-xlarge: 7-10英寸之间

图片资源方面

需要根据dpi值准备5套图片资源:

  1. drawable
  2. drawalbe-ldpi
  3. drawable-mdpi
  4. drawable-hdpi
  5. drawable-xhdpi

Android有个自动匹配机制去选择对应的布局和图片资源。

其实做法很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里,而系统会根据屏幕的大小自己选择合适的layout进行使用。

 

android UI适配主要受到屏幕分辨率和屏幕尺寸的影响,也是取决这2个因素。

具体的android设计规范点击查看

 Android设计规范以及android UI kits完整PSD下载

第二个大家需要注意的和疑问的:

当我们使用切图工具Cutterman来进行安卓界面切图的时候,会自动生成10个文件夹。如图所示:

安卓切图ju111.net

主要是因为最新版的安卓开发软件studio里面有了mipmap 目录和drawable 目录。两者都是一样的。

唯一的区别:用mipmap系统会在缩放上提供一定的性能优化。

比如:Nexus 6 有 493 ppi,它刚好在 xxhdpi和xxxhdpi之间,所以显示的时候需要对xxxhdpi的资源进行缩小,如果你用了mipmap-xxxhdpi,那么这里会对sclae有一个优化,性能更好,占用内存更少。所以现在官方推荐使用mipmap:

 

最后再说下为什么在布局文件中使用 dp作为单位而不是使用px

dp是一个与屏幕ppi无关的参数,同时也是一个事实上并不存在的虚拟单位。显示时会根据具体屏幕的ppi进行像素的映射,关系如下160ppi   1dp   1px120ppi   1dp   0.75px240ppi
1dp   1.5px320ppi  1dp  2px因此在布局文件中一般使用dp作为单位,这样就能适应不同ppi的屏幕,在各种ppi的屏幕上有一样大的物理上的距离。

(可以看出1dp并不总是等于1px的,对于ppi高的屏幕肯能要等于2px,只是为了物理上看起来的距离是相等的)

参与评论