按钮图像像素化 [英] button image gets pixelated

问题描述

我在Sketch中设计了一个锁形图标，以添加到应用程序中的按钮上:

I have designed a lock icon in Sketch to add to a button in my application:

我将其导出为pdf和png(2x，3x)格式，以添加到Xcode资产中.问题是，当我在iPhone(SE)上运行该应用程序时，在图标边缘周围可见大量像素:

I exported it both in pdf and png (2x, 3x) to add to Xcode assets. Problem is when I run the app on iPhone (SE), heavy pixelation can be seen around the edges of the icon:

我尝试了pdf和png格式，但是结果保持不变.我是否缺少任何必要的设置才能使图像在屏幕上看起来清晰?

I've tried both pdf and png formats, but result stays the same. Am I missing any settings that need to be applied for image to look sharp on screen?

推荐答案

对于 UIButton 的图像，更大不一定更好.尝试以与图标大致相同的大小导出图标.(请注意，与更大的图像相比，这也释放了内存).

Bigger is not necessarily better for a UIButton's image. Try to export your icon in more or less the same size with which it will be used. (Note that this also frees up memory in comparison to a way bigger image).

要适应不同屏幕的分辨率，您最多应提供三张图像(@ 1x，@ 2x，@ 3x).您应该阅读出色的Apple的文档有关图像尺寸和分辨率.它完美地说明了您在Xcode中提供的图像应该有多大.

To adapt to different screens' resolutions, you should provide up to three images (@1x, @2x, @3x). You should read this excellent Apple's documentation on Image Size and Resolution. It explains perfectly how big should the images you provide in Xcode be.

对于根据图像的用途应使用哪种格式，他们也有很好的解释.

They also have a good explanation on which format you should use according to the purpose of the image.

您还可以使用矢量资源(例如.pdf文件)，可以完美地呈现任何分辨率.您可以阅读此有关如何在Xcode项目中实现它的文章(如果这样做，请注意资产的属性，以检查保留矢量数据"和缩放到单一比例"，否则可能无法很好地呈现)).

You can also use vector ressources (.pdf files for instance) that will render perfectly for any resolution. You can read this article about how to implement it in your Xcode project (If you do so, please be careful in the attributes of the asset to check Preserve Vector Data and the Scales to Single Scale, otherwise it may not render well).

这篇关于按钮图像像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！