界面依附于具体的运行设备，更准确说是一块有一块的屏幕，所以我们首先要弄清屏幕有哪些特性。
这里面有2个核心概念：
屏幕的物理尺寸，也即是通常说的屏幕大小（Screen Size），用屏幕对角线长度来表示，单位是英寸（"），比如图中3.7"、4.0"、3.2"等
屏幕分辨率（Resolution），表示屏幕有多精细，单位是像素（px），比如图中480*800、1280*720等。
这两个值相除，产生了一个新的概念屏幕密度（Screen Density），即单位长度像素点数，单位是 像素/英寸(dpi)。
以小米4为例，屏幕size = 4.6英寸（2.25英寸*4英寸），1080*1920像素。
所以，屏幕密度为 480 = 1080/2.25 = 1920/4。
由于Android的开放性，运行它的设备大小和分辨率并不一样，如果采用px作为基础的计算单位，在不同设备上的视觉效果是不一致的。比如，同样一个300px*100px的矩形，在480*800的手机上很显眼，而在1920*1080上可能就只是一点点了。所以我们面临了界面开发的经典问题——适配
怎么适配——使用DP
为了方便开发人员适配，Android提出了一个新的概念独立像素单位dp（Density-independent pixel），代替原来的像素单位px。dp与屏幕密度挂钩。Android规定：
在一个屏幕密度为160的设备上，1dp=1px。
此后，随着屏幕密度的变化，dp保持等比缩放。即
1dp = （当前设备的屏幕密度/160) px
1px = （160/当前设备的屏幕密度）dp
由dp这个概念，Android规定了一系列的标准屏幕尺寸：
- ldpi：屏幕密度为120。
- mdpi：屏幕密度为160。
- hdpi：屏幕密度为240。
- xhdpi：屏幕密度为320。
- xxhdpi：屏幕密度为480。
- xxxhdpi：屏幕密度为640。
- tvdpi：屏幕密度为213。
除了这些标准尺寸外，也可自定义其它屏幕密度，包括Google Nexus系列都采用了一些非标准尺寸，比如420dpi、560dpi。
在Android代码DisplayMetrics类中，也为这些常用dpi做了定义：
public static final int DENSITY_280 = 280;
public static final int DENSITY_360 = 360;
public static final int DENSITY_400 = 400;
public static final int DENSITY_420 = 420;
public static final int DENSITY_560 = 560;
public static final int DENSITY_DEFAULT = 160;
public static final int DENSITY_HIGH = 240;
public static final int DENSITY_LOW = 120;
public static final int DENSITY_MEDIUM = 160;
public static final int DENSITY_TV = 213;
public static final int DENSITY_XHIGH = 320;
public static final int DENSITY_XXHIGH = 480;
public static final int DENSITY_XXXHIGH = 640;
DP是一个好的解决方案吗？
在实际开发，设计人员提供的视觉设计图，视觉工具从图上直接取到的像素px，直接采用dp机制，意味着开发人员需要不断地将px转成dp，这工作量大、繁琐、重复。所以对于开发人员而言，更好的机制是利用dimension机制，将dp映射为设计图的px值。如下：
<!-- 宽度 -->
<dimen name="width_720_1280_1">0.50dp</dimen>
<dimen name="width_720_1280_2">1.00dp</dimen>
<dimen name="width_720_1280_3">1.50dp</dimen>
<dimen name="width_720_1280_4">2.00dp</dimen>
……
<dimen name="width_720_1280_716">358.00dp</dimen>
<dimen name="width_720_1280_717">358.50dp</dimen>
<dimen name="width_720_1280_718">359.00dp</dimen>
<dimen name="width_720_1280_719">359.50dp</dimen>
<dimen name="width_720_1280_720">360.00dp</dimen>
<!-- 高度 -->
<dimen name="height_720_1280_1">0.50dp</dimen>
<dimen name="height_720_1280_2">1.00dp</dimen>
<dimen name="height_720_1280_3">1.50dp</dimen>
<dimen name="height_720_1280_4">2.00dp</dimen>
……
<dimen name="height_720_1280_1277">638.50dp</dimen>
<dimen name="height_720_1280_1278">639.00dp</dimen>
<dimen name="height_720_1280_1279">639.50dp</dimen>
<dimen name="height_720_1280_1280">640.00dp</dimen>
<!-- 文字 -->
<dimen name="text_size_720_1280_1">0.50sp</dimen>
<dimen name="text_size_720_1280_2">1.00sp</dimen>
<dimen name="text_size_720_1280_3">1.50sp</dimen>
<dimen name="text_size_720_1280_4">2.00sp</dimen>
……
<dimen name="text_size_720_1280_87">43.50sp</dimen>
<dimen name="text_size_720_1280_88">44.00sp</dimen>
<dimen name="text_size_720_1280_89">44.50sp</dimen>
<dimen name="text_size_720_1280_90">45.00sp</dimen>
这样，对界面绘制人员而言，只需要将图片上的px直接写在就可以了，节省了很多重复计算的时间。
怎么制作这样px映射表呢？
- 确定UI设计基于什么样的分辨率？比如640*1136（这是iPhone5的分辨率）;
- 确定目标适配的Android尺寸？比如720*1289;
- 确定dimens的dpi，常用dpi如下：
ldpi：屏幕密度为120。
mdpi：屏幕密度为160。
hdpi：屏幕密度为240。
xhdpi：屏幕密度为320。
xxhdpi：屏幕密度为480。
xxxhdpi：屏幕密度为640。
tvdpi：屏幕密度为213。
- 执行Python代码：
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import csv
import os
import re
import sys
import zipfile
import xml.etree.ElementTree as ElementTree
'''自动生成相应的dimens.xml文件'''
if __name__ == '__main__':
# print "srcipt：", sys.argv[0]
# for i in range(1, len(sys.argv)):
# print "argv[", i , "] = ", sys.argv[i]
# 原型界面提供的尺寸
uiWidth = 640;
uiHeight = 1136;
# 目标设备尺寸，即目标机型界面
desWidth = 720
desHeight = 1280
# 目标屏幕密度
# ldpi：屏幕密度为120。
# mdpi：屏幕密度为160。
# hdpi：屏幕密度为240。
# xhdpi：屏幕密度为320。
# xxhdpi：屏幕密度为480。
# xxxhdpi：屏幕密度为640。
# tvdpi：屏幕密度为213。
density = 320
print "<!-- "
print "\t\tUI提供宽高: %d*%d" % (uiWidth, uiHeight)
print "\t\t适配屏幕宽高: %d*%d" % (desWidth, desHeight)
print "\t\t适配屏幕密度: %ddpi" % (density)
print "--> "
ratio = 1.0*desWidth/uiWidth
# 输出合理的dimens.xml文件
for i in range(uiWidth):
j = i + 1
# print "<dimen name=\"ws_%d_%d_%s\">%.2fdp</dimen>" % (desWidth, desHeight, j, 1.0 * j * density)
print "<dimen name=\"ws%s\">%.2fdp</dimen>" % (j, 1.0 * j * ratio * 160/density)
for i in range(uiHeight):
j = i + 1
# print "<dimen name=\"hs_%d_%d_%s\">%.2fdp</dimen>" % (desWidth, desHeight, j, 1.0 * j * density)
print "<dimen name=\"hs%s\">%.2fdp</dimen>" % (j, 1.0 * j * ratio * 160/density)
for i in range(90):
j = i + 1
# print "<dimen name=\"ts_%d_%d_%s\">%.2fsp</dimen>" % (desWidth, desHeight, j, 1.0 * j * density)
print "<dimen name=\"ts%s\">%.2fsp</dimen>" % (j, 1.0 * j * ratio * 160/density)
Panda
2016-05-26
