How to set the height of a Today Widget Extension?

Question

How can i change the height of my App\'s Today Extension in the Notification Center?

I tried it with the Interface Builder and with Code, the Interface Builder Displ

Answer 1

There are two ways to display Today extension:

1. Compact Mode (fixed height for Widget)
2. Expand Mode (Variable height for Widget)

Whatever code you do to change the height of extension in Compact mode will not make any difference. So you need to change the mode from compact to Expand Mode.

// 1. Load This in viewDidLoad:

override func viewDidLoad() {
  super.viewDidLoad()
  self.extensionContext?.widgetLargestAvailableDisplayMode = NCWidgetDisplayMode.expanded
}

// 2. Implement another widget protocol

func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize){
  if (activeDisplayMode == NCWidgetDisplayMode.compact) {
    self.preferredContentSize = maxSize;
  }
  else {
    self.preferredContentSize = CGSize(width: 0, height: 200);
  }
}

You can refer WWDC for more updates about App extensions

Answer 2

Widgets have their heights adjusted by the system. If you have defined your height using constraints this will be automatically adjusted as required. If you're using explicit layout you can request a new height by modifying the preferredContentSize of your widget.

Note that you have no guarantee notification center will respect your height request: it may be adjusted automatically, it may be adjusted but not to the exact height you want, or it may not be honored at all.

The best way to develop a widget is to use auto-layout constraints to set your height values, that way your widget will adapt to different heights with ease.

Answer 3

Today widget default UIEdgeInsets defaultMarginInsets (UIEdgeInsets) defaultMarginInsets = (top = 0, left = 44, bottom = 39, right = 0)

You should add this method

- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets {
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(0, 44, 0, 0);
return edgeInsets;}

Answer 4

The best way is of course Autolayout but by default there are margins which you can control like this

func widgetMarginInsetsForProposedMarginInsets
    (defaultMarginInsets: UIEdgeInsets) -> (UIEdgeInsets) {
    return UIEdgeInsetsZero
}

Answer 5

In your widget UIViewController.m (Objective-C):

self.preferredContentSize = CGSizeMake(0, 200);

Will make your widget have a height of 200.

Note that the width will have no affect on the view, as widgets must fit in the exact width of notification center, which is handled automagically.

Also, if you want to animate changes in the height of your view, you can implement (Objective-C):

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator

in your view controller using -animateAlongsideTransition:completion:

The answer was a bit hidden; you had to click around in the documentation sidebar to eventually find this fantastic document.

---

Another way is to use auto-layout constraints to constrain your view's height.

Answer 6

Since iOS 10 extension's height is 110 pixels. You should use new protocol method widgetActiveDisplayModeDidChange:withMaximumSize: to extend extension size (Objective-C):

- (void)widgetActiveDisplayModeDidChange:(NCWidgetDisplayMode)activeDisplayMode
                         withMaximumSize:(CGSize)maxSize {

    if (activeDisplayMode == NCWidgetDisplayModeExpanded) {
        self.preferredContentSize = CGSizeMake(maxSize.width, 600.0);
    } else if (activeDisplayMode == NCWidgetDisplayModeCompact) {
        self.preferredContentSize = maxSize;
    }
}

Also you may need to call setWidgetLargestAvailableDisplayMode: on your extension context in today view controller's viewDidLoad method like this (Objective-C):

if ([self.extensionContext respondsToSelector:@selector(setWidgetLargestAvailableDisplayMode:)]) { // iOS 10+
    [self.extensionContext setWidgetLargestAvailableDisplayMode:NCWidgetDisplayModeExpanded];
} else {
    self.preferredContentSize = CGSizeMake(0, 600.0); // iOS 10-
}

This thread may be helpful https://forums.developer.apple.com/thread/48930