What is the height of the new iOS 10 Today Widget/

Question

I am building an iOS Today widget, and while testing for iOS 10 I noticed that all widgets are now being given the same height (previous versions allowed the dev to set the height). What is the ideal height/what is the best practice for dealing with this new limitation? I'm in swift and I didn't use autolayout fyi. Thanks in advance!

Answer 1

The widget in iOS 10 has been changed as you have noticed and does now have a fixed height. There has also been added new features to the today extension. On of them is the NCWidgetDisplayMode. Basically you have a button up in the right corner where you can "Show more" or "Show less".

Begin by adding the following to your viewDidLoad()

self.preferredContentSize = CGSize(width: 0, height: 200)

if #available(iOSApplicationExtension 10.0, *) {
    self.extensionContext?.widgetLargestAvailableDisplayMode = .expanded
} else {
    // Fallback on earlier versions
}

What you then need to do is to basically add the following method:

Swift version:

@available(iOSApplicationExtension 10.0, *)
func widgetActiveDisplayModeDidChange(activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
    if activeDisplayMode == NCWidgetDisplayMode.Compact {
        self.preferredContentSize = CGSizeMake(0.0, 200.0)
    }
    else if activeDisplayMode == NCWidgetDisplayMode.Expanded {
        self.preferredContentSize = desiredSize
    }

}

Objective-C version:

- (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode withMaximumSize:(CGSize)maxSize{
    if (activeDisplayMode == NCWidgetDisplayModeCompact){
        self.preferredContentSize = CGSizeMake(0.0, 200.0);
    }
    else if (activeDisplayMode == NCWidgetDisplayModeExpanded){
        self.preferredContentSize = desiredSize;
    }
}

Note two things here:

Xcode will automatically suggest that you add the available check for the iOS version (for Swift at least). So do not remove the old way to do this self.preferredContentSize = CGSizeMake... This is still needed for older iOS versions.

In the widgetActiveDisplayModeDidChangefunction activeDisplayMode == NCWidgetDisplayMode.Compactwill be called when you go from "Show more" > "Show less". This is because it´s trigged immediately from the iOS system. And activeDisplayMode == NCWidgetDisplayMode.Expanded will be called when you go from "Show less" > "Show more".

And one last thing, this is kind of buggy still with the "Show more" and "Show less" buttons and it´s not fixed yet by Apple. Check the demonstration from Apples Keynote and you will notice that he had the bug issue with this.

Answer 2

Simply do the following:

let height = extensionContext?.widgetMaximumSize(for: .compact).height

you can use both: .compact and .expanded types.

Answer 3

In iOS 10, by default, the height of today widget is fixed. Moreover, the minimum height of collapsed widget is limited.

A collapsed widget is the height of roughly two and a half table rows. An expanded widget is ideally no taller than the height of the screen.

These notes are from iOS Human Interface Guidelines.

We can do the following to change it.

First of all, you need to add these codes in your viewDidLoad, this makes your widget supports two modes which are new in iOS 10.

Swift Version:

if #available(iOSApplicationExtension 10.0, *) { // Xcode would suggest you implement this.
    extensionContext?.widgetLargestAvailableDisplayMode = .expanded
} else {
    // Fallback on earlier versions
}

ObjC Version:

self.extensionContext.widgetLargestAvailableDisplayMode = NCWidgetDisplayModeExpanded;

And then implement the protocol method like:

Swift Version:

@available(iOSApplicationExtension 10.0, *)
func widgetActiveDisplayModeDidChange(activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
    if activeDisplayMode == .expanded {
        preferredContentSize = CGSize(width: 0.0, height: 200.0)
    } else if activeDisplayMode == .compact {
        preferredContentSize = maxSize
    }
}

ObjC Version:

- (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode withMaximumSize:(CGSize)maxSize {
    if (activeDisplayMode == NCWidgetDisplayModeExpanded) {
        self.preferredContentSize = CGSizeMake(0.0, 200.0);
    } else if (activeDisplayMode == NCWidgetDisplayModeCompact) {
        self.preferredContentSize = maxSize;
    }
}

Run your target, you will see a "Show More" button on right corner of your widget. Tap it and you will see the change.

See more detail: How to resize the height of widget in iOS 10?