CODEWITHSUNDEEP
iosswiftimageiconsuitabbarcontroller
Patia1999
Patia1999

Reputation: 77

How can I correctly size UITabBarController icons?

I use UITabBarController. In landscape it is looking fine:

working tab bar

In portrait though the images are way too big:

not working tab bar

The images are within xcassets, 512px squared in size and use single scale.

I use UITabBarViewController like this:

let tabBarController = UITabBarController()
tabBarController.viewControllers = [Tab1Controller(), Tab2Controller()]

In the TabXControllers, I have:

title = "Tab X"
tabBarItem.image = UIImage(named: "Tab X")

UPDATE:

I am building for iOS 13, so the Apple HIG at https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/ is not valid in this case (“iOS 12 and Earlier”). I assume in iOS 13 the icons can be bigger than they could be in iOS 12. They get downscaled automatically (see first screenshot) What am I doing wrong?

Upvotes: 0

Views: 4232

Answers (2)

Anton SVTSV
Anton SVTSV

Reputation: 31

I also had the same issue, and image insets worked perfectly

tabBarItem.imageInsets = UIEdgeInsets(top: 85, left: 85, bottom: 85, right: 85)

Upvotes: 3

Jawad Ali
Jawad Ali

Reputation: 14397

For iOS 12 and below:

Read Apple Documentation for Human Interface Guidelines

Tab Bar Icon Size

In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

Target width and height (circular glyphs)

Regular tab bars    Compact tab bars
75px × 75px (25pt × 25pt @3x)   54px × 54px (18pt × 18pt @3x)
50px × 50px (25pt × 25pt @2x)   36px × 36px (18pt × 18pt @2x)

Target width and height (square glyphs)

Regular tab bars    Compact tab bars
69px × 69px (23pt × 23pt @3x)   51px × 51px (17pt × 17pt @3x)
46px × 46px (23pt × 23pt @2x)   34px × 34px (17pt × 17pt @2x)

For IOS 13 and Above

In iOS 13 or later, prefer using SF Symbols to represent tasks and modes in your app. SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Also you can create Custom SFSymbols. According to Apple

If you need a symbol that isn't provided by SF Symbols, you can create your own. The SF Symbols app lets you export a symbol as a template in a reusable, vector-based file format. To create a custom symbol, export an SF symbol that's similar to the design you want and modify the template using a vector-editing tool like Sketch or Illustrator

Upvotes: 2

Related Questions