对于不同屏幕尺寸缩放/绘制图像有什么好方法?

时间:2016-04-18 10:29:08

标签: ios

在我的iPhone应用程序中,我有一个控件,在不同的屏幕上具有完全不同的大小。例如,(在iOS点坐标中)

  • 3.5英寸设备(iPhone 4S):242x295
  • 4英寸设备(iPhone 5系列,SE):242x383
  • 4.7英寸设备(iPhone 6系列):297x482
  • 5.5英寸设备(iPhone 6 Plus系列):336x551

如您所见,这些控件尺寸成比例。

问题

此控件以图像为背景。这个特殊形象对于品牌形象和我公司设计师想要的定制外观非常重要。图像给出了材料的外观并具有纹理。它本身也有阴影。我想将此图像应用于不同屏幕尺寸的控件(我的控件尺寸是根据可用空间在运行时确定的,因为Apple可能随时提出新的屏幕尺寸。)

我目前的解决方案

设计师为每个屏幕尺寸为我制作单独的PNG,然后使用if-else屏幕尺寸(在手动确定尺寸之后)将其硬编码到我的控件上。正如你可能会说的那样,这对于鲁棒性来说是一种可怕的方法。我也希望扩展到iPad,拥有更好的缩放系统肯定会有所帮助。

一个想法 我拍摄的图像是重复纹理的最小单位,并使用缩放选项将其应用于我的控件,该选项在整个过程中重复以获得最终图像。 然而,我以这种方式失去了阴影和圆润的边缘。 (我试过简单地使用最大的图像,不成比例的缩放使圆形边缘变得可怕)

我尝试寻找解决方案,而且大多数资源都没有处理此类图像。我根本不能丢失这个图像的任何部分,它应该完全应用于包含的控件,阴影和角落。

如果任何或所有这些都是天真的,或者如果我没有使用正确的单词寻找答案,我道歉。这是我第一次在Stack Overflow上发帖,我很期待收到你们的回复。

谢谢!

P

编辑:

enter image description here

这适用于基于自定义UIButton的控件,以提供卡片的外观。

编辑2:Wain似乎提出了一个完美的答案。我会尝试并让大家知道结果。

3 个答案:

答案 0 :(得分:1)

您可以使用Assets.xcassets来管理ios中的图像。你可以用1x,2x和3x的比例制作图像。

例如,你想要一个尺寸为50x50像素的图标,那么1x应该是50x50, 2x应为100x100,3x应为150x150。然后ios自动从这个集合中获取适当的图像。

希望这会有所帮助:)

答案 1 :(得分:1)

我会按照你的描述使用平铺,然后我将它与更改视图层角半径并应用阴影偏移相结合。通过这种方式,您可以分离图像的重要部分并使其可以重复使用,并且可以利用CALayer的功能。

请注意,当您设置图层的shadowOffset时,您还应该查看shadowColorshadowRadiusshadowOpacity

答案 2 :(得分:0)

iPhone 5,iPhone 6和iPhone 6P的纵横比几乎相同。但iPhone 4的纵横比不同。

以下是帮助您的步骤。

  • 所以你需要一张适合iPhone 5及其版本的图像 @ 2x,@ 3x图像和iPhone 4及其@ 2x图像,

    即如果您有用于iPhone 5的242x383图像,那么您需要图像 使用@ 2x和@ 3x图像。你需要兼容的图像 iPhone 4尺寸。

  • 您需要将UIImageView's contentMode设置为aspectFit

所以我的想法是,将 iPhone 5的图像及其@ 2x,@ 3x图像 iPhone 4的图像区别开来。或者你可以将所有内容放在UIScrollView和iPhone 4中,使用scrollView设置contentSize为568.并为iPad制作不同的图像。