android 集结号AndroidAndroid基础知识

Android 屏幕适配教程、适配机制介绍

2016-08-17  本文已影响7982人  信仰码农

概述

android屏幕适配有很多方面,例如,drawable,values等,开发者根据产品的实际情况和自己的经验,可以选择性的从其中几个方面入手。
本文主要介绍一种基于分辨率等比例缩放的适配方案。

几个必须知道的概念

屏幕尺寸

屏幕尺寸是指手机屏幕对角线的英寸数。

屏幕分辨率

屏幕分辨率是指屏幕宽高像素数。

屏幕密度

屏幕密度是指手机屏幕对角线上单位英寸内的像素数。

代码中用的尺寸单位(dp,dip,sp,px)

这些单位跟我们写代码才是最相关的。

Android适配机制

  1. drawable,在工程里可以在res目录下创建一系列的带后缀的drawable文件夹,例如drawable-hdpi,drawable-xhdpi等等。

基于分辨率等比例缩放的适配方案示例

先看两张图:

800x480分辨率.png 1920X1200分辨率.png

上面两张图中的登录按钮的尺寸是100dp,分别在800x480的设备上和1920x1200的设备上运行效果。可以看出来,第一张图按钮的尺寸跟整体布局还比较协调,但是第二张图中的按钮宽度显得特别的小,与整体布局很不协调。(注意,两个图中的按钮,在实际设备上的物理尺寸是差不多的,但是为了看起来方面,我将两张图都等比例压缩了,但是,这样不影响我们看按钮与整体尺寸比例关系)。

在实际界面开发当中,一般流程是这样的:
1.UI设计师基于854x480手机设计了一套图,并给出了标注。
2.开发人员将标注转换为dp写到布局文件中。
3.在854x480分辨率的手机上测试界面效果,不出意外应该是跟设计图基本一致的。
但是,如果将程序运行到1920x1080分辨率,但是密度为240(hdpi)的设备上,那就会出现类似上面第二张图中的效果(当然实际开发中会把上图中的按钮的宽度设置为match_parent,这里只是为了说明问题)。
界面布局简单了还好,我们可以通过调整,使用相对布局以及match_parent等手段将界面调整的比较好看。但是如果界面元素比较多了,有时候我们必须给某个控件设置一个固定尺寸,所以肯定避免不了这种问题的出现。

所以UI设计师可能会提出如下几个要求:
1.设计师基于720P(1280x720)设计一套图,并标注
2.研发开发出来的实际效果在720P手机上必须跟标注一致(要求高的公司甚至精确到像素)
3.如果在480P、1080p手机上,则实际尺寸按标注等比例缩放。比如在720p上的标注是100px,那么显示到1080p手机上必须是100*1080/720 = 150px。
4.对于非标准分辨率来说,比如1184x720(手机底部带虚拟按键的那种),则需要在高度上做调整,给控件的纵向间隙做些调整。

所以针对如上要求,结合android屏幕适配的机制,可以采用如下方案来适配:

  1. 创建不同分辨率的values文件夹,在其中分别创建dimens.xml:
不同目录的dimens文件.png
  1. 由于我们的标注是基于1280x720分辨率标注的,所以在values-1280x720目录下的dimens.xml里定义诸如下面这些尺寸:
values-1280x720.png

可以看到,我对名字的命名有一些规则,即,宽度值用‘w_像素数值’的格式命名,高度值用‘h_像素数值’的格式命名。

  1. 根据标注编写布局文件,假设标注中‘发送验证码’按钮的宽度为180px


    代码片段.png

    在720分辨率手机上对应的效果:


    720p.png
    4.根据values-1280x720目录下的dimens文件内容,转换为其他分辨率下的尺寸,然后放到对应分辨率的values目录下。当然这种转换手动转会累死。我写了一个转换工具(一个java类),转换起来很方便。

好了。来看下效果,重点关注‘发送验证码’按钮,为了方便看这个按钮占据整个布局的比例,我把几张图都缩放为差不多大小:
1.1280x720分辨率:

720p.png

2.1920x1080分辨率:

1080new.png

3.2560x1440:

2k_new.png

上面的方式就是按分辨率等比例缩放的适配方式,我们称其为第一种适配方式,另外还有第二种适配方式,就是我们常用的把宽高用dp来定义的方式。
如果把‘发送验证码’按钮的宽度使用dp来定义,按照180px的标注,那转换为dp按钮宽度应设置为90dp,那么效果如下:
1.720分辨率,密度320dpi,跟上面用px的效果一样。
2.2560x1440分辨率,密度560dpi(由于用了dp,所以密度要关注下):

2k_usedp.png

可以看出按钮的宽度占整个屏幕宽度的比变小了。分析下原因,按第一种方式,即宽度按像素设定的方式,app运行时,@dimen/w_180px在2560x1440分辨率的手机上会去找values-2560x1440目录下的dimens文件,而此文件中的尺寸定义已经事先被我们按等比例缩放好了,即缩放后的像素= 180 * 1440/720 = 360px
若按第二种方式,即宽度按dp设定的方式,app运行时,90dp在560dpi密度的手机上,实际显示的像素=90*560/160 = 315px。
那么按钮宽度占屏幕宽度的比例315:1440小于360:1440所以,所以看起来占用比例小了。

总结下,如果要适配各种分辨率的手机,并且想让控件在屏幕中所占用的比例不变,那么就需要用第一种方式来适配。这种方式下,无论屏幕的密度是多少,控件显示出来后在屏幕中占用的比例都不会变。
也就是说,如果按这种方式做的话,由于主流分辨率的宽高比基本一致,因此在任何主流分辨率手机上运行后截图,然后再缩放为720宽度,那么界面中的元素位置及大小一定是跟标注中一致的。

以上是对屏幕适配的一些理解,及实际测试过后的一些结论,希望对大家有帮助。
另外,尺寸转换的工具见附件,用java swing组件做了个界面(比较low,凑合用吧):
尺寸转换工具

使用说明:


Paste_Image.png 尺寸转换工具使用.gif

下集预告:使用Android Studio 中的代码模板功能,提升编码效率。

上一篇下一篇

猜你喜欢

热点阅读