【问题标题】:How big should a UIBarButtonItem image be?UIBarButtonItem 图像应该有多大?
【发布时间】:2010-12-08 02:11:15
【问题描述】:

我正在寻找创建自己的自定义“按日期排序”和“按数字排序”按钮,我计划将它们作为右侧按钮放置在导航栏中。

我的图片应该有多大才能适当地填充空间——UIBarItem 文档页面没有列出任何关于图片大小的信息。

【问题讨论】:

    标签: ios uikit uibarbuttonitem uibaritem


    【解决方案1】:

    从 iOS 11 开始,Human Interface Guidelines 建议字形在工具栏和导航栏中大约为 25×25 磅,最多约为 28 磅。 (如果您正在开发 iOS 应用程序,HIG 绝对应该在您的书签中!)

    对于 iPad 2 / Mini 等旧设备,图像 25 像素正方形,iPhone 8 或 iPad 等大多数当前设备的 50 像素正方形,Retina HD 设备(iPhone 6/7/8 Plus 或 iPhone)的 75 像素正方形X)。资产目录将极大地帮助组织不同大小的资产(现在 Xcode 甚至可以generate them from vector sources)。

    【讨论】:

    • 谢谢,正是我需要知道的内容以及指向出色文档的指针。已收藏。
    • 我希望 Mobile HIG 声明的内容比“大约 20x20”更有用。如果您使用正好 20x20px 的图像,它实际上不会映射 1:1,并且按钮不会是方形的。
    • Clafou,您是在谈论按钮内容的图像(就像这个问题一样),还是用作按钮的背景(使用外观自定义 API)?您是否发布过关于此的问题?
    • 您可以通过查看 Apple 在此处提供的图片了解 Apple 使用的一些不同尺寸:developer.apple.com/library/ios/#documentation/uikit/reference/…
    • 对于 iOS 7,请参阅 @hashier 的回答。
    【解决方案2】:

    Human Interface Guidelines 从 iOS7 开始告诉你:

    无论图标的视觉风格如何,创建工具栏或导航 以下大小的条形图标:

    大约 44 x 44 像素

    大约 22 x 22 像素(标准分辨率)

    这里是great matrix,是所有平台资源所需的all大小

    【讨论】:

      【解决方案3】:

      是的,Apple 建议为 UIBarButtonItems 使用 22px、44px 和 66px 大小的图像,但如果您使用预装的图标(如书签图标),则其大小分别为 25px、50px 和 75px,用于 1x、2x 和 3x。

      UIToolbar 中有 2 个图标。右边是苹果的系统书签图标,左边是我的自定义图标。

      这是我的自定义图标,大小为 22px-44px-66px:

      这里是 25px-50px-75px:

      因此,如果您在一个工具栏中使用自定义图标和系统图标,我建议使用 25px-50px-75px 缩放,否则您的自定义图标会更小。事实上,我总是使用 25px-50px-75px 缩放,它在工具栏上看起来更好,对我来说。

      【讨论】:

      • 谢谢!我确信某些图标(例如书签)比 22-44-66px 的大小要大一些
      • 我试过 25px-50px-75px 真的很好看。不小不大。
      【解决方案4】:

      简单:将您的图像包含在 Assets.xcassets 中。

      怎么做?

      • 点击 Assets.xcassets
      • 单击 + 图标,然后单击“新建图像集”
      • 将图片拖放到 3x 插槽中
      • 重命名图像集
      • 在 BarButton 中,您可以在“图像”字段下使用此名称

      【讨论】:

      • 这如何回答关于尺寸的问题?
      • @AndreaLazzarotto 好点,但这个答案包括其他答案中遗漏的重要信息
      猜你喜欢
      • 2013-12-10
      • 1970-01-01
      • 2013-08-06
      • 1970-01-01
      • 2013-07-07
      • 1970-01-01
      • 1970-01-01
      • 2016-12-19
      • 2019-02-14
      相关资源
      最近更新 更多