lchamp
lchamp

Reputation: 6612

UIBarButtonItem working but not visible with Xcode11 and Xcode12

After migrating our app to Xcode12 from Xcode10 we are seing an issue with our UIBarButtonItems. Some of those are not visible but still working.

We were able to target more specifically the following:

When looking at the "hierarchy view" the item and its icon is there, but not shown on the device. We do not see any difference when the item is shown or not that could help to understand the problem.

Below the screenshot are:

  1. Storyboard
  2. Issue on iPad after launch from icon
  3. View hierarchy of the issue

More screenshots (comparison) are available here: https://i.sstatic.net/eKhkG.jpg

Storyboard Issue on iPad after launch from icon View hierarchy of the issue

Any chance someone has seen a similar behavior with Xcode11 or Xcode12? Any idea of what we could try or if it is an Xcode issue that needs to be reported for a fix?

Thanks in advance for your help!

Upvotes: 1

Views: 572

Answers (3)

kodelit
kodelit

Reputation: 425

This issue might occur when you set title text attribute foregroundColor of the UIBarButtonItem to UIColor.clear.

You could do this directly, eg.:

navigationItem.rightBarButtonItem?.setTitleTextAttributes([.foregroundColor: UIColor.clear], for: .normal)

or by modifying the appearance of the UIBarButtonItem, eg:

UIBarButtonItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.clear], for: .normal)

Check your code, maybe you have such setting somewhere.

Upvotes: 0

lchamp
lchamp

Reputation: 6612

We were not able to reproduce in another application from scratch. Therefore we add to proceed the other way around: strip our current application until the problem wasn't here anymore. First step was to tear down to only an AppDelegate and a simple piece of code but the problem was still here. We removed all the dependencies from cocoapods but the problem was still here. We eventually removed a framework that we added directly into the project and it was the culprit!

The said framework is BiometricSDK (from IDEMIA). We will send them a mail to know if they are aware of this issue and if they have fixed / will fix it in a newer release. It isn't open-source so I don't know what the specific issue was, my only guess it's that they somehow changed appearance of UIBarButtonItems (yet I'm not sure how their code invoked since we had removed any reference to it while stripping down the application).

Upvotes: 2

Ol Sen
Ol Sen

Reputation: 3368

System Font Symbols have been changed since their introduction, so they can be referred as SF Symbols 1 and SF Symbols 2, where SF Symbols 1 are part of SF Symbols 2 (which support multicolor symbols) and some have also been changed in detail.

Some symbols (actually a lot of them) have been available even before iOS 13 but in general the Docs say...

SF Symbols are available in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

So the specific symbol arrow.clockwise you try to use is part of the SF Symbol 1 Collection and is one of those who have been available even before iOS 13 as Refresh Symbol. But as they are re-introduced as SF Symbols you run into trouble here. In targets below iOS 13 they (some) appear as part of UIKit's Controls and above iOS 12 they are System Font Symbols that respect multiple parameters of your UI, like darkMode, lightMode, anyMode, FontWeight, localization and so on.

From Apple Documentation.. Creating Custom Symbols

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.

and also

When you export a symbol introduced in SF Symbols 2 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6, but without the benefit of SF Symbol 2 features like multicolor support and automatic localization.

The mentioned SF Symbols Tools to export and verify SVG format SF symbols can be found here.
See how SF Symbols 1.1 app that requires macOS 10.14.4 or later looks like.

Screenshot SF Symbols 1.1 app

The arrow.clockwise symbol is not marked with (i) which would tell you about copyrights and other informations that you would have to respect.

The exported SVG file contains all weighted symbols and layout guides to keep up this SF Symbol features and will help you develop graphics with it. The Format is explained here

This SVG file can't be dropped as is into your Apps Assets unless you are targeting OSX 10.15 or iOS 13. The compiler will warn you if you try to do this below the mentioned versions. But you can open it in Sketch or similar to edit the SVG data and generate a graphic as workaround. Which i would suggest to do so and load this graphics into your UI Element instead.

The use of System Font Symbols starting iOS 13 and how to load them is explained here

and as you did set your UIBarButtonItem programmatically in code it could also be written like..

UIBarButtonItem *barBtn = nil;
if (@available(iOS 13.0, *)) {
    UITraitCollection *trait = [UITraitCollection currentTraitCollection];
    barBtn = [[UIBarButtonItem alloc] initWithImage:[UIImage systemImageNamed:@"arrow.clockwise" compatibleWithTraitCollection:trait] style:UIBarButtonItemStylePlain target:self action:@selector(refreshMethodHere)];
} else {
    barBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refreshMethodHere)];
}

Upvotes: 0

Related Questions