Positioning UITabBarItem's image

I want to position the image of a UITabBarItem with the imageInsets Property, but whenever I use a SystemItem or an SFSymbol as UIImage it doesn't work.
Contrary to this a normal custom image works just fine and I tried it in code and with the storyboard.

So my problem is that the position of some SFSymbols is not properly centred, is there a way to fix this?



Accepted Reply

I looked at the icons themselves (importing both function and gear in a UIImage).

It appears they have a very different aspect ration:
func is wide: like 70 * 44
gear is square : like 44 * 44

Hence, when drawing, they scale to fit ; and the height of function icon is reduced.

Maybe a solution is to create your own icon and make it square (entered in the square you want).

Update
I did it, creating a 40*40 icon and it works quite well.
I had a series of steps to get there :
  1. - screenshot the icon

  2. - pasted in drawing in openOffice

  3. - screenshot a square around it (it has white background)

  4. - pasted again in open office

  5. - with Tools > Color replacer, change white color to transparent

  6. - selected the object and copied

  7. - in Preview, create from pasteboard

  8. - resize to 40 * 40 and name "f of x"

  9. - then copied in Xcode project

10. - and used it as the image.

Note: at step 8, you may fine tune the values (changing resolution, changing a little bit the size, but keep it square).

Replies

some SFSymbols is not properly centred

Could you give examples of some OK and some not OK ?
When not OK, it it a few pixels offset or much more ?
E.g. the "gearshape" or "gear" symbol, they are very close to the title, whereas the "function" symbol is far away.
It only seems to be a few pixels, but both next to each other look pretty bad.

I would upload a picture, but I don't see a way to do that here.
E.g. the "gearshape" or "gear" symbol, they are very close to the title, whereas the "function" symbol is far away. 
It only seems to be a few pixels, but both next to each other look pretty bad.

I created a TabBarController, with 4 child views, with Bar item icons as
  • function

  • gear

  • rectangle and pencil and ellipsis

  • square and arrow up

All icons are aligned on top
All labels are aligned

But icons have different size, so effectively, func and rectangle appeared shifted to the top.

Read this, may be a solution to your problem
https://stackoverflow.com/questions/10533917/ios-5-custom-tab-bar-image-vertical-alignment

Note I tested as described there, both in code of the VC viewDidload
Code Block
tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)

or in IB by setting the insets.

But could not get any change

I also tested this in viewDidLoad, to no avail
Code Block
for tab in self.tabBarController!.tabBar.items! {
tab.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}


I also tested this, but could not get the result they show to move the icon:
https://stackoverflow.com/questions/16285205/moving-uitabbaritem-image-down
I looked at the icons themselves (importing both function and gear in a UIImage).

It appears they have a very different aspect ration:
func is wide: like 70 * 44
gear is square : like 44 * 44

Hence, when drawing, they scale to fit ; and the height of function icon is reduced.

Maybe a solution is to create your own icon and make it square (entered in the square you want).

Update
I did it, creating a 40*40 icon and it works quite well.
I had a series of steps to get there :
  1. - screenshot the icon

  2. - pasted in drawing in openOffice

  3. - screenshot a square around it (it has white background)

  4. - pasted again in open office

  5. - with Tools > Color replacer, change white color to transparent

  6. - selected the object and copied

  7. - in Preview, create from pasteboard

  8. - resize to 40 * 40 and name "f of x"

  9. - then copied in Xcode project

10. - and used it as the image.

Note: at step 8, you may fine tune the values (changing resolution, changing a little bit the size, but keep it square).
First of all, thank you very much.

I came across this StackOverflow question yesterday as well but thought I did something wrong
and creating my own image just didn't feel right, but if that's the solution.

Still, I don't understand why the imageInsets do not work on UIImages that are initialized with an SFSymbol but do work when I use an image which is in an Assets folder.

creating my own image just didn't feel right

What is not OK with an image ?
The test I did is not so bad.
If you want to post an email address for a short moment (edit your post then within the next hour to avoid leaving your email), I will send you copy of test app I created for this.

why the imageInsets do not work on UIImages that are initialized with an SFSymbol but do work when I use an image which is in an Assets folder.

Yes, that's surprising.
I assume the reason is that SF is not exactly an image, or is not handled as such. It may be closer to an emoji.

In anycase, that is worth a bug report.
Sure and thanks in advance.