Make NSView NOT clip subviews outside of its bound

Question

Is it possible to make an NSView not clip its subviews that are outside of the bounds? On iOS I would simply set clipsToBounds of my UIView no NO. But NSView doesn't have such a property. I tried experimenting with wantsLayer, masksToBounds, wantsDefaultClipping, but all of these seem to only change the clipping of the drawRect method, not the subviews.

Answer 1

After 5 hours of struggling I've just achieve it. Just change class of any NSView in .storyboard or .xib to NoClippingView and it will NOT clip any of it's subviews.

class NoClippingLayer: CALayer {
        override var masksToBounds: Bool {
            set {

            }
            get {
                return false
            }
        }
    }

    class NoClippingView: OSView {
        override var wantsDefaultClipping: Bool {
            return false
        }

        override func awakeFromNib() {
            super.awakeFromNib()
            wantsLayer = true
            layer = NoClippingLayer()
        }
    }

Why do I override masksToBounds in NoClippingLayer? Because some native AppKit classes change this property of all sublayers in runtime without any warnings. For example, NSCollectionView do this for views of it's cells.

Answer 2

The behaviour around this seems to have changed. You just need to set the view's layer to not mask to bounds.

view.wantsLayer = true
view.layer?.masksToBounds = false

Answer 3

I couldn't get any of these solutions to work. I think you may have to just change your view hierarchy so that views don't draw outside of their frame. You can create an intermediary view that doesn't do any drawing but has a larger frame to allow for a larger area.

Answer 4

wantsDefaultClipping method works... both the parent & the child need to override wantsDefaultClipping.

Once you go that route, however, cleaning up after yourself is cumbersome.

Here's my solution for attaching text to an NSProgressBar:

Thanks to BGHUDAppKit and stackoverflow

@implementation BGHUDOverlayTextField
- (BOOL) wantsDefaultClipping { return NO; } // thanks stackoverflow.com
@end


@interface BGHUDProgressIndicator : NSProgressIndicator {

    NSBezierPath *progressPath;
    NSString *themeKey;
   NSString *LayerKey; 
   BGHUDOverlayTextField *customTitleField;
   BOOL hiding;
}

@implementation BGHUDProgressIndicator
- (BOOL) wantsDefaultClipping { return (customTitleField == nil); } // thanks stackoverflow.com
- (void) setCustomTitle: (NSMutableAttributedString *)iTitle
{
   if ( !customTitleField )
   {
      NSRect r = [self bounds];
      r.size.height += 10;
      customTitleField = [[BGHUDOverlayTextField alloc] initWithFrame:r];
      [self addSubview: customTitleField];
   }

   [customTitleField setAttributedStringValue:iTitle];
}

- (void)setHidden:(BOOL)flag
{
   if ( customTitleField && flag && !hiding )
   {
      hiding = YES;
      NSRect fr = [self bounds];
      NSRect eraseFr = fr;
      eraseFr.size = [customTitleField frame].size;
      [self displayRectIgnoringOpacity:fr];
   }
   else if ( !flag )
      hiding = NO;
   [super setHidden:flag];
}

- (void) drawRect: (NSRect)fr
{
   if ( customTitleField )
   {
      fr = [self bounds];
      NSRect eraseFr = fr;
      eraseFr.size = [customTitleField frame].size;
      [[NSColor normalSolidFill] set];
      NSRectFill( eraseFr );
      if ( hiding )
      {
         [customTitleField setAttributedStringValue:nil];
         NSRectFill( eraseFr );
         return;
      }
      [NSGraphicsContext saveGraphicsState];
      NSRectClip(fr);
   }
   [super drawRect:fr];

   if ( customTitleField )
   {
      [NSGraphicsContext restoreGraphicsState];
   }
}

Answer 5

I was able to solve this by overriding wantsDefaultClipping of the subviews to return NO.

Answer 6

If you are using autolayout, override alignmentRectInsets to expand the clipping area, making it larger than the alignment rectangle. This example gives a space of 50 on all sides:

override var alignmentRectInsets: NSEdgeInsets {
    return NSEdgeInsets(top: 50.0, left: 50.0, bottom: 50.0, right: 50.0)
}