• Tips for Backwards Compatibility with iOS 10 Today Widgets
  • The Nuggets translation Project
  • Translator: Edison Hsu
  • Proofreader: Luoyaqifei

A few tips on iOS 10 controls of the Day for backward compatibility

It’s interesting to look back at how today’s controls have grown in importance over the past few years. Today’s controls were first introduced in iOS 8, where they were not highly popular and were combined with missed notifications in the notification center. However, in iOS 10, today’s controls have completely changed, taking over the home screen’s left slider, which used to be used as a “swipe to unlock.” In terms of appearance, the control has also undergone quite a transformation from a dark theme to a pearly white one.

Unfortunately for developers, if you, like my team, can’t completely give up on iOS 10 below, then you’ll have to deal with perfectly supporting both look and feel styles, and some other issues that aren’t obvious at first glance. I recently took part in the makeover of this QuickBooks Self-employed today control – here are some things to take note of:

Two themes are supported

Controls of the Day for iOS 9

Controls of the Day for iOS 10

Let’s start with the obvious problem. You can build two different screens, one for iOS 10 below and one for iOS 10+, or make sure a single screen is compatible with both dark and light backgrounds. Finally, we solve this problem by building an interface, but whether the elements of our view end up in light colors or dark text and background colors depends on what version of iOS you’re running. We also confirmed that all image resources and colored text worked well in both Settings. Tint color has been shown to work here.

//Swift var image = UIImage(named: "imageName"); image = image? .withRenderingMode(UIImageRenderingMode.alwaysTemplate) let imageView = UIImageView(image: image) imageView.tintColor = UIColor.blue //Objective-C UIImage *image = [UIImage imageNamed:@"imageName"]; image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.tintColor = [UIColor blueColor];Copy the code

The center control

There is a less obvious problem – iOS 9’s controls of the day have a slight center offset. If you notice the image above, you can see that the UITableView above is not horizontally centered in its space. If you want to make subtle adjustments to the controls of the Day in iOS 9, I recommend setting margins that allow you to use the full allocated space width, which is consistent with the default on iOS 10.

//Swift func widgetMarginInsets(forProposedMarginInsets defaultMarginInsets: UIEdgeInsets) -> UIEdgeInsets {return UIEdgeInsetsMake(0,0,0,0); } //Objective-C - (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets { //centers Widget for iOS 9 return UIEdgeInsetsMake(0,0,0,0); }Copy the code

Note: widgetMarginInsetsForProposedMarginInsets is technology and not used by 10 or more in the iOS version will not be invoked.

Disabled in extended mode

Close mode

Extension mode

IOS 10 has added an optional extension mode that can be used to add additional functionality and area of use for controls. This is extremely useful, for example, for advanced user features or in cases where the user has something (such as private or property information) that they don’t want to display on the home screen all the time. You can enable extended mode in ViewDidLoad with a line of code:

//Swift self.extensionContext? .widgetLargestAvailableDisplayMode = NCWidgetDisplayMode.expanded //Objective-C self.extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayModeExpanded;Copy the code

However, on iOS 9 this basically breaks your extensions, so you actually need to encapsulate it to make sure it’s only set when extension mode is supported.

let extensionContext = NSExtensionContext()
if #available(iOS 10.0, *) {
    extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayMode.expanded

if ([self.extensionContext respondsToSelector:@selector(setWidgetLargestAvailableDisplayMode:)]) {
    self.extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayModeExpanded;
Copy the code

Another thing you need to consider in extended mode is that if you don’t set the height of the controls properly, anything that is only displayed in extended mode (over 110 px) will be cut out in iOS 9 and below. To solve this problem, you need to make sure you set the control’s preferredContentSize height to hold content that exceeds 110 px. Thank you Greg Gardner for pointing that out!