Overlay NSScroller over content - objective-c

Is there any way to overlay the NSScroller over the content of the scroll view (like in iOS)? I've already tried several approaches:
a) setting the frame of the scroll view content view (NSClipView) to extend into the bounds of the scroller
b) adding an NSScroller object as a subview of the scroll view (positioned where I want)
c) creating an entirely custom scroller view and placing it as a subview (this worked, but that would mean that I need to rewrite all the functionality of NSScroller)
Sparrow seems to successfully do this, and it seems to do it through a regular NSScroller subclass (seeing as it responds to the scroll settings set in System Preferences >> Appearance). It's not really drawing the scroller that's the issue, its just making it overlay the content.
Any advice is appreciated :-)

Here's where you can set the custom class of your scrollbars.
After that, by overriding the -tile method of NSScrollView, you'll get them placed properly.

Here is my solution :
Create a MyScroller class that extends NSScroller
In the MyScroller.m :
#import "MyScroller.h"
#implementation MyScroller
+(CGFloat) scrollerWidth{
return 10;
}
+(CGFloat) scrollerWidthForControlSize:(NSControlSize)controlSize{
return 10;
}
- (void) drawBackground:(NSRect) rect{
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:0 yRadius:0];
[[NSColor whiteColor] set];
[path fill];
}
- (void)drawKnob{
[self drawBackground:[self rectForPart:0]];
[self drawBackground:[self rectForPart:1]];
[self drawBackground:[self rectForPart:2]];
[self drawBackground:[self rectForPart:4]];
[self drawBackground:[self rectForPart:5]];
[self drawBackground:[self rectForPart:6]];
NSRect knobRect = [self rectForPart:NSScrollerKnob];
NSRect newRect = NSMakeRect((knobRect.size.width - [MyScroller scrollerWidth]) / 2, knobRect.origin.y, [MyScroller scrollerWidth], knobRect.size.height);
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:newRect xRadius:5 yRadius:5];
[[NSColor grayColor] set];
[path fill];
}
#end
Then just set the custom class for the Scroller in Interface Builder.

I've recently released RFOverlayScrollView which should solve your problem:
Source: https://github.com/rheinfabrik/RFOverlayScrollView
Blog Post: http://blog.rheinfabrik.de/blog/2013/01/01/introducing-rfoverlayscrollview/

You can change the scrollerStyle over the NSScrollerView control to .overlay to get the desired overlay effect.
This may overrule the system wide setting in System Settings for scroll bar visibility. To 'survive' scroll bar setting changes while your app is running, you must observe the NSScroller.preferredScrollerStyleDidChangeNotification and re-apply the overlay effect.

Related

Message flow problems with NSTableHeaderView and NSTableHeaderCell while trying to produce transparent NSTableView Header

Problem: I am trying to create a custom transparent TableView Header and I have created subclasses of NSTableHeaderView and NSTableHeaderCell and overridden -drawWithFrame:inView and -drawInteriorWithFrame:inView in the NSTableHeaderCell subclass. These methods are working as expected, but only when the table column header is first drawn. After the user clicks on the table header, however, it is re-drawn with a white background. To get specific, here are the custom method implementations:
#interface MYTableHeaderCell : NSTableHeaderCell
#end
#implementation MYTableHeaderCell
-(void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView{
//[super drawWithFrame:cellFrame inView:controlView];
NSBezierPath *path = [NSBezierPath bezierPathWithRect:cellFrame];
NSColor *clearColor = [NSColor clearColor];
[clearColor setFill];
[path fill];
[self drawInteriorWithFrame:cellFrame inView:controlView];
}
-(void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView{
//[super drawInteriorWithFrame:cellFrame inView:controlView];
NSBezierPath *path = [NSBezierPath bezierPathWithRect:cellFrame];
NSColor *clearColor = [NSColor clearColor];
[clearColor setFill];
[path fill];
NSRect titleRect = [self titleRectForBounds:cellFrame];
[self.attributedStringValue drawInRect:titleRect];
}
-(NSColor *)highlightColorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView{
return [NSColor clearColor];
}
-(BOOL)isOpaque{
return NO;
}
When the table view header is first drawn, it
has a transparent background as intended.
After clicking on the header, however, it is
redrawn to have a white background.
As far as I can tell, after clicking on the table view header
-drawInteriorWithFrame:inView:
is still called when the header needs to be drawn. However,
-drawWithFrame:inView:
is not. It also appears that another class is drawing a white view underneath the cell text.
I have looked through the NSTableHeaderCell and NSTableHeaderView class descriptions along with all of their superclasses but I can't figure out why the white background is being drawn. I'm obviously missing something fundamental.
Question: What is causing the white view to be drawn?
The
highlight(flag: Bool, withFrame cellFrame: NSRect, inView controlView: NSView)
method is not implemented. Override this method and copy your code from your drawRect method in there and this should be done.

Drawing issues after subclassing NSCollectionView

OK, here's what I have done:
I have an NSCollectionView
I wanted to be able to enable "selecting" items, and drawing a custom border when an items is selected
I subclassed NSCollectionViewItem (to enable selection)
I subclassed NSView for the NSCollectionViewItem view, in order to draw the border
The code
The view item
#implementation MSLibraryCollectionViewItem
- (void)setSelected:(BOOL)flag
{
[super setSelected:flag];
[(MSLibraryCollectionViewView*)[self view] setSelected:flag];
[(MSLibraryCollectionViewView*)[self view] setNeedsDisplay:YES];
}
The custom view
#implementation MSLibraryCollectionViewView
/***************************************
Initialisation
***************************************/
- (MSLibraryCollectionViewView*)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}
/***************************************
Drawing
***************************************/
- (void)drawRect:(NSRect)rect
{
if ([self selected]) {
//[[NSColor redColor] setFill];
//NSRectFill(rect);
//[super drawRect:rect];
NSColor* gS = [NSColor colorWithCalibratedRed:0.06 green:0.45 blue:0.86 alpha:1.0];
NSColor* gE = [NSColor colorWithCalibratedRed:0.12 green:0.64 blue:0.94 alpha:1.0];
NSGradient* g = [[NSGradient alloc] initWithStartingColor:gE endingColor:gS];
NSColor *borderColor = [NSColor colorFromGradient:g];
NSRect frameRect = [self bounds];
if(rect.size.height < frameRect.size.height)
return;
NSRect newRect = NSMakeRect(rect.origin.x+5, rect.origin.y+5, rect.size.width-10, rect.size.height-10);
NSBezierPath *textViewSurround = [NSBezierPath bezierPathWithRoundedRect:newRect xRadius:7 yRadius:7];
[textViewSurround setLineWidth:2.0];
[borderColor set];
[textViewSurround stroke];
}
}
However, the seems to be something wrong with drawing. For example:
When resizing the Collection View's container, a weird line appears at the outer box
When an Collection View item is not 100% visible (e.g. because it's been scrolled down), the selection border doesn't appear at all (while I would expect it to draw just the visible portion).
Some Examples
What's going on?
P.S. I'm not a guru with drawing and custom views in Cocoa - so any ideas/help is more than welcome!
You switched from asking about a collection view to talking about an outline view, but I assume that was just a mental hiccup.
When an Outline View item is not 100% visible (e.g. because it's been scrolled down), the selection border doesn't appear at all
(while I would expect it to draw just the visible portion).
That's because of this code in your -drawRect:.
if(rect.size.height < frameRect.size.height)
return;
It's specifically avoiding drawing a partial selection outline.
Regarding the weird line, I doubt that has to do with your collection item view's custom drawing. Does it stop happening if you disable the custom drawing? You could experiment with using an ordinary color rather than using the third-party +colorFromGradient: code you're using.
By the way, this line:
NSRect newRect = NSMakeRect(rect.origin.x+5, rect.origin.y+5, rect.size.width-10, rect.size.height-10);
could be written more simply as:
NSRect newRect = NSInsetRect(rect, 5, 5);

Rounded NSView in a Transparent Window

I'm trying to make a transparent NSWindow with a rounded view in there.
I'm trying to have a rounded view with a transparent window.
This is what it looks like now: (see the little dots in the corners)
Here's another example with the border radius set to 10px (set in NSView drawRect):
I am using code from this Apple sample: https://developer.apple.com/library/mac/#samplecode/RoundTransparentWindow/Introduction/Intro.html
Specifically this method in my NSWindow subclass:
- (id)initWithContentRect:(NSRect)contentRect
styleMask:(NSUInteger)aStyle
backing:(NSBackingStoreType)bufferingType
defer:(BOOL)flag {
// Using NSBorderlessWindowMask results in a window without a title bar.
self = [super initWithContentRect:contentRect styleMask:NSBorderlessWindowMask backing:NSBackingStoreBuffered defer:NO];
if (self != nil) {
// Start with no transparency for all drawing into the window
[self setAlphaValue:1.0];
// Turn off opacity so that the parts of the window that are not drawn into are transparent.
[self setOpaque:NO];
[self setBackgroundColor:[NSColor clearColor]];
}
return self;
}
And this in my NSView subclass:
- (void)drawRect:(NSRect)dirtyRect
{
[[NSColor redColor] set];
NSBezierPath* thePath = [NSBezierPath bezierPath];
[thePath appendBezierPathWithRoundedRect:dirtyRect xRadius:3 yRadius:3];
[thePath fill];
}
Can anyone tell me what I'm missing here?
Thanks.
Are you looking for something like the following, where there's a red outline (stroke), but the center area is transparent?
If so, to achieve that, I used the following code:
- (void)drawRect:(NSRect)frame {
frame = NSInsetRect(self.frame, 3.0, 3.0);
[NSBezierPath setDefaultLineWidth:6.0];
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:frame
xRadius:6.0 yRadius:6.0];
[[NSColor redColor] set];
[path stroke];
}
If that's what you're looking for, you can probably use that as a starting point. You'll want to make sure that you inset the frame rect one half of the stroke line width, so as to avoid the problem with clipping the corners like you were seeing.
Not sure if this is what you are looking for but there is a great class by Matt Gemmell called MAAttachedWindow and can be found here: http://mattgemmell.com/2007/10/03/maattachedwindow-nswindow-subclass/
It's a little older but still works great for me when I need to do a 'floating' popup window and configure transparency, border radii, and even add a small arrow for context if desired. I use it all the time.

NSView with fill ( pattern image) scrolls when window changes size

I have an NSView with a drawRect
- (void)drawRect:(CGRect)rect {
// Drawing code
NSPoint origin = [self visibleRect].origin;
[[NSGraphicsContext currentContext]
setPatternPhase:NSMakePoint(origin.x, origin.y)];
[[NSColor colorWithPatternImage: self.image] set];
[NSBezierPath fillRect: [self bounds]];
}
It draws my pattern perfectly, but i can see the pattern scroll when i change the the size of my window.
i have tried to set the view isFlipped to YES but that doesn't change anything.
You need to do some off-screen drawing first and then draw that result onto the view. For example you can use a blank NSImage of the exact same size as the view, draw the pattern on that image and then draw that image on the view.
Your code may look something like that:
- (void)drawRect:(NSRect)dirtyRect
{
// call super
[super drawRect:dirtyRect];
// create blank image and lock drawing on it
NSImage* bigImage = [[[NSImage alloc] initWithSize:self.bounds.size] autorelease];
[bigImage lockFocus];
// draw your image patter on the new blank image
NSColor* backgroundColor = [NSColor colorWithPatternImage:bgImage];
[backgroundColor set];
NSRectFill(self.bounds);
[bigImage unlockFocus];
// draw your new image
[bigImage drawInRect:self.bounds
fromRect:NSZeroRect
operation:NSCompositeSourceOver
fraction:1.0f];
}
// I think you may also need to flip your view
- (BOOL)isFlipped
{
return YES;
}
Swift
A lot has changed, now things are easier, unfortunately part of objective-C's patrimony is lost and when it comes to Cocoa, Swift is like an orphan child. Anyways, based on Neovibrant's we can deduct the solution.
Subclass NSView
Override draw method
Call parent method (this is important)
Set a fill on buffer within the bounds of the view
Draw fill on buffer
code
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
let bgimage : NSImage = /* Set the image you want */
let background = NSColor.init(patternImage: bgimage)
background.setFill()
bgimage.draw(in: self.bounds, from: NSZeroRect, operation: .sourceOver, fraction: 1.0)
}

being called but not drawing

I have some code in the drawRect: method that draws a series of circles from an array. I can verify that the points stay in memory long enough and get to the point where they should be drawn. However, it seems as if the fill method of NSBezierPath is not drawing the circles.
Here is my drawRect:
- (void)drawRect:(NSRect)dirtyRect
{
NSPoint aPoint;
NSRect aRect = NSMakeRect(0, 0, 6, 6);
// Erase the rectangle
[[NSColor clearColor] set];
NSRectFill([self bounds]);
// Draw the dots
[[NSColor colorWithCalibratedRed:(77.0/255.0) green:(11.0/255.0) blue:(11.0/255.0) alpha:1.0] set];
for(NSValue *aValuePoint in arrayOfPoints) {
aPoint = [aValuePoint pointValue];
aRect.origin.y = aPoint.y - aRect.size.height/2.0;
aRect.origin.x = aPoint.x - aRect.size.width/2.0;
// The code does get to this point, it does not draw however...
[[NSBezierPath bezierPathWithOvalInRect:aRect] fill];
}
}
I have another method drawDotAtPoint: where I add the points to an array
- (void)drawDotAtPoint:(NSPoint)aPoint
{
NSLog(#"drawDotAtPoint:(%f, %f)", aPoint.x, aPoint.y);
[arrayOfPoints addObject:[NSValue valueWithPoint:aPoint]];
// I've also tried using [self superview] instead of just self
[self setNeedsDisplay: YES];
}
And while I am able to verify that these methods are called at the correct times (or so it seems) no drawing after the initial drawRect: will take place
Sidenote:
My goal is to actually draw a point and have a ring appear around it, enlarge and fade out. Much similar to the GPS current location indicator on iOS, in the Maps app. Any insight on that would also be appreciated.
Check your points and make sure that you don't have an inverted rectangle and that your X/Y coords are what you expect. Make sure that your anchor point and coordinates are correctly relative.
You may be helped along a bit by using a tool called Quartz Debug that comes with apple's developer tools. It is in the /Developer/Applications/Graphics Tools/ folder. After starting this tool, go to the "tools" menu and turn on "Flash Screen Updates". This will give you an idea of when things are being redrawn or not.
Hope that helps some.
I've copy-pasted your view code. I stuck this in an app delegate for testing. BadView is the custom view here (no reflection on you -- "Bad" because it's misbehaving :) ) The windows are both created in IB, and the WebView is likewise placed in the parent window in IB.
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// badWindow is an IBOutlet to the overlay window, parentWindow an IBOutlet
// to the window with the webview, myWebView an IBOutlet to the webview
BadView * myBadView = [[BadView alloc] initWithFrame:[[badWindow contentView] frame]];
// Create some random points for testing
[myBadView createArrayOfPoints];
[badWindow setStyleMask:NSBorderlessWindowMask];
[badWindow setOpaque:NO];
[badWindow setAlphaValue:0.9]; // Will still act opaque without this
[badWindow setHasShadow:NO];
[badWindow setContentView:myBadView];
[parentWindow addChildWindow:badWindow ordered:NSWindowAbove];
[[myWebView mainFrame] loadRequest:[NSURLRequest requestWithURL:
[NSURL URLWithString:#"http://www.apple.com/"]]];
[myBadView release];
}