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 size 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
Related
For the navigation bar and toolbar icons, the sizes are specified as 22x22, 44x44 and 66x66. But what if I want to have an icon on my screen that's not on the navigation bar or on the toolbar? For example, a circular upload photo button on a registration page, that is around 100 x 100. So, an image of a camera inside a regular button.
Are there any guidelines around how large these images need to be?
Assuming a 100x100 version looks right on iPhone 6, what are the sizes I need to add in my Assets.xcassets? 50x50, 100x100, and 200x200?
Do these custom images get scaled depending on the screen size?
Answer 1:
Yes. Apple makes guidelines for everything. ;-) You can have a look at the Human Interface Guidelines. It contains some useful tips for designing your app.
It's a really long document and I haven't found information about the minimum size of images. But If your images are tappable, they should be at least 44x44 pt (not necessarily pixels; see "Answer 2") large.
Provide ample spacing for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.
Source: iOS Human Interface Guidelines -> Visual Design -> Layout
Answer 2:
iOS uses 3 different sizes for images: #1x (which you usually don't put in the file-name), #2x and #3x
The #1x-images should have the same number of pixels in width and height as you are using in the interface builder (pt; points).
The iPhone 6 has a retina display, so it uses #2x. This is twice the resolution of #1x. So if your #2x-image has 100x100 pixels, the #1x-version needs to have 50x50 pixels.
#3x is NOT twice the size of #2x. It's the triple size of #1x. So in your example, you would need 150x150 pixels.
The Technote QA1686 contains some more information about the different resolutions.
Answer 3:
Yes. But especially on older devices and when you are using many images, the performance will be better, if you provide images of the correct size.
This image (a screenshot of the assets catalog, Apple shows in the technote I mentioned), illustrates the calculation of the image-sizes based on the size (in pt) used in the interface builder:
I'm trying to add my own image as a bar button item, but I don't know how to get the image to scale properly. Apple's Human Interface guidelines recommends that my image be 44x44 px, but when I use a 44x44 px image, it is too large for the toolbar, as you can see:
When I use a smaller version of the image, it looks pixellated on the Retina display. What am I supposed to do here?
In images.xcassets, you can add the images as 1x, 2x and 3x. Xcode will use the appropriate image size depending on the device.
You need to follow apple guidelines for designing you can find it from this link https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
You can find the attached screenshot image for correct sizing for the UIBarButtonItem image size as par the apple guidelines you have to use 44X44 for ratina (#2x) and 22X22 for normal (#1x) for UIBarButtonItem
width 22 pixels X height 22 pixels - ideal for left or right BarButtonItem.
You can resize any image to custom sizes using online tools, one such I used is
http://www.picresize.com/
I followed the PaintCode tutorials on StyleKit and I've successfully exported icons into a Swift project (code only - MyStyleKit.swift file). I'm trying to understand the relationship between the UIImage generated in code and the image sizes expected for different iOS devices.
I wired up the MyStyleKit object in the storyboards to the image for the Tab bar icon. Works great but I can't tell if the resolution of the image is adjusting depending on the device. Apple's HIG suggests the tab bar icon size in pixels should be
75 x 75 px for #3x images (iphone6+)
50 x 50 px for #2x retina image
25 x 25 px for non-retina
Firstly what canvas size should I be choosing in PaintCode initially? I guessed at putting the canvas size as 25 x 25, reasoning that I should map to the UI points size.
When I rig up the icon in Storyboards does it automatically adjust to whether it needs #3x, #2x or #1x?
Should I be setting the canvas size to the UI points size?
Any help would be greatly appreciated.
Yes, set the canvas size to 25×25 points. You can then preview the canvas at #1x, #2x or #3x (or infinite) scale.
When you ask the StyleKit for image of this canvas, the returned UIImage will have the size of 25×25 points, but scale of the current screen. That means 25×25, 50×50 or 75×75 pixels.
TriggerIO supports the native tab bar and it looks really easy to add buttons but does it support retina graphics for the icons? Or is this needed? (specifying the nicer image scales down? )
A single, larger image is the best option - we do scale them down to fit properly inside the button itself.
As a rule of thumb, the icon should be > 100 pixels high to stay crisp on retina displays.
I've tried using icons that are 100x100 and 200x200, and they all look fuzzy and pixelated on iPhones with Retina display. Looks like they are resized for non-retina devices only.
I am working on an iPhone app that has a tab bar. I made the tab bar icons using a vector graphics editor and exported them to PNG. The icons look fine, except when selected.
This doesn't happen on the retina display.
I use self.tabBarItem.image = [UIImage imageNamed:#"Symbol"]; to set the image.
Here is the actual PNG: http://i.imgur.com/dBTDe.png (though it happens with all the images).
What can I do about this? Why does this happen?
This appears to happen when the images don't have a margin. If you add a margin of 2px it will look fine:
You should have 2 copies of the image. One for normal or older devices, and one for retina display.
Your images should be named accordingly.
image1.png // older devices
image1#2x.png // for retina display. #2x is case sensitive as well
When you choose your image, be sure to choose the normal image. The OS will select the #2x image if it is capable of displaying it.