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

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

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?