logo标签列表

在Xcode中，@1x、@2x和@3x的图片尺寸应该是多少？

iosxcodeuiimage
85

举个例子，我有一个大小为100*100的imageview或button，我想使用本地的 .png 文件设置它的图像或 backgroundImage。根据我的理解，我需要创建3组图像，即@1x下的100*100，@2x下的200*200，@3x下的300*300。我不确定我的理解是否正确，能否有人帮忙？

9
完全正确！ :) iPhone 4 及以下版本将使用常规（@1x）图像，iPhone 6 Plus 将使用最大的图像（@3x）。介于这两者之间的 iPhones 使用“中等”图像（@2x）。这是一个很好的概述：http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions - André Slotta
请查看此链接。希望这能帮到你。 - Vivek Molkar
1
如果某个答案对你有所帮助，你应该接受它。这会鼓励其他人回答你的问题，同时也让其他开发者知道哪个解决方案适用于你。 - Yogi
5个回答
116

依据我的理解，如果图片尺寸为 100 * 100

@1x -> 100 * 100

@2x -> 200 * 200

@3x -> 300 * 300

enter image description here

需要明白的是，通过创建2x和3x图像，并不能期望在每个iPhone屏幕上获得完全相同的布局。布局将因屏幕而异。1x、2x和3x图像大小仅涉及屏幕的像素密度。

假设您有一张尺寸为320 * 70的图片，并且您正在创建

@1x -> 320 * 70

@2x -> 640 * 140

@3x -> 960 * 210

这将是在不同屏幕上的输出结果。 enter image description here

9
这个答案得到了Apple官方指南的支持：假设您有一个标准分辨率的 @1x 图像，例如100px x 100px。那么这个图像的 @2x 版本将是200px x 200px。@3x 版本则将是300px x 300px。 - RoberRM
2
非常好的解释，这应该被接受为答案...再加上一个+1.. - Akshatha S R
1
但是将图像保持在1x、2x和3x尺寸有什么意义呢？为什么不只保留image@3x，系统会自动解决2x和1x屏幕分辨率。这样可以减小应用程序的大小。 - crypt
1
@crypt 我认为这是为了节省处理能力（缩小是处理器的额外工作）并避免缩小质量损失。当然，非视网膜设备不需要保持高分辨率的大图像，当低分辨率的图像可用时。我确切地不知道真正的原因。 - enadun
2
@enadun，我刚找到了答案。在部署应用程序时，应提供1x、2x和3x的图像，因为在从应用商店下载应用程序时，iPhone 5及其变体会收到image@2x图像，而iPhone 6及其变体会收到image@3x图像等。这被称为应用切片。这可以防止非视网膜屏幕的iPhone下载高分辨率图像，并使开发人员有机会为基于视网膜的iPhone创建具有更多细节的图像。如果在构建中找不到所需的图像，则只会进行放大或缩小。所以你的答案是正确的。 - crypt
27

对于 @3x 图像，将 @1x 图像的大小增加3倍！

例如：

15 x 15 = @1x

30 x 30 = @2x

45 x 45 = @3x

或者

100 x 100 = @1x

200 x 200 = @2x

300 x 300 = @3x

或者

15 x 10 = @1x

30 x 20 = @2x

45 x 30 = @3x

8
这不是正确的方法。对于 @3x 图像，应该将 @2x 图像尺寸增加 1.5 倍：15 x 15 = @1x，30 x 30 = @2x，45 x 45 = @3x。 - nvrtd frst
哪种方式是正确定义按钮的图像大小的？1x=1515，2x=3030和3x=4545还是1x=1515，2x=3030和3x=6060这个？ - Raksha Saini
2
@nvrtd，请考虑添加支持您的论点的参考资料。Raksha：我也不知道答案，但我在这里看到三个完全不同的答案，都没有证据！ - RoberRM
2
@nvrtd：我已经阅读了更多内容，并且正如我在被采纳的答案的评论中刚刚说的那样，您的答案是正确的，正如苹果自己的指南中所解释的那样：“假设您有一个标准分辨率为@1x的100px x 100px图像。例如，该图像的@2x版本将是200px x 200px。@3x版本将是300px x 300px。” - RoberRM
@Adrian Bartholomew 对我来说，这个观点似乎有点无意义。3的定义是1*2*1.5，所以先加倍再乘以1.5的方式对我来说似乎过于复杂了。只需将原始尺寸三倍即可。 - sp00n
显示剩余2条评论
19

是的，您的理解是正确的。

标准分辨率的图像具有1.0倍的缩放因子，称为@1x图像。高分辨率图像具有2.0或3.0倍的缩放因子，分别称为@2x和@3x图像。例如，假设您有一个标准分辨率@1x图像，大小为100px × 100px。该图像的@2x版本将是200px × 200px。@3x版本将为300px × 300px。

输入图像描述

要了解更多详细信息，请访问以下链接 https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

你能帮我解决这个问题吗？https://dev59.com/jKHia4cB1Zd3GeqPYsWc？ - May Phyu
URL现在是：https://developer.apple.com/design/human-interface-guidelines/images *写作时的链接；-) - ArieKanarie
7

是的，你说得对。但如果你使用Assets，你可以在一个图像中使用三个插槽来完成所有操作。

1
导航栏项目怎么样？ 我有一个4040的按钮作为导航栏项目，因此图像大小应为1x的4040，2x的8080，3x的120120。但是根据苹果的文档，工具栏和导航栏图标应分别为3x、2x、1x的6666、4444、22*22。这是为什么呢？ - user2053760
什么是问题？只需按照文档建议使用。 - Azat
0

使用资产目录。Xcode可以轻松管理@1x，@2x，@3x，并告诉您图像的尺寸。

使用它可以轻松管理AppIcon和LaunchScreen图像。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接