Retina 显示屏上的字体和线条

Question

我已完成了一个 @1x 版本的应用程序，并使用代码创建了许多接口，包括：

• UILabels (标签)
• UIViews (视图)

一切看起来都很好。如果我在Retina显示屏上使用该应用程序，显然一切都会放大到@2x。我设计了一些用Fireworks/Photoshop制作的图形，当然也制作了@2x版本，这些工作都进行得很顺利。但是我的问题在于上述标准界面元素。

问题：我该如何处理以下两个问题？

• 如何在 UILabel 中设置 1 像素描边，并使其在 @2x 上高度和宽度增加一倍？
• 如何在两个分辨率下都具有高度为 1px 的 UIView（作为屏幕分隔符）？在 @2x 下使用 2px 的线条也可以，但我真的更喜欢它们高度为 1px，看起来更优雅。

目前，我使用以下代码创建分隔符视图:

UIView *separatorLine = [[UIView alloc]initWithFrame:CGRectMake(0,200,320,1)];
[self.view addSubview:seperatorLine];

该内容在@1x分辨率下运行良好，但在@2x分辨率下会被放大到2像素高度，而不是显示为@2x的样式：

seperatorLine.frame == (0,400,640,1)

我需要如何修改这段代码，使其能够在两种分辨率下正常工作？

- Sebastian Flückiger

Answer 1

您可以通过以下方式检查屏幕比例：

CGFloat scale = ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] ? [UIScreen mainScreen].scale : 1.0);

如果比例尺等于2.0，那么你就在使用视网膜显示屏，可以更改分隔符的框架，例如CGRectMake(0.0, 200.0, 320.0, 0.5)。请注意保留HTML标签。

- Christian Schnorr

---

所以基本上：如果(2.0){分离器框架=高分辨率} 否则{分离器框架=低分辨率}添加子视图: 分离器？ - Sebastian Flückiger

有趣的是，为什么你在高度上使用了0.5，但仍然对位置进行了缩放？ - Sebastian Flückiger

抱歉，我以为 seperatorLine.frame == (0,400,640,1) 是您的默认框架。已编辑。是的，您可以像第一条评论中那样做，但 if 应该是 if (scale == 2.0)。 - Christian Schnorr

好的 - 现在分隔符等方面该如何进行已经清楚了 - 你对字体有什么建议吗？这是现在唯一缺失的东西 :P 感谢迄今为止的帮助，点赞已经赚到了！ - Sebastian Flückiger

你不能也不应该使用1像素笔画的字体。在Retina和非Retina屏幕上使用相同的字体是可以的，只是在Retina屏幕上看起来更好而已。如果按照你要求使用了1像素笔画的字体，那么这个字体看起来会非常细且纤细。对于图形也是一样的 - 使用点而不是字体进行绘制，在Retina显示器上，1像素线条会非常细，看起来更像是屏幕上的故障。 - jrturton

尝试了一些东西，你可能是对的！如果在视网膜上只有1像素高，那么这些线看起来非常性感。字体渲染得相当好 - 所以这个答案符合我的需求，感谢Jenox和评论者的努力。 - Sebastian Flückiger

Answer 2

使用苹果的Cocoa元素时，您不需要担心任何这些问题，这是视网膜显示器对于我们开发人员最好的部分！

您需要像您所说的那样@2x您的图形，但设备会根据需要自动缩放Cocoa显示元素。苹果已经明确区分了“像素”和“点”，并且使用点来设置框架。在传统显示器上，一个点等于1px，在视网膜显示器上则为2px。这意味着实际上，如果您将框架设置为CGRectMake(0,400,640,1)，就像您提到的那样，它会将该行放置在屏幕底部，并且是屏幕宽度的两倍（当然被屏幕边界裁剪）。如果您真的希望在视网膜显示器上将该行设置为1px高，请将其制作成图像。标准图像可以是320x1，而@2x可以是640x1。

如果您想知道我的意思，但没有视网膜显示器设备，您可以在模拟器中运行，并从菜单中选择Hardware > Device > iPhone (Retina)

祝你好运。

- acorc