选项卡栏图标大小

Tab Bar Icon Size

苹果says:

Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

不幸的是,他们无法指定您何时获得。

另外,我可能会包含两种尺寸的图片,但系统会自动在它们之间切换吗(如何?)还是我必须自己做?

不幸的是,compact/regular 状态不仅取决于方向或应用 window 大小,还取决于设备。

您可以找到针对不同设备的 regular/compact 尺寸细分 here。您应该寻找第二个值(例如紧凑宽度,常规高度)。

只要 orientation/app window 发生变化,两种类型的图标就会自动发生变化。

你不应该自己做这个系统可以自动完成。

这里是 Apple Human Interface Guidelines,您可以在其中找到图标分辨率: 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 或其他地方后,您可以 select 故事板中的标签栏项目图标:

select Tab Bar项,在属性检查器中,image字段选择portrait image,landscape字段选择landscape image。

之后系统会为你做一切。

TLDR:您可以通过将宽度 Class 设置为任意和紧凑来为资产目录中的常规或紧凑选项卡栏指定不同的图标。

是的,根据人机界面指南Custom Icons - Tab Bar Icon Size您应该包括两种图标大小

In portrait orientation, tab bar icons appear above tab titles¹. In landscape orientation, the icons and titles appear side-by-side.

¹⁾ 这仅适用于 iPhone。在 iPad 上 full-screen 应用程序的图标和标题显示 side-by-side 纵向和横向。

Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

准则正在讨论 Size Classes。在这种情况下,常规或紧凑的标签栏表示常规或紧凑宽度尺寸 class.

的标签栏

您可以在资产目录中为不同大小的 classes 指定不同的图像。只需在 Attributes Inspector for you tab bar icon Image Set 中将 Width class 设置为 Any & Compact

在“任意宽度”部分为常规尺寸 class 设置较大的图像,在“紧凑宽度”部分为紧凑尺寸 class 设置较小的图像。

系统会根据大小class(设备、方向、多任务配置)自动显示正确的图像

您可以在人机界面指南中找到图标的正确图标大小 Custom Icons - Tab Bar Icon Size

例如,对于圆形字形,图标应为:

  • 25x25 pt (50x50 px @2x) 用于常规标签栏
  • 18x18 pt (36x36 px @2x) 紧凑型标签栏

对于方形字形,图标应为:

  • 常规标签栏为 23x23 pt (46x46 px @2x)
  • 紧凑型标签栏为 17x17 pt(34x34 像素 @2x)

宽字形和高字形还有其他尺寸。

在上面的屏幕截图中,我在属性检查器中使用 Scale 设置为 Single Scale 的 PDF 图像。系统自动生成1x、2x、3x PNG。