UITabBar Large Content Size Image (HUD) doesn't display in Large Text mode

Viewed 1379

iOS 11 has an accessibility feature that shows a large version of a tabbar icon in a pop-up HUD when long pressed. In a WWDC presentation, it was mentioned this just involves turning on: Settings -> General -> Accessibility -> Larger Text

..and adding:

tabBarItem.largeContentSizeImage = UIImage(named: "myHud")

Alternatively, you can add a vector image as the main tool-bar image, with 'Preserve Vector Data' checked in the asset catalog.

I've tried all combinations of this, and a long press does not show the HUD. I also tested with the Files app on my iPad running iOS 11b4 with no luck. This is the app that was demoed at WWDC.

Is there some other accessibility setting I'm missing to enable this feature? Or is it not available in beta 4?

3 Answers

This feature implementation and an example with tab bar are perfectly explained with illustrations on this accessibility site but here are the outlines :

  1. Under Xcode, import the image to be enlarged with a pdf extension and a x1 resolution in the xcassets catalog.

  2. In the new Image Set, tick Preserve Vector Data and specify Single Scale as Scales attribute.

  3. If a storyboard is used for this image, tick Adjusts Image Size in the Image View section, otherwise put the adjustsImageSizeForAccessibilityContentSizeCategory image property to true in code.

  4. For your tab bar or tool bar used in the application, first repeat the previous 3 steps for each image included in the items to be enlarged in the middle of the screen and then link the accessibility image to its appropriate item.

  5. This feature is available only for the accessibility text sizes.

WARNING : don't forget to check your layout with these new images larger sizes.

For your record, an explanation of the Large Content Viewer is provided in this detailed WWDC video summary if need be ⟹ the UILargeContentViewerItem protocol is an iOS 13 new feature that shows the same HUD that's shown for standard bar items.

You need to go :

Settings > General > Accessibility > Larger Text(set on) > Move slider more then half to the right

enter image description here

Don't forget to set

tabBarItem.largeContentSizeImage = someKindOfImage

And Long press will does the trick.

Related