This tutorial will teach you how to make the small handle that goes on a bottom bar of some apps such as Fontcase, as you can see here:

In this tutorial, you will learn how to make this bit:

Ok, so, there is a couple problems we will run into during this tutorial. Problems like not being able to move the window with the bottom bar since the split view will be intercepting the mouse events and making the separator move with the split view. This tutorial assumes only that you know your way around XCode/Interface Builder, and know to subclass things. So let’s get started.

Part 1

First, we need to make our project, so go ahead and make a Cocoa Application (File->New Project in XCode)

The first thing you need to do is design an interface. So, just expand the resources folder in XCode, and open up MainMenu.xib.

Next, we need to do is make our split view. Drag a vertical NSSplitView from the Library, onto the window.

Customize the settings in inspector until you get a desired result. Here is mine:

Make sure your split view resizes with the window in the size panel of inspector:

I’ve just added some elements to my window to make it look more like an application (Make sure to import the appropriate frameworks if you do this).

The reason I’ve left space at the bottom is to make room for the bottom bar. Which we will add soon. You now need to add your resize handle image into the project resources folder, here is one for you:

When you have it in your project, you need to drag it in from the media tab in the library. Just vertically center it with the space you left for the bottom bar. Make sure to put it inside the the subview you want it to resize. Go to the size panel and set these settings for you handle image so it moves with the view.

What you need to do now is make a Controller class. And set it as the delegate of the split view. You also need to make outlets to the window, and the handle image.

Write the class files for this class. (File->Write Class Files) Make sure to specify a superclass (NSObject) in the header file. In the .m file, you need to add a new method, it will be “awakeFromNib” We will use this to create a bottom bar on the window.

So now you have your bottom bar. But we have a problem here. The first is that the line that goes on the bottom bar isn’t dark enough, and the second is that the bottom bar won’t move the window when you try to drag it. Both of these fixed when we subclass the NSSplitView. But for now, we will set the handle as the divider. To do this, we need to use our delegate and a delegate method. So, make sure you have your controller set as the split view’s delegate. After the awakeFromNib method, add this one:

If you had a different handle outlet name, you will need to change that, but this line is self explanatory, it says, “Add another divider around the bounds (edges) of our handle.”
So if you were to build and go right now, you can resize the split view with the handle. It is now time to subclass the NSSplitView to get the bottom bar to be able to move the window, and change the divider line color.

Part 2

This tutorial assumes you know how to subclass objects, so go ahead and write the class files for your NSSplitView subclass. Don’t forget to specify a superclass.

To get the bottom border working, you need to have it so the SplitView can move the window because the splitview is overlapping the bottom bar, thus; intercepting it’s mouse events. So to make the split view able to move the window, add this method to your subclass’ “.m” file.

That’s it! So now to edit the line color that was bothering us, and to fix that, we use our subclass to return a dividerColor. Add this after your “mouseDownCanMoveWindow” method.

If you followed my instructions perfectly or similarly, you should have something close to this:



I hope you enjoyed this tutorial and find all information you learned in here useful and execute it wisely.

Related posts:

1. Adding a Titlebar Accessory View to a Window We’ve all seen it done before: some applications make...
2. Relaunching your application Whether you’re applying new preferences, installing a new version...