NSPopover color

Question

Is there any way to color NSPopover? Ive seen apps like facetab etc that have cool colors and resizeable popovers, how is this done?

Ay guides, hints?

Thanks.

Answer 1

Set popover.contentViewController.view as a subclass of NSView with a custom background drawing (i.e. override drawRect: and fill a rect with your custom background color).

Then set the popover.appearance = NSPopoverAppearanceHUD to remove the default border around the view.

Note that there will still be a very thin border around the view, so if you want to remove it completely, you may want to use MAAttachedWindow or a similar solution.

Answer 2

In Swift 4:

1. Go to File->New File->Cocoa Class
2. Name your class. eg. PopColor. Make sure it is a subclass of NSView
3. Set the contents of the file to:

import Cocoa

class PopoverContentView:NSView {
    var backgroundView:PopoverBackgroundView?
    override func viewDidMoveToWindow() {
        super.viewDidMoveToWindow()
        if let frameView = self.window?.contentView?.superview {
            if backgroundView == nil {
                backgroundView = PopoverBackgroundView(frame: frameView.bounds)
                backgroundView!.autoresizingMask = NSView.AutoresizingMask([.width, .height]);
                frameView.addSubview(backgroundView!, positioned: NSWindow.OrderingMode.below, relativeTo: frameView)
            }
        }
    }
}

class PopoverBackgroundView:NSView {
    override func draw(_ dirtyRect: NSRect) {
        NSColor.green.set()
        self.bounds.fill()
    }
}

4. In your storyboard, select the view which has your popover content and go to the Identity Inspector

5. Set the Class to PopoverContentView

Your popover and its triangle will now be green.

Answer 3

You can subclass NSView and set it as the NSPopover's view controller's view.

Answer 4

You can use MAAttachedWindow instead.

Answer 5

Yes and no. Unfortunately NSPopover isn't designed to be customisable. You can use some simple hacks for adding additional background view behind contentViewController's view and colorise or customise it as you want. In this case, you can get the customisable background that will be masked the same as generic NSPopover border and tail.

For more details you can take a look at the code of NSPopover+MISSINGBackgroundView category that implements this approach or just use this piece of code as CocoaPod library.

Answer 6

The complete code to change the color of NSPopover including the triangle is here:

I assume people have hooked the popover outlets and methods

#import "AppDelegate.h"

@interface MyPopoverBackgroundView : NSView
@end


@implementation MyPopoverBackgroundView

-(void)drawRect:(NSRect)dirtyRect
{
    [[NSColor redColor] set];
    NSRectFill(self.bounds);
}

@end

//===============================================================================================
@interface MyPopView : NSView
@end

@implementation MyPopView
-(void)viewDidMoveToWindow{
    NSView *aFrameView = [[self.window contentView] superview];
    MyPopoverBackgroundView * aBGView  =[[MyPopoverBackgroundView alloc] initWithFrame:aFrameView.bounds];
    aBGView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
    [aFrameView addSubview:aBGView positioned:NSWindowBelow relativeTo:aFrameView];
    [super viewDidMoveToWindow];
}
@end



//-----------------------------------------------------------------------------------------
@interface AppDelegate ()

@property (weak) IBOutlet NSWindow *window;
@end

@implementation AppDelegate

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
    // Insert code here to initialize your application

    //close when clicked outside
    [self.popover setBehavior:NSPopoverBehaviorTransient];


    //change its color
    MyPopView *myPopview = [MyPopView new];
    [self.popover.contentViewController.view addSubview:myPopview];
}


- (void)applicationWillTerminate:(NSNotification *)aNotification {
    // Insert code here to tear down your application
}


- (IBAction)closePopover:(id)sender {
    [self.popover close];
}

- (IBAction)showPopover:(id)sender {

    [self.popover showRelativeToRect:[sender bounds]
                              ofView:sender
                       preferredEdge:NSMaxYEdge];
}


@end

Answer 7

This is what I did to change the popover color.

Assuming that you have properly defined your NSPopover:

//AppController.h
#import <Foundation/Foundation.h>

@interface AppController : NSObject
@property (weak) IBOutlet NSPopover errorPopover;
// whatever else you have ...
@end

//AppController.m
#import "AppController.h"

@implementation AppController
@synthesize errorPopover = _errorPopover;
// whatever else you have ...

-(IBAction)doSomethingThatCallsPopover:(id)sender {
_errorPopover.appearance = NSPopoverAppearanceHUD; //set color of error popup
[[self errorPopover] showRelativeToRect:[sender bounds] ofView:sender preferredEdge:NSMaxXEdge];
}
@end

NSPopover Class Reference - I really wish they would provide usage code in the developer docs.