如何在 Xcode 8 中为 Assets.xcassets 的不同屏幕尺寸添加图像?
How to add Images for different screen size from Assets.xcassets in Xcode 8?
我为我的登录屏幕创建了不同尺寸的背景图片。
我参考了苹果 link https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
但是我没有做启动屏幕,我只是想给登录屏幕添加背景。
我想知道 1x、2x 和 3x 是哪个?
另外一个问题是当我创建图像集时,应该将多大尺寸的图像拖到哪个地方。我对此一无所知。还是我们只需要 3 张图像(在通用行中)?
然后,风景图像怎么样?我应该把它放在哪里?
我会创建以下尺寸:
iPhone:
- @1x - 640 x 1136(iPhone SE)
- @2x - 750 x 1334 (iPhone 7, 6S)
- @3x - 1242 x 2208(iPhone 7 Plus,iPhone 6S Plus)
iPad:
- @2x - 2048 x 1536(iPad Air,Retina iPad 第一代和第二代/第三代和第四代以及 Pad Mini 第二代和第三代)
实际上,您需要为此编写代码。
首先,你把不同名字的图片分别放在Assets里
第二个,使用以下代码:
var backgroundImageName = ""
switch UIScreen.main.bounds.height {
case 480:
//for iPhone4s,
backgroundImageName = "background_iPhone4s"
break;
case 568:
//iPhone SE, iPhone5, iPhone 5s
backgroundImageName = "background_iPhone5"
break;
case 667:
//iPhone 6, 6s, 7
backgroundImageName = "background_iPhone6"
break;
case 736:
//iPhone 6 plus, 6s plus, 7 plus
backgroundImageName = "background_iPhonePlus"
break;
default:
break;
}
backgroundImageView.image = UIImage(named: backgroundImageName)
我同意 Yun CHEN 的观点,因为我认为最安全的解决方案是为每个分辨率设置一个图像集,从而避免在设备上执行图像缩放。
根据设备的渲染系数(2x、3x 等)(例如 4.7" iPhones 上的 2x,作为 iPhone8 ),您只需要将适当大小的图像放入相应的插槽中即可。
例如,iPhones 8 的图像集只需要 2x 图像。
但是,请注意以下几点:
UIScreen.main.bounds.height returns 逻辑分辨率的高度 - 即点 ,与 UIScreen.main.nativeBounds.height 相反,return 是 实际分辨率的高度 - 即像素 (实际上,UIScreen.main.nativeBounds.height 总是 return 是纵向模式下设备的像素高度,即使您处于横向模式也是如此)。 即使检查点,也应始终使用与实际分辨率匹配的图像 - 即像素。
从 iOS 8 开始 UIScreen.main.bounds.height 无论您的设备处于纵向模式还是横向模式,return 都会有不同的值 .
因此,如果你想用它来区分设备,你应该检查你的应用程序可以使用的所有值,并且你应该为每个值都有一个单独的图像集。
例如,对于同时支持纵向和横向模式的应用程序:
var backgroundImageName = ""
if UIDevice().userInterfaceIdiom == .phone
{
switch UIScreen.main.bounds.height
{
case 812: // 5.8" (iPhone X) (3x) (Portrait)
backgroundImageName = "background_1125x2436"
case 736: // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Portrait)
backgroundImageName = "background_1242x2208"
case 414: // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Landscape)
backgroundImageName = "background_2208x1242"
case 667: // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Portrait)
backgroundImageName = "background_750x1334"
case 375:
// 5.8" (iPhone X) (3x) (Landscape)
if (UIScreen.main.bounds.width == 812) {
backgroundImageName = "background_2436x1125"
}
// 4.7" (iPhone 8, 7, 6s, 6) (2x) (Landscape)
else if (UIScreen.main.bounds.width == 667) {
backgroundImageName = "background_1334x750"
}
case 568: // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Portrait)
backgroundImageName = "background_640x1136"
case 320: // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Landscape)
backgroundImageName = "background_1136x640"
default:
break
}
}
else if UIDevice().userInterfaceIdiom == .pad
{
switch UIScreen.main.bounds.height
{
case 1366: // 12.9" (iPad Pro 12.9) (2x) (Portrait)
backgroundImageName = "background_2048x2732"
case 1112: // 10.5" (iPad Pro 10.5) (2x) (Portrait)
backgroundImageName = "background_1668x2224"
case 834: // 10.5" (iPad Pro 10.5) (2x) (Landscape)
backgroundImageName = "background_2224x1668"
case 1024:
// 12.9" (iPad Pro 12.9) (2x) (Landscape)
if (UIScreen.main.bounds.width == 1366) {
backgroundImageName = "background_2732x2048"
}
// 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Portrait)
else if (UIScreen.main.bounds.width == 1366) {
backgroundImageName = "background_1536x2048"
}
case 768: // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Landscape)
backgroundImageName = "background_2048x1536"
default:
break
}
}
self.backgroundImageView.image = UIImage(named: backgroundImageName)
如果需要包含其他设备(例如 Apple Watch),依此类推。
我为我的登录屏幕创建了不同尺寸的背景图片。
我参考了苹果 link https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
但是我没有做启动屏幕,我只是想给登录屏幕添加背景。
我想知道 1x、2x 和 3x 是哪个?
另外一个问题是当我创建图像集时,应该将多大尺寸的图像拖到哪个地方。我对此一无所知。还是我们只需要 3 张图像(在通用行中)?
然后,风景图像怎么样?我应该把它放在哪里?
我会创建以下尺寸:
iPhone:
- @1x - 640 x 1136(iPhone SE)
- @2x - 750 x 1334 (iPhone 7, 6S)
- @3x - 1242 x 2208(iPhone 7 Plus,iPhone 6S Plus)
iPad:
- @2x - 2048 x 1536(iPad Air,Retina iPad 第一代和第二代/第三代和第四代以及 Pad Mini 第二代和第三代)
实际上,您需要为此编写代码。
首先,你把不同名字的图片分别放在Assets里
第二个,使用以下代码:
var backgroundImageName = ""
switch UIScreen.main.bounds.height {
case 480:
//for iPhone4s,
backgroundImageName = "background_iPhone4s"
break;
case 568:
//iPhone SE, iPhone5, iPhone 5s
backgroundImageName = "background_iPhone5"
break;
case 667:
//iPhone 6, 6s, 7
backgroundImageName = "background_iPhone6"
break;
case 736:
//iPhone 6 plus, 6s plus, 7 plus
backgroundImageName = "background_iPhonePlus"
break;
default:
break;
}
backgroundImageView.image = UIImage(named: backgroundImageName)
我同意 Yun CHEN 的观点,因为我认为最安全的解决方案是为每个分辨率设置一个图像集,从而避免在设备上执行图像缩放。
根据设备的渲染系数(2x、3x 等)(例如 4.7" iPhones 上的 2x,作为 iPhone8 ),您只需要将适当大小的图像放入相应的插槽中即可。 例如,iPhones 8 的图像集只需要 2x 图像。
但是,请注意以下几点:
UIScreen.main.bounds.height returns 逻辑分辨率的高度 - 即点 ,与 UIScreen.main.nativeBounds.height 相反,return 是 实际分辨率的高度 - 即像素 (实际上,UIScreen.main.nativeBounds.height 总是 return 是纵向模式下设备的像素高度,即使您处于横向模式也是如此)。 即使检查点,也应始终使用与实际分辨率匹配的图像 - 即像素。
从 iOS 8 开始 UIScreen.main.bounds.height 无论您的设备处于纵向模式还是横向模式,return 都会有不同的值 . 因此,如果你想用它来区分设备,你应该检查你的应用程序可以使用的所有值,并且你应该为每个值都有一个单独的图像集。
例如,对于同时支持纵向和横向模式的应用程序:
var backgroundImageName = ""
if UIDevice().userInterfaceIdiom == .phone
{
switch UIScreen.main.bounds.height
{
case 812: // 5.8" (iPhone X) (3x) (Portrait)
backgroundImageName = "background_1125x2436"
case 736: // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Portrait)
backgroundImageName = "background_1242x2208"
case 414: // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Landscape)
backgroundImageName = "background_2208x1242"
case 667: // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Portrait)
backgroundImageName = "background_750x1334"
case 375:
// 5.8" (iPhone X) (3x) (Landscape)
if (UIScreen.main.bounds.width == 812) {
backgroundImageName = "background_2436x1125"
}
// 4.7" (iPhone 8, 7, 6s, 6) (2x) (Landscape)
else if (UIScreen.main.bounds.width == 667) {
backgroundImageName = "background_1334x750"
}
case 568: // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Portrait)
backgroundImageName = "background_640x1136"
case 320: // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Landscape)
backgroundImageName = "background_1136x640"
default:
break
}
}
else if UIDevice().userInterfaceIdiom == .pad
{
switch UIScreen.main.bounds.height
{
case 1366: // 12.9" (iPad Pro 12.9) (2x) (Portrait)
backgroundImageName = "background_2048x2732"
case 1112: // 10.5" (iPad Pro 10.5) (2x) (Portrait)
backgroundImageName = "background_1668x2224"
case 834: // 10.5" (iPad Pro 10.5) (2x) (Landscape)
backgroundImageName = "background_2224x1668"
case 1024:
// 12.9" (iPad Pro 12.9) (2x) (Landscape)
if (UIScreen.main.bounds.width == 1366) {
backgroundImageName = "background_2732x2048"
}
// 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Portrait)
else if (UIScreen.main.bounds.width == 1366) {
backgroundImageName = "background_1536x2048"
}
case 768: // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Landscape)
backgroundImageName = "background_2048x1536"
default:
break
}
}
self.backgroundImageView.image = UIImage(named: backgroundImageName)
如果需要包含其他设备(例如 Apple Watch),依此类推。