I have a UITabBarController.
I added images to the bar buttons. On the ViewController the image size is fine, but on the TabBarController it looks all messed up.
Furthermore, when I fire up the app, and click the tabs - the images change size. I read online that I need to set the inset to be, for example:
Top: 5, Bottom: -5
But then the image isn't the size I want it to be, and it overlaps the text I want it to also have.
See image please.
How do I fix that? I am using Swift.
As per Apple Human Interface Guidelines, Tab Bar Icon size varies for different size glyphs and for portage and landscape mode, refer the guide below and check if the icon size is matching the size given. Make sure to verify #2x and #3x image icon sizes and add them if missing the proper size.
You should set images with correct size - 32x32, because UITabBarController does not fit images automatically.
For resizing images you can use something like this: https://github.com/ymedialabs/UIImageCategories/blob/master/UIImage%2BvImage.swift
Related
I use asset catalog with 2x images for iPhone5 and 6 as described in docs:
Image for navigation bar background is 750x128 (750 x 44 * 2 + 20 * 2) because I want also to cover status bar. 750 is iPhone6 resolution width. Bg image setting:
self.navigationController?.navigationBar
.setBackgroundImage(UIImage(named: "nav_bar_bg"), forBarMetrics: .Default)
Let's look at result:
OK. iPhone5:
Not OK. How can I downscale it without removing background image from asset catalog? I really don't want to hardcode it. It's really annoying that iPhone5 and 6 resources can't be separated.
Any suggestions? Thanks
Sorry, didn't notice the UINavigationBar thing... You can change the resize of the picture that is used in the background by making your picture stretchable. That way you can use a picture that fits the smaller devices (the iPhone5 in your example) and keep the picture centered in the iPhone 6.
Another more convoluted solution would be to subclass the NavBar altogether and rewrite the way the picture is drawn.
You should use NSLayoutConstraints (leading, top and trailing), and set the UIImageView content to Fit. That way you won't need to change the image, it will be automatically scaled by the application.
I am currently adding images to each one of my tab bar items. One image I like has a size that is much bigger then the area of the bar item. When I set the image of the bar item in the storyboard and run the emulator... the bar button with that image covers the entire screen.
Now I thought there was some automatic way of allowing the images to resize for each bar button. This is sadly not the case. Is there a way when the tab bar loads that I can resize the images within each tab bar?
You should prepare 3 images icons for each tab bar item (1x, 2x and 3x).
First create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as iconTab0#3x.png.
Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as iconTab0#2x.png.
Finally resize it to 25w 25h pixels (maximum: 48 x 32) and save it as iconTab0.png.
Now all you need is to select those 3 images at your finder and drag them to your image assets.
Human Interface Guidelines
Another option is to create a vector image PDF. What you do is resize your vector image to the smallest size (22x22) and export it to a PDF file. You can do this with Adobe Illustrator, Sketch and many other vector image editing tools.
Then you add the PDF file to your assets folder and in the Properties Inspector set "Scale Factors" to "Single Vector". That should do it!
Pretty easy to do this with ios8. In Storyboard, click on each tab item (the individual controller for the tab you want to change the image of.
Set the insets accordingly...
There is this issue though. Fixed with this.
#LeoDabus provided a good answer.
For resizing the image, a good and easy way to do this is to:
Add your image to the 1x, 2x, 3x boxes in Assets.xcassets folder.
Then, click on the image in each box and double-finger tap the trackpad/right-click which will reveal the options here:
Click on 'Open with External Editor', which will bring you to Preview.
Click on 'Tools' then 'Adjust Size'.
Adjust the size of your image based on your requirements. Then hit 'Save' and close the window. The image in Xcode should be auto-updated.
I have a navigation bar that uses a custom image for the background. Along with some images for buttons UIBarButtonItems.
When the device is rotated the navigation bar height is obviously changed to 32px instead of 44px.
Is it best practice to then make another image to be used for the navigation bar background or create stretchable images instead?
I would create two stretchable images one for retina an one for default devices, it's is best practice to use stretchable images instead of full length images because you decrease the app size and there will be no problems if the device screen size is changed (if the stretchable image is seted properly)
I'm trying (everything in XCode with Interface Builder) to create a UIButton with image adding it to UIToolbar, which makes it UIBarButtonItem (when click twice it shows the UIButton properties).
I have a image#2x.png image with size 64x88 (height is 88, because in Retina it's the toolbar height). I'm not interested in non-retina screens. I added this image to UIButton setting Mode in View properties to Center (or Aspect Fit, it shouldn't really matter here; tried both, aswell).
Set its size to 32x44 (44 height in builder). Then, dragged it to UIToolbar.
Now, I want to change the width of my button to make it larger, because I want to give user some more space to tap, also, I planned the toolbar background for that. And I want the image on this button to remain the same, but centered. But, when I try to resize the UIBarButtonItem, it actually scales the image, no matter what Mode is set.
That's what happens (I'm showing an actual dragging process):
However, if I change image real size to height 44, it works well. But 44 height looks ugly in Retina devices, so, what should I do?
I've seen this happen. For the sake of argument, create two images, image.png and image#2x.png, and when setting the image of the button, select image.png in Xcode.
Alternatively, you can create a UIView-based UIBarButtonItem and have a UIImageView and a UIButton. This way, you have a more precise control over the image sizing.
I have a UITabBarController, initialized by a xib file. all it's view controllers are initialized by a xib file as well.
In apple's HIG it is specified that a High-resolution tab bar icon should be approximately 60x60. I have a set of 52x52 icons, and I used them as the image for the tab items. but for some reason, it displays them as if I'm using a none-high resolution screen - they're off the bounds of the tab bar item, and are pixelized.
How can i set a "fixed" size for the icons so this will be avoided, and how can I, using Interface builder, choose different tab bar images for low-resolution and high-resolution screens?Tnx in advance!
What names are you using for these images?
What you usually have to do is have the standard image named xxxx.png and the high resolution retina display image named xxxx#2x.png
When you use these images in interface builder, use the standard image, the system will look for that filename with "#2x" if it's being executed on an iPhone 4.