How to Make a Simple Mac App on OS X 10.7 Tutorial: Part 3/3

This is a post by iOS Tutorial Team Member Ernesto García, a Mac and iOS developer founder of CocoaWithChurros.

Welcome back to the third and final part of the How to Create a Simple Mac App tutorial series!

In the first part of the series, you created a Mac app that showed a list of Scary Bugs.

In the second part of the series, you covered how to show the details for the bugs, and how to add, delete and modify bugs.

In this third part, we’ll cover how to polish and make your app provide a better user experience.

By the time you’re done this tutorial, you will have created a complete Mac OSX app – and hopefully you’ll be inspired to create some Mac apps of your own! :]

What’s wrong with this app?

Everything works great so far. You can see a bunch of scary bugs, add or delete bugs, and you can even change any information on a bug.

It’s functionally complete. But as is, you are not providing a very good user experience.

For example, if you resize the window and make it very large, look what happens to the poor controls!

They are not resized, and they are totally misaligned, making the app look very ugly and unprofessional.

It’s even worse if you make your window small:

Ack! In this case you cannot even see all the information you need. It’s clear that you need to set a minimum window size so that your app is usable.

So, let’s first fix the resizing issues by setting a minimum window size.

Select MasterViewController.xib. Resize the view and arrange the controls in a way that you feel they look good and that you can see the information you need with the minimum size, perhaps like this:

We’ve also arranged to control so that all the buttons are aligned vertically, and all the controls in the detail view are aligned horizontally and have the same width.

Now let’s add a little detail to make it look better, and to make the separation between the list and the detail section clearer. We’re going to add a separator line.

Select Vertical Line in the Objects Library, and drag it onto our view. Place it between the list and the detail controls, just in the middle of the empty space.

After these changes, look in the size inspector and record the size of your view. In my case, it was 542×386 pixels, but yours may vary. This is OK, just write down what it is for you.

That’s going to be the minimum size for your application window. Now, select MainMenu.xib, and then select the Window of the app. In the size inspector check the Minimum Size option and change the width and the height fields to the values you wrote down earlier.

Compile and run the application, and try resizing the window:

You’ll see you can still resize the window, but it won’t get any smaller than the minimum size you defined. With this change, our information is always properly visible, w00t!

Now it’s time to handle the resizing, which requires a bit of thought. Your window has two different parts: the table view, and the details section. They should behave differently when you resize the window.

You want our list view to grow vertically when the window is resized, but you want its width to stay constant, irrespective of the window size. However, you want the detail side to expand as the window grows larger.

Let’s start by setting up the table view to resize properly. Select MasterViewController.xib, and select your table view. Switch over to the Size Inspector tab and change the autosizing settings to the following:

This will make it so that when your view is resized, the table also resizes vertically, but its width does not change.

Next select the separator line that you added, and set the autosizing settings exactly the same. You want that control to behave the same as the list view.

Now you need to configure the autosizing for the “Add” and “Delete” buttons. you don’t want these buttons to change their size, but you need to keep their distance to the bottom of the window constant, so that they are always located below the table view.

Set the autoresizing setting for both buttons like the following:

Compile and run the application, and try resizing the window. Great success!

Now you can resize the window, and the table view grows vertically to fit it. The buttons also change their position to stay always below the table view.

But the details section is not looking good yet. Let’s change that. In the details section, you need the controls to resize horizontally when the window’s width increases.

Select the text field, and change the autoresizing settings to this:

We’ve just configured the text field to resize horizontally when the window’s width increases, but to keep constant its height and vertical position.

Now repeat this exact configuration with the two labels and the Rating Control.

The button and the image view need a different configuration.

First, let’s configure the button to change the picture. You want that button to resize horizontally. But you also need it to change its vertical position when the window is resized. To achieve that, change the button settings to this:

This configuration allows the button to change its width, and to change its vertical position to stay at the same distance to the bottom edge of the window.

And finally, the image view. This one is different too. you need the image to grow up vertically and horizontally to fill the space between the button and the rating view.

Change the image view settings to the following:

Compile and run the application, and try resizing again.

If you resize the app, you can see how all the controls grow up to fit all the available space, and change their position accordingly. Now it’s looking much better!

If you feel that the app does not look good when you make it very large, you can also set the maximum size of the window the same way you changed the minimum.

Just go to the Size Inspector panel of the main window, and check the maximum size option. We’ll leave that as an exercise for you!

Note: As you can see, it is very important to make sure your view controllers can adapt to different window sizes on the Mac. Using autosizing attributes like we just did here is definitely the easiest way to get things working, but if you want more power and flexibility you might want to look into the new Auto Layout capabilities. Auto Layout is beyond the scope of this tutorial, but we cover it in great detail in our upcoming book iOS 6 by Tutorials – so if you want to learn more about it stay tuned for that! :]