前言
大家都知道开发android会涉及到UI的涉及，一般都是给到通用的分辨率进行设计，但是具体适配是需要代码控制的，由于网上分辨率dp的文章实在太多，对这些不了解的朋友可以去自行百度，这里主要是对UI的设计过程与原理进行一个简要的分析
术语
首先阐释一些术语和概念
屏幕尺寸（screen size）: 屏幕的对角线测量。
为了方便，Android把所有的屏幕尺寸分为了4个广义的大小：小、正常、大、更大
屏幕密度（screen density）: 屏幕占据的物理区域所含像素的个数
通常被称为dpi（dots per inch）即每英寸的像素点数
分辨率（resolution）: 屏幕上物理像素的点数
例如，有一个240px*400px的屏幕，可以理解为在这个屏幕上横着有400条线，每条线上有240个像素点
像素（px）: 屏幕上的点
dip(dp)：Density-independent pixel--->与密度无关的像素
由于JPG容易失真, 在Android开发中尽量避免使用.jpg图片, 应该使用.png图片, 它采用了从LZ77派生的无损数据压缩算法.
设计稿
说到这个词，应该是UI设计师接触的最多，用通俗的话说设计稿就是一个设计画布上面设计出来的app页面，什么是设计画布？
画布
画布的概念就是一个手机屏幕，例如现在的通用设计屏幕是1920*1080，所以设计师只需要找一个这样分辨率的画布进行app设计
图片大小
上面说到了画布的概念，现在来说图片的大小，图片的大小指的就是长*宽，当然这里说的图片大小就是在前面说到的画布上设计出来的app页面中的某个图片的大小，一般单位是按照像素进行计算的，例如48px * 48px,这就是这个图片在1080 * 1920的分辨率手机上的实际图片大小
xxhdpi等分辨率
说到不同hdpi的概念就是不同分辨率的概念，安卓中对应了很多种不同的hdpi分别来适配不同的手机屏幕（五种主流像素密度（MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI)
），按照等级区分主要有以下几种：
| header 1 | header 2 |
|---|---|
| mdpi | 120dpi ~ 160dpi |
| hdpi | 160dpi ~ 240dpi |
| xhdpi | 240dpi ~ 320dpi |
| xxhdpi | 320dpi ~ 480dpi |
| xxxhdpi | 480dpi ~ 640dpi |
手机常见尺寸和对应像素密度
4:3的尺寸
VGA :640x480 (Video Graphics Array)
QVGA :320x240 (Quarter VGA)
HVGA :480x320 (Half-size VGA)
SVGA :800x600 (Super VGA)
5:3的尺寸：
WVGA :800x480 (Wide VGA)
16:9的尺寸：
FWVGA: 854x480 (Full Wide VGA)
HD :1920x1080 High Definition
QHD :960x540
720p :1280x720 标清
1080p :1920x1080 高清
一般分辨率对应DPI：
“HVGA mdpi”
"WVGA hdpi "
"FWVGA hdpi "
"QHD hdpi "
“720P xhdpi”
"1080P xxhdpi "
那这些不同的分辨率跟前面讲到的图片大小有什么联系呢？
- . 在不同的hdpi下，图片的大小是不一样的
- 在设计图标时，对于五种主流像素密度（MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI)
应按照(2:3:4:6:8)的比例进行缩放，(1x, 1.5x, 2x, 3x, 4x)，例如：
尺寸为48x48dp的图标，表示在MDPI的屏幕上其尺寸应为48x48px
在HDPI的屏幕上其实际大小是MDPI的1.5倍（72x72px）… 依此类推
设计流程
- 先确定一张画布（通用 1920*1080，属于xxhdpi）
- 在画布上画出app的设计页面
- 对页面上的每个图片进行导出
- 导出的图片标准是按照 2:3:4:6:8的比例导出到MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI对应的文件夹下
5.例如其中一张图片设计出来的大小是72*72，因为是1080属于2x，所以宽高除以6再乘以2 得到的大小24 * 24就是MDIP下图片的大小，以此类推
最后
总结前面的分析，图片的大小其实与分辨率有这密不可分的关系，一般是按照标准分辨率设计出一个标准大小的图片，然后再按照这个标准属于哪类分辨率进行2:3:4:6:8的等比缩放，设计图片大小的时候（除了icon）没有一个固定的标准，这都是根据页面的样式大小进行设计的！希望这篇文章能帮助到你理解设计UI的流程来保证自己的图片适配
网友评论