【问题标题】:Image renders differently on iPhone 8 and 8 plus图像在 iPhone 8 和 8 plus 上呈现不同
【发布时间】:2018-01-06 17:15:01
【问题描述】:

我尝试以编程方式在进度条图像背景上方添加用作进度条的图像。

但它在 iPhone 8 和 iPhone 8+ 上的呈现方式不同:

使用的代码如下:

private func updateGauge() {
    // Progress value to apply to not overedge content view
    let applicableProgress = 1.0

    // Get proper image
    self.image = getImageColorFrom(progress: applicableProgress)

    // Progress bar frame
    if let superviewHeight = self.superview?.frame.size.height {

        // Height
        let progressViewHeight = CGFloat(applicableProgress) * (superviewHeight-borderVertical*2)

        // Width
        let progressViewWidth = self.superview!.frame.size.width - (borderHorizontal*2)

        // Build y position
        let yPos = superviewHeight - progressViewHeight

        // Finally set frame
        self.frame = CGRect(x: borderHorizontal-decalageHorizontal, y: yPos-borderVertical+decalageVertical, width: progressViewWidth, height: progressViewHeight)
    }
}

private func getImageColorFrom(progress: Double) -> UIImage {
    let image: UIImage

    // Retrieve the good background color based on progress value
    if progress == 0 {
        image = UIImage()
    }
    else if progress < greenMaxValue {
        image = UIImage(progressBar: ProgressBarColor.Green)// "jaugeverte.png"
    }
    else if progress < orangeMaxValue {
        image = UIImage(progressBar: ProgressBarColor.Orange)// "jaugeorange.png"
    }
    else {
        image = UIImage(progressBar: ProgressBarColor.Red)// "jaugerouge.png"
    }

    // Build resizable image
    return image.resizableImage(withCapInsets: UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0), resizingMode: .stretch)
}

关于信息,两个图像都用作 IBOutlet,这就是我们在代码中没有 addSubview() 调用的原因。 我记录了帧大小,结果如下:

progressViewBackgroundFrame (8 / 8+): (17.0, 67.0, 45.0, 460.0) / (17.0, 71.0, 45.0, 525.0)
progressViewFrame (8 / 8+): (8.0, 9.0, 27.0, 443.0) / (8.0, 9.0, 27.0, 508.0)

为什么图像在 iPhone 8 和 8+ 上呈现不同?图像帧是预期的,是 resizableImage 函数的问题吗?

提前致谢, 问候。

【问题讨论】:

  • 您将调整大小模式设置为拉伸.. 纵横比缩放怎么样?
  • 怎么做? resizingMode 的唯一可用选项是 .stretch 和 .tile(已经尝试过最后一个,但不是预期的)。
  • 感谢您的帮助,但最终还是图片本身的问题(见下文)。

标签: ios swift image image-resizing resizable


【解决方案1】:

iPhone 8 是@2x 图像比例因子设备,iPhone 8+ 是@3x 图像比例因子设备。虽然这不会影响我们在 Swift 中使用的点,但它确实会影响图像渲染。大尺寸 iPhone 的图像像素尺寸必须比非大尺寸 iPhone 大 1.5 倍。还要在您的资产目录中验证您有两个单独的图像,分别用于 @2x@3x

【讨论】:

  • 我对所有仪表颜色都有“@2x”和“@3x”。但似乎它们的大小不正确,因为“@3x”不比“@2x”大 1.5 倍。我将在调整图像大小后进行测试。此外,只有gauge@2x.png 和gauge@3x.png(我的意思是没有gauge.png)有什么问题吗?
  • @3x 设备为每个点物理显示 3x3 像素,@2x 设备为每个点物理显示 2x2 像素。这就是为什么@3x 设备看起来比@2x 更锐利,以及为什么@2x 看起来比@1x(视网膜前)更锐利。因此,@3x 图像的像素大小必须恰好大 1.5 倍,因为 iPhone+ 需要覆盖更多像素(多 1.5 倍)。
  • 感谢您的精确。那么最后一个问题:只有gauge@2x.png和gauge@3x.png(意味着没有gauge.png)有什么问题吗?
  • 如果您不想支持非 Retina 设备,几乎没有人支持,那么您只需要 @2x@3x。有些人只是制作@3x 图像并将它们用于他们的@2x 格式,但是您并没有获得像素完美的渲染。因此,当您制作图像(即在 Adob​​e 中)时,请确保当您为 @2x 创建图像大小时,它将不带小数地缩放到 @3x。例如,5x5 图像@2x 必须具有 7.5x7.5 @3x 版本,这是不可取的。如果您制作的是 6x6,则它的 @3x 将是 9x9,现在是可取的。
  • 非常感谢,只要我正确调整了@3x 的大小,它就起作用了 :) 您上一条评论中还有一个问题:这是否意味着我没有 gauge.png(仅表示'@2x 和@3x),非 Retina 屏幕上不会显示任何内容?
猜你喜欢
  • 1970-01-01
  • 2021-01-19
  • 2018-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-19
  • 1970-01-01
  • 2014-12-11
相关资源
最近更新 更多