UI设计师给的px尺寸单位,安卓如何换算成dp?
很多UI工程师为了适配IOS,常常拿IOS手机作用参考模型,设计出来的UI稿只有PX标注的。他们也不懂Android的dp和sp单位是怎么回事。这个时候我们Android工程师如果不注意怎么转换的话,就可能开发出很难看的界面。
那么如何才能正确的将UI稿的上的px转换成android的dp单位呢?这个取决于UI设计师的设计稿基于什么设备。
一般安卓开发者只要适配一款主流设备,比如Nexues5,其它大部分手机都可以适配。如果要精确适配,就要针对不同分辨率进行单独适配。为了简单起见,我们只需要适配主流设备就可以了。
首先,我们要知道UI设计师的设计稿是基于什么设备设计的。知道了什么设备,这个设备的dpi也就知道了。那么px与dp之间换算就很简单:px=(dpi/160)dp
要注意的是这个公式中dpi并不是我们自己计算出来的(屏幕对角线的相像数除以对角线长度),而是手机厂家ROM中设置density(density=dpi/160),android通过java代码可以直接获取:
//以下是获取density,density=densityDpi/160
context.getResources().getDisplayMetrics().density;
//以下是获取densityDpi,就是我们常说的dpi:像素密度
context.getResources().getDisplayMetrics().densityDpi;
而实际情况下,设计师常常并没有针对安卓设备单独做一套设计稿,而是选择了iphone手机作为参考机型。他们以为适配了IOS就等于适配了安卓。标注尺寸单位都是px。设计帅常常拿iphone6(s)或者是iphone6(s) plus作为参考机型,一个4.7寸一个5.5寸。比如是4.7英寸的iphone6,它的分辨率是1334x750(dpi是326),而安卓设备最接近这个数值的分辨率是1280*720,对应这个分辨率的dpi一般是320,跟iphone 6(s)很接近,那么UI使用的iphone6(s)设计稿就对应安卓1280x720(dpi是320)的设备,所以我们就用320这个dpi进行换算。再比如是5.5英寸的iphone6 plus,它的分辨率是1920x1080(dpi是480),而安卓设备刚好也有很多同等的分辨率,对应这个分辨率的dpi一般是480,而iphone6 plus的dpi也是480,所以我们用480的dpi进行换算。
举个例子,设计师基于iphone6的设计稿标注20px,换算成dp就是20x/(320/160)=20/2=10。也就是除以2得到dp。如果设计师基于iphone6 plus的设计稿标注120px,那么dp就是120x/(480/160)=30/3=40。也就是除以3得到dp。
一般我们看UI稿的尺寸就可以推测出它的参考机型,比如UI稿的尺寸是1334x750,那肯定是iphone6(s)一类的机型,或者是1920x1080,那就是iphone6(s) plus一类的机型。如果UI稿的尺寸匹配不到一款主流的机型,那就是UI设计师不合格啦!
还有一种方法,程序员不需换算,UI设计师可以直接在设计工具中将px单位转换成dp单位,标注图上显示的就是dp单位,比如PxCook这个工具已经支持这个功能。
以上是一般性的适配方法,如果厂商生产的手机很奇葩,比如1280*720的分辨率dpi不是320,而是相差很大,比如是400,那么Android开发者就需要进行单独适配了。
UI设计师给的px尺寸单位,安卓如何换算成dp?的更多相关文章
- UI设计师不可不知的安卓屏幕知识
不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我既做UI设计,也做过一点安卓界面布局,刚好对这块内容比较熟悉,也曾在公司内部做过相关的讲座,在此,我将此部分知识重新梳理出来分享给大家! 1.了 ...
- UI设计师不可不知的安卓屏幕知识-安卓100分享
http://www.android100.org/html/201505/24/149342.html UI设计师不可不知的安卓屏幕知识-安卓100分享 不少设计师和工程师都被安卓设备纷繁的屏幕搞得 ...
- React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
- CSS尺寸单位 % px em rem 详解
在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...
- 【Android学习】尺寸单位 px in mm pt dp sp
一.Android中支持的尺寸单位 下面用表格的方式将Android中支持的尺寸单位列举,供大家参考: Android的尺寸单位 单位表示 单位名称 单位说明 px 像素 屏幕上的真实像素 ...
- 微信小程序 尺寸单位px与rpx之间的转换(入门篇)
1.rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应.规定屏幕宽度为750rpx. 微信官方建议视觉稿以iphone6为标准. 2.个人示例测试: ...
- Android 尺寸单位转换和屏幕适配相关
Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...
- 学习笔记:只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图
如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417 版权归原作者所有 目前ios手机 ...
- 让UI设计师崩溃的瞬间,你经历过哪些?
隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通.流畅的沟通,和声细语,是有如时雨之化者:无效 ...
随机推荐
- JS 面向对象 ~ 继承的7种方式
前言: 继承 是 OO 语言中的一个最为人津津乐道的概念.许多 OO 语言都支持两种继承方式:接口继承 和 实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在 ...
- Day7 Numerical simulation of optical wave propagation之通过随机介质(如大气湍流)的传播(三)
三 执行湍流仿真 基本参数设置: 光场条件:波长wvl,源平面的光场U 传播几何结构:观察面孔径尺寸D2,传播距离Dz 湍流条件:大气折射率结构常数Cn2 1. 准备工作 确定传播几何结构 (程序: ...
- libstdc++.so.6: cannot open shared object file: No such file or directory
sudo apt-get install lib32stdc++6 sudo apt-get install lib32z1
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
- 初识服务器和Linux
一.什么是计算机 1.介绍 一说到计算机,我们首先想到的就是电脑,没错,电脑就是计算机,但是计算机不只是电脑. 所谓的电脑就是一种计算机,而计算机其实是:接收使用者输入的指令与资料,经中央处理器的数学 ...
- Flask 蓝图,数据库链接
蓝图 使用场景 如果代码非常多,要进行归类.不同的功能放在不同的文件,把相关的视图函数也放进去. 蓝图也就是对flask的目录结构进行分配(应用于小,中型的程序) 当然对于大型项目也可以通过 ur ...
- VMware下安装linux虚拟机
安装VMware [下一步] [下一步] 点击[自定义],[下一步] 更改安装目录,[下一步] [下一步] [下一步] [跳过] [完成] 点击桌面图标 如下勾选,输入邮箱,[继续] [完成] 安装l ...
- 初识 go 语言:方法,接口及并发
目录 方法,接口及并发 方法 接口 并发 信道 结束语 前言: go语言的第四篇文章,主要讲述go语言中的方法,包括指针,结构体,数组,切片,映射,函数闭包等,每个都提供了示例,可直接运行. 方法,接 ...
- 越光后端开发——ygapi(2.新建Model)
1.新建Model 1.users数据 1.在apps/users/models.py中: from datetime import datetime from django.db import mo ...
- Python并发编程之同步\异步and阻塞\非阻塞
一.什么是进程 进程: 正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 进程和程序的区别: 程序仅仅只是一堆代码而已,而进程指的是程序的运行过程. 需要强调的是:同一个程序执行两次,那也 ...