选项卡栏图标尺寸

Question

苹果公司表示：

根据设备和方向，系统会显示常规的或紧凑的标签栏。您的应用程序应为两种大小都包含自定义标签栏图标。

不幸的是，他们没有说明何时使用哪个大小。

我可能会为这两个尺寸都包含这些图像，但是系统会自动切换它们吗（如何切换）还是我必须自己切换？

- Alper

Answer 1

您不应该自己操作，系统可以自动完成。

这里是苹果人机界面指南，您可以在其中找到图标分辨率： https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/

例如：

如果您正在为选项卡栏使用圆形图标，则应为纵向模式创建以下大小：

• 75px × 75px（25pt × 25pt @3x）
• 50px × 50px（25pt × 25pt @2x）
• 25px × 25px（25pt × 25pt @1x）

横向模式的大小如下：

• 54px × 54px（18pt × 18pt @3x）
• 36px × 36px（18pt × 18pt @2x）
• 18px × 18px（18pt × 18pt @1x）

将这些图标添加到Assets.xcassets或其他地方后，您可以从故事板中选择选项卡栏项目图标：

选择选项卡栏项目，在属性检查器中，选择纵向图像作为图像字段，选择横向图像作为横向字段。

之后系统会为您完成一切。

- Jabson

---

如果你通过编程的方式来做，那个landscape属性是不存在的。 - Alper

这里有一个变量 landscapeImagePhone: UIImage? 它在UIBarItem类中声明，而UITabBarItem类通过继承获取它。 - Jabson

啊，关于UITabBarItem的超类。谢谢！ - Alper

Answer 2

TLDR: 通过将宽度类别设置为任何和紧凑，您可以在资源目录中为常规或紧凑标签栏指定不同的图标。

是的，根据人机界面指南 自定义图标-选项卡栏图标大小 ，您应该包含两种图标尺寸。

在纵向方向上，选项卡栏图标显示在选项卡标题上¹。在横向方向上，图标和标题并排显示。

¹⁾ 这只适用于iPhone。对于全屏应用程序的iPad，在纵向和横向方向上，图标和标题都会并排显示。

根据设备和方向的不同，系统会显示常规或紧凑的选项卡栏。您的应用程序应包括两种尺寸的自定义选项卡栏图标。

指南讨论了 尺寸类别。在本例中，常规或紧凑的选项卡栏表示常规或紧凑的宽度尺寸类别中的选项卡栏。

你可以在资源目录中为不同的尺寸类别指定不同的图片。只需在属性检查器中将宽度类别设置为任何&紧凑，即可为选项卡栏图标图像集设置不同的图片：

在“任意宽度”部分设置更大的图像的常规尺寸类，而在“紧凑宽度”部分设置较小的图像的紧凑尺寸类。系统将根据尺寸类（设备、方向、多任务配置）自动显示正确的图像。您可以在人机界面指南自定义图标-选项卡栏图标大小中找到正确的图标尺寸。例如，对于圆形字形，图标应为：常规选项卡栏为25x25 pt（50x50 px @2x），紧凑选项卡栏为18x18 pt（36x36 px @2x）。对于正方形字形，图标应为：常规选项卡栏为23x23 pt（46x46 px @2x），紧凑选项卡栏为17x17 pt（34x34 px @2x）。还有用于宽字形和高字形的其他尺寸。

在上面的截图中，我使用带有“比例”设置为“单一比例”的PDF图像在属性检查器中。系统会自动生成1x、2x和3x的PNG文件。

- Marián Černý

---

我在S.O.上看到的最佳答案，关于如何使矢量图像实际工作！ - musical_coder

@Marián Černý iPhone 15 在两个方向上都会有一个紧凑的宽度。这难道不意味着我们应该使用高度类而不是宽度类吗？ - undefined

Answer 3

很遗憾，紧凑/常规状态不仅取决于方向或应用程序窗口大小，还取决于设备。

您可以在此处查找不同设备的常规/紧凑尺寸分解。您应该查找第二个值（例如，紧凑宽度，常规高度）。

更改在两种类型的图标之间自动发生，只要方向/应用程序窗口发生变化即可。

- Tamás Sengel

---

啊，他们所说的设备大小类是什么意思？我刚刚注意到你可以向图像资源添加“高度类”。好的，这让事情更清晰了。 - Alper