Gradient Windows in Cocoa!

Ever wanted to sexy up your Mac applications in hopes of making them more visually appealing? Well here’s a step in the right direction! Want your windows to have custom gradients on them? No problem! In this tutorials you’ll learn how to subclass an NSView inside a window and color the background of it to a gradient! So if you’re ready to ditch Apple’s ugly windows and start making new sexier ones then let’s get started!

To start off let’s go ahead and open Xcode and create a new Cocoa Application

I’m going to go ahead and name my project GradientWindow.

Now if you’re new to Xcode this is what your project window is going to look like

So what we’re going to do right off the bat is go ahead and subclass the NSView inside our window. To do this let’s right click on the group “Classes” and click Add > New File.

Now let’s select an Objective-C class and select to subclass NSView.

Now I’m going to go ahead and name my subclass gradientViewClass (for the sake of understanding the tutorial easily I’d advise you to do the same).

Now once we’ve created that let’s go ahead and add some code to it! We’re going to go ahead and open up gradientViewClass.h and add the following code to it:

[objc]//
// gradientViewClass.h
// GradientWindow
//
// Created by Garet McKinley on 10/12/10.
// Copyright 2010 iGaret. All rights reserved.
//

#import <Cocoa/Cocoa.h>

@interface gradientViewClass : NSView {
NSColor *startingColor;
NSColor *endingColor;
int angle;
}

// Define the variables as properties
@property(nonatomic, retain) NSColor *startingColor;
@property(nonatomic, retain) NSColor *endingColor;
@property(assign) int angle;
@end
[/objc]

Now let’s go ahead and open gradientViewClass.m and set the code to this:

[objc]//
// gradientView.m
// MyChrome
//
// Created by Garet McKinley on 10/12/10.
// Copyright 2010 iGaret. All rights reserved.
//

#import "gradientViewClass.h"

@implementation gradientViewClass

// Automatically create accessor methods
@synthesize startingColor;
@synthesize endingColor;
@synthesize angle;

- (id)initWithFrame:(NSRect)frame {
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
[self setStartingColor:[NSColor colorWithCalibratedWhite:1.0 alpha:1.0]];
[self setEndingColor:nil];
[self setAngle:270];
}
return self;
}

- (void)drawRect:(NSRect)rect {
if (endingColor == nil || [startingColor isEqual:endingColor]) {
// Fill view with a standard background color
[startingColor set];
NSRectFill(rect);
}
else {
// Fill view with a top-down gradient
// from startingColor to endingColor
NSGradient* aGradient = [[NSGradient alloc]
initWithStartingColor:startingColor
endingColor:endingColor];
[aGradient drawInRect:[self bounds] angle:angle];
}
}

@end
[/objc]

Now open up your AppDelegate.h file and add the highlighted lines to it.

[objc highlight="13,17"]
//
// GradientWindowAppDelegate.h
// GradientWindow
//
// Created by Garet McKinley on 10/12/10.
// Copyright 2010 iGaret. All rights reserved.
//

#import <Cocoa/Cocoa.h>

@interface GradientWindowAppDelegate : NSObject <NSApplicationDelegate> {
NSWindow *window;
NSView *gradientView;
}

@property (assign) IBOutlet NSWindow *window;
@property (assign) IBOutlet NSView *gradientView;

@end
[/objc]

Now open up your MainMenu.xib in interface builder and assign your window’s view to gradient view by right click dragging (or control + dragging) your AppDelegate to your window’s view and selecting “gradientView”.

And now go into your View Identity properties (Command + 6) and enter in gradientViewClass as the class.

Also go ahead and set the window’s draw mode to textured by clicking on the window and assigning the attribute “Textured”.

We’re just about done! The only thing left to do is to open up our AppDelegate.m (yourProjectNameAppDelegate.m) and add in the highlighted lines:

[objc highlight="13,17,18,19,20"]
//
// GradientWindowAppDelegate.m
// GradientWindow
//
// Created by Garet McKinley on 10/12/10.
// Copyright 2010 iGaret. All rights reserved.
//

#import "GradientWindowAppDelegate.h"

@implementation GradientWindowAppDelegate

@synthesize window, gradientView;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// Insert code here to initialize your application
[window setBackgroundColor:[NSColor colorWithCalibratedWhite:.9 alpha:1]];
[gradientView setStartingColor:[NSColor colorWithCalibratedWhite:.9 alpha:1]];
[gradientView setEndingColor: [NSColor colorWithCalibratedWhite:.6 alpha:1]];
[gradientView setAngle:270];
}

@end
[/objc]

If you followed the tutorial correctly your window should now look like this:

Doesn’t look a whole lot different from the original textured window, but if you tweak the [NSColor colorWithCalibratedWhite:.9 alpha:1] value you can get different results! Just make sure to keep the window’s background color the same as the top gradient (to make it look fluid). With this example you’re only setting the value on a grayscale. To set RGB colors as a gradient do the following

[objc highlight="17,18,19"]
//
// GradientWindowAppDelegate.m
// GradientWindow
//
// Created by Garet McKinley on 10/12/10.
// Copyright 2010 iGaret. All rights reserved.
//

#import "GradientWindowAppDelegate.h"

@implementation GradientWindowAppDelegate

@synthesize window, gradientView;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// Insert code here to initialize your application
[window setBackgroundColor:[NSColor colorWithCalibratedRed:0.034066 green:1.000000 blue:0.000000 alpha:1]];
[gradientView setStartingColor:[NSColor colorWithCalibratedRed:0.034066 green:1.000000 blue:0.000000 alpha:1]];
[gradientView setEndingColor: [NSColor colorWithCalibratedRed:0.020439 green:0.600000 blue:0.000000 alpha:1]];
[gradientView setAngle:270];
}

@end
[/objc]

And then your window should look like this:

Well I hope you enjoyed this tutorial! And I hope you learned something from it! If you followed the tutorial and enjoyed it please share it or leave a comment! You can also download the source file from the tutorial below (You must first create an account (sign up is on the right) to download)! Enjoy!