为不同的iphone设置图像并调试

Set images for different iphones and debug

我目前正在开发一个 ios 应用程序,范围仅限于 iPhone 和纵向模式。

在每个屏幕中都有图像、按钮、标签和文本字段。这里的问题是,如何从 Images.xcassets?

为设备渲染合适的图像

我现在在做什么,写在下面-

  1. 从 Sketch 设计应用程序导出我的 1x、2x 和 3x 图像(屏幕由 UI 设计师设计)

  2. 将它们添加到 Xcode 项目(从 finder 拖放到 xcode)

  3. 在Images.xcassets中添加新图像集(将其命名为"MyImages")并拖放我的图像1x、2x、3x。

  4. 在情节提要中,在 viewcontroller 上添加一个 ImageView

  5. 对于图像视图,从属性检查器中选择图像作为 "MyImages"。

完成上述步骤后,当我在从iphone4s开始的模拟器上测试应用程序时,iphone5、iphone5s、iphone6等等..(所有模拟器在 Xcode 7.3 上可用),我没有看到正在渲染适当的图像。

我的做法正确吗?

此外,如何调试屏幕上的 UI 元素?比如,how/where 我要检查渲染的是什么图像吗?它的尺寸 (W X H)?

已添加屏幕截图

除了加大尺寸的 iPhone 应该是 3 倍之外,它们都应该是 iPhone 的 2 倍图像。这不是你所看到的吗?

就调试/检查而言 - 您可以将占位符图像放入带有标签或不同颜色的资产中以将它们彼此区分开来,然后在您知道后用具有所需最终外观的图像替换它们一切都按预期工作。

使用 iPhone 的 2x 图像方法效果很好,但是,还有另一种更直接的方法,无需借助 Xcode 中的 1x、2x、3x 的多个图像文件,通过使用良好的大质量PDF(矢量)。

1.为您要使用的 image/Graphic 图片创建大 PDF

2。将其导入 'Assets.xcassets' - 拖放 (Into Xcode)

3。转到 'Attributes Inspector' 右侧的实用程序面板(当图像为 selected 时)

参见屏幕截图 (a)

在“比例因子”下,select离子从'Multiple'到“单向量

现在,当您到达 'StoryBoard' 并添加图像时 - 只需 select PDF 的名称。 Xcode 会在 运行 时间自动将其渲染为更正尺寸 等。所有的工作都是由Xcode.

完成的

例外情况: 它不适用于 TabBar 或导航栏项目内的图标图像。

注: 矢量图形非常清晰,是高清 (HD) 的理想选择,但尽管 Xcode 接受 PDF 中的图像资源作为矢量,但它似乎并没有保留矢量,而是将其转换为具有像素化问题的实际图像从高清视角放大时。

@Lohith Korupolu:

您提供的屏幕截图适用于通用尺寸 (iPhone/iPad)。根据评论中提供的附加信息,这会导致 AutoLayout 约束问题,这会阻止图像显示在比 StoryBoard 中显示的屏幕尺寸更小的屏幕上。

例如我已经在故事板上复制了你的问题...

这会在 iPhone 4s 的模拟器中产生以下结果....

即有文字,但 没有图像

原因:为较大的 "Universal" 屏幕设置的 autoLayout 约束在两个相对侧中的任何一个都会使图像在较小的屏幕上查看时不可见/消失。

解决方案

1.在情节提要中清除此选定图像的自动布局约束。看下一张图...

2。添加 AutoLayout 约束如下 x2 图片。 (顶部约束,高度 + 宽度)(在容器中水平)。记得为两者打勾"Items of new constraints"。

3。 运行 模拟器 iPhone 4s...例如

** 其他 iPhone 大小的模拟器 运行 也出现了同样的情况。 **

****** 所有工作 ******