android切图的公式,APP的切图原理

你的名字 2022-10-05 11:57 360阅读 0赞

![f0ea355d7e9a][]

APP的切图原理

因为：Ui设计师用单位px和pt作图，

Android开发人员用dp和sp开发，

于是，经常发生很多沟通上的麻烦。

☞为了让日常切图尺寸的沟通更加和谐，我整理了安卓切图的相关信息。

举例：banner的切图尺寸：iOS和Android的换算举例：已知：在640x1136px，iPhone@2x的banner尺寸是W640xH160px，

问题：在720x1280px，Android@xhdpi时，banner切图尺寸是多少？

解：

因为app首页banner是占满横屏的，所以banner宽度为720px, 高度的计算公式如下，

640px             160px

一一一一  ＝  一一一一

720px               B

解得：B＝180px，

所以：在720x1280px，Android@xhdpi时，banner切图尺寸等于W720xH180px。

安卓的相关尺寸信息统计：【符号表示对应关系】

@Ldpi(安卓手机)240x320px 120ppi

@mdpi(安卓手机)320x480px 160ppi

@hdpi(安卓手机)480x800px 240ppi

@xhdpi(安卓手机)720x1280px 320ppi

@xxhdpi(安卓手机)1080x1920px 480ppi

常见app的banner切图，需要切6张不同尺寸的图：

640x160@2x(苹果手机)

960x240@3x(苹果手机)

320x80@mdpi(安卓手机)

480x120@hdpi(安卓手机)

720x180@xhdpi(安卓手机)

1080x270@xxhdpi(安卓手机)

其中安卓屏幕分辨率的倍数关系如下，

320x1=320，对应屏幕@mdpi(安卓手机)320x480px 160ppi

320x1.5=480，对应屏幕@hdpi(安卓手机)480x800px 240ppi

320x2.25=720，对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

320x3.375＝1080，对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

安卓屏幕密度的倍数关系如下，

160x1=160，对应屏幕@mdpi(安卓手机)320x480px 160ppi

160x1.5=240，对应屏幕@hdpi(安卓手机)480x800px 240ppi

160x2=320，对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

160x3＝480，对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

因此，安卓的2倍图，实际上是2.25倍。安卓的3倍图，实际上是3.375倍。

dp是虚拟像素，在不同的像素密度的设备上会自动适配，

比如:

在320x480分辨率，像素密度为160,1dp=1px

在480x800分辨率，像素密度为240,1dp=1.5px

计算公式:1dp\*像素密度/160 = 实际像素数

dp和px的换算公式 ：

dp\*ppi/160 = px。比如1dp x160ppi/160 = 1px。

1dp        160ppi

一一一＝一一一

1 px          160

sp是安卓的字体单位，

英文名称：Scale-independent pixels，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px。

sp 与 px 的换算公式：1sp\*ppi/160 = 1px

1sp            160ppi

一一一 ＝ 一一一一

1pt               160

Sketch切图倍数如下：

![f0ea355d7e9a][]

![f0ea355d7e9a][]

![f0ea355d7e9a][]

切图切6套，文件夹显示如下：

![f0ea355d7e9a][]

切图文件夹本文作者：张云钱。微信号；944352559

[f0ea355d7e9a]: /images/20221005/e71d652b814f462e93c5cabb7d79e30f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 android切图的公式,APP的切图原理

![f0ea355d7e9a][] APP的切图原理因为：Ui设计师用单位px和pt作图， Android开发人员用dp和sp开发，于是，经常发生很多沟通上的麻烦。

你的名字/ 2022年10月05日 11:57/ 0 赞/ 361 阅读

相关 gdal栅格切图

package gdal.cutmap.raster; import org.gdal.gdal.Band; import org.gdal.

今天药忘吃喽~/ 2022年10月05日 06:50/ 0 赞/ 173 阅读

相关图片浏览+切图功能

上效果图： ![Center][] ![Center 1][] ![Center 2][] ![Ce

古城微笑少年丶/ 2022年09月26日 11:52/ 0 赞/ 197 阅读

相关移动APP界面设计切图指南

移动APP切图信息图：iOS界面设计切图指南 [http://blog.163.com/conghui1986@126/blog/static/564709752014

╰半橙微兮°/ 2022年08月07日 00:28/ 0 赞/ 198 阅读

相关 ps切图

1.切图切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。通俗来讲，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后用DI

我会带着你远行/ 2022年07月12日 06:54/ 0 赞/ 303 阅读

相关切图标注工具

切图和标注工具推荐像素大厨：链接：[http://www.fancynode.com.cn/pxcook][http_www.fancynode.com.cn_pxcook

逃离我推掉我的手/ 2022年06月02日 05:43/ 0 赞/ 233 阅读

相关 css精灵图(雪碧图)切图

css精灵图为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图雪碧图切图简单过程：先在ps中打开，然后通过用矩形覆盖原来图标在图片中的位

深碍√TFBOYSˉ_/ 2022年05月20日 09:56/ 0 赞/ 493 阅读

相关 APP设计~切图那些事儿

![Image 1][] 文/AndyLiz APP切图基本知识点以及注意事项 1、考虑适配Android 各种复杂的分辨率，如主流的1280X720、800X480、64

约定不等于承诺〃/ 2022年03月18日 15:52/ 0 赞/ 225 阅读

相关切图要注意

没有大神师傅领进门，靠自己胡乱学，这样就是硬伤啊。现在我们来聊聊当拿到网站页面（psd）的时候，不要急于就动手切图，需要考虑以下几点 1.这个网站是做什么？ 2.这个网

川长思鸟来/ 2021年09月14日 05:20/ 0 赞/ 429 阅读

相关 PS切图笔记

PS切图切图设计稿中切出网页素材给网页提供图片素材使用PS工具编辑>首选项>单位与标尺-像素需要用到的面板工具 -列出了ps提供的工具

Dear 丶/ 2021年08月24日 17:22/ 0 赞/ 562 阅读