How big should a UIBarButtonItem image be?

I'm looking to create my own custom Sort By Date and Sort By Number buttons that I plan on placing in the navigation bar as the right button.

How big should my image be to appropriately fill the space -- the UIBarItem documentation page doesn't list anything about the si开发者_如何学Cze the image should be.

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