我应该为iOS应用准备多少基本图像尺寸?

时间:2018-09-10 02:59:17

标签: ios image

我是iOS开发人员,通常使用Swift。最近,我想知道应该如何为iOS中的应用程序使用基本图像大小。

现在,我为所有应用基于640x1156(iPhone SE大小)准备图像(例如,我使用640x1156的背景图像)。但是有人说我应该使用750x1334(iPhone 6,7,8尺寸),因为如果使用iPhone SE尺寸的图像,这些质量看起来会有些低。此外,只有很少的人使用iPhone SE。

我应该使用哪个尺寸的图像?

更新

我使用背景图像和其他对象(6个正方形),当使用iPhone 6s和iPhone X时,外观因设备而异。

iPhone 6s iPhone X

class Constants {

    //width of base design size
    static let guiPartsWidthOnDesign = CGFloat(750.0)

    //ratio for layout
    static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / (Constants.guiPartsWidthOnDesign / 2.0)

    //detect safe area
    static let safeArea = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom

}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    self.view.frame = CGRect(x: 0,
                             y: 0,
                             width: self.view.frame.size.width,
                             height: self.view.frame.size.height)

        //backgrond
        let background = UIImageView.init(frame: UIScreen.main.bounds)
        background.center.x = self.view.frame.size.width/2
        background.image = UIImage(named:"BG")
        background.contentMode = UIViewContentMode.scaleAspectFill
        self.view.insertSubview(background, at: 0)

        //downleft blue button
        let blueButton = UIImageView.init(frame: CGRect(
            x: 64/2*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(blueButton)
        blueButton.backgroundColor = UIColor.blue

        //green button
        let greenButton = UIImageView.init(frame: CGRect(
            x: (60/2+64/2+128/2)*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(greenButton)
        greenButton.backgroundColor = UIColor.green

        //cyan button
        let cyanButton = UIImageView.init(frame: CGRect(
            x: (64/2+(60/2)*2+(128/2*2))*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(cyanButton)
        cyanButton.backgroundColor = UIColor.cyan

        //4 blue buttons
        for i in 1..<5 {
            let subBlueButton = UIImageView.init(frame: CGRect(
                x: 64/2*Constants.guiPartsMultiplier,
                y: self.view.frame.size.height-((43.0+CGFloat(50*i))*Constants.guiPartsMultiplier)-Constants.safeArea!,
                width: 60/2*Constants.guiPartsMultiplier,
                height: 52/2*Constants.guiPartsMultiplier))
            self.view.addSubview(subBlueButton)
            subBlueButton.alpha = 1.0
            subBlueButton.backgroundColor = UIColor.blue
        }

        //down bar
        let bar = UIImageView.init(frame: CGRect(
            x:0,
            y: self.view.frame.size.height-50,
            width: self.view.frame.size.width,
            height: 50))
        bar.alpha = 0.3
        bar.backgroundColor = UIColor.blue
        self.view.addSubview(bar)
}

UPDATE2
我的资产是:

assets

UPDATE3 关心安全区域,它在iPhone X上看起来像这样,与iPhone 6s上的完全不同。...

iPhone 6s

iPhone X

2 个答案:

答案 0 :(得分:1)

请点击此链接https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

在Xcode中选择资产文件夹->在底部单击+符号->选择“新图像集”->为此设置名称->现在拖放1x,2x和3x大小的图像。此处查看此图片尺寸说明What should image sizes be at @1x, @2x and @3x in Xcode?(对于所有设备图片尺寸,请点击此链接)

iPhone X,iPhone 8 Plus,iPhone 7 Plus和iPhone 6s Plus @ 3x

所有其他高分辨率iOS设备@ 2x

我的屏幕截图

enter image description here

在此屏幕快照中,选择新图像集

enter image description here

在这里您需要设置图像名称并拖放图像

答案 1 :(得分:0)