android 系统的切图方式_APP切图规范和换算标准

在设计APP界面的时候，到底要出几套图？ IOS系统的设计界面尺寸基于：750px*1334px，而Andriod系统是基于：720px*1280px，那为什么往往我们在实际应用中只做IOS的界面，程序就可以实现两种系统的适配呢？

对比之下，原来他们有一个共同的参数：750  程序就是通过这个共同的参数进行相应的换算从而完美适配两种系统。 在这里为了让大家看得明白，我把他们之间的关系给大家理一下： 在Android系统中，XXXHDPI是XHDPI的2倍；XXHDPI是XHDPI的1.5倍；HDPI是XHDPI的0.75倍；MDPI是XHDPI的0.5倍； 接下来我们来看一下iOS系统，@2X是@1X的2倍；@3X是@2X的1.5倍；即3/2=1.5，2/1=2； 由此可见：iOS与Android的关系就是，iOS的@1X=Android的MDPI；iOS的@2X=Android的XMDPI；iOS的@3X=Android的XXMDPI； 现在看来，实际上，我们只需要把iOS的切出来后，Android的也切出来了，不过在这里需要特别注意的就是，由于iOS里导出的图带有@2X等，所以将这个图给Android时需要去掉@2X； 当然这仅仅只是解决了图标大小适配的问题，在间距上还是会存在一定的误差，毕竟两种系统的标准尺寸大小不一样比例上或多或少都有些出入 (iOS：750px*1334px，Android：720px*1280px) 大家都知道点九切图吧，它是Android平台的应用软件开发里的一种特殊的图片形式，可以将图片横向和纵向同时进行拉伸，以实现在多分辨率下的完美显示效果，但是，点九切图的局限性很大，一般只适用于button、对话框、按钮等规则的图标里，不规则的icon在应用的时候，还是需要我们进行切图。

那点九切图又是如何进行的呢？

以微信社交对话框为例进行说明如何切点九图，其原则如下： 1.保留对话框周边四个圆角； 2.保留对话框右边的指向“三角”； 3.指定横向(水平)、纵向(垂直)内容范围区域； 整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。 具体步骤如下所示：

第一步：画好我们需要的对话框样式；

第二步：将对话横向距离减小到两圆角之间为10PX(可以更小)间距，并用铅笔工具在对话框上部中间(水平)标注1*1PX矩形黑点(#000000，100%)；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。

上图最终切图为放大图，方便说明(黑点、黑线、间距)更清晰。

注意，黑点与对话框之间保留1PX空白间距。

第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点(#000000，100%)；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。 注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸(单方向)。 如果想要对话框纵向双向对称拉伸，指向“三角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。如下图所示。

第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线(#000000，100%)；该黑线表示对话框内文本垂直范围。如下图所示。

第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线(#000000，100%)；该黑线表示对话框内文本水平范围。如下图所示。

总结：通过以上五步，该对话框的点九切图完毕。 如果没有指定文本范围区域，就会出现以下情况。如下图所示。 黑点、黑线一定要与对话框之间保留1PX间距。切出来的图片命名为：“*.9.png”

错误                                                                        正确