How big should a UIBarButtonItem image be?

时间秒杀一切 提交于 2019-11-27 02:39:00

As of iOS 11, the Human Interface Guidelines suggest glyphs be about 25×25 points in toolbars and navigation bars, up to a maximum of about 28 points. (And the HIG should definitely be in your bookmarks if you're working on iOS apps!)

That would translate to images 25px square for older devices like iPad 2 / Mini, 50px square for most current devices like iPhone 8 or iPad, and 75px square for Retina HD devices (the iPhone 6/7/8 Plus, or iPhone X). Asset catalogs will help immensely in keeping the different asset sizes organized (and Xcode can even generate them from vector sources these days).

The Human Interface Guidelines tells you this since iOS7:

Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:

About 44 x 44 pixels

About 22 x 22 pixels (standard resolution)

Here is a great matrix of all needed sizes for resources for all platforms

Yes, Apple suggest to use images with 22px, 44px and 66px size for UIBarButtonItems, but if you use preinstalled icons like Bookmark icon, it's sized by 25px 50px and 75px for 1x, 2x and 3x respectively.

Here are 2 icons in UIToolbar. On the right is Apple's system bookmark icon and on the left my custom icon.

Here my custom icon sized 22px-44px-66px:

And here 25px-50px-75px:

So, if you use custom and system icons in one toolbar, I would suggest to use 25px-50px-75px scaling, or your custom icons will be smaller. In fact I always use 25px-50px-75px scaling, it looks better on toolbars, as for me.

Easy: Include your images in Assets.xcassets.

How?

  • Clic on Assets.xcassets
  • Clic + icon and then click "New Image Set"
  • Drag and drop your image to 3x slot
  • Rename the image set
  • In the BarButton you can use this name under "Image" field
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!