Making a Jingle Bells App – Bonus Tidbits


Posted On by John Slater in Jingle Bells, Making Apps, Tutorials

I thought it would be rude to simply leave you hanging with an ninety percent complete tutorial and not cover the little tweaks i made before i released our app, iJingle. Obviously in these tutorials we have covered the functionality and how you can achieve the same thing in your own app but we haven’t covered some of the smaller tweaks i made before i released the iJingle app.

  • Defining Supported Orientations
  • Prevent Auto Rotating
  • Adding Icon
  • Launch Screen
  • Prevent Toolbar Displaying

So as an added bonus to the series of tutorials i thought i would cover some of the little tidbits i’ve purposely left out of the past tutorials. The reasoning is simple, these are important parts in achieving what we achieved in the apps but they are important if you want to release your own app because the make the end user experience much better.

Download Resources

We are going to need to add some additional resources to our app for this tutorial so download “The Extra Resources” and drag them into your project in the same way we did in the second part of this tutorial. Once you’ve done this you’ll be on your way.

1. Defining Support Device Orientations

Currently our images are only supported when the device is portrait. There are two orientations that are portrait on the device, we want to support both of these orientations simply because if we can support them, why not.

Open up your Xcode project and click on the “JingleBells” project file in the left project navigation.

When you are in here you will see that the default orientations are selected, these are Portrait (home bottom), Landscape Left (home left) and finally Landscape Right (home right), leaving Portrait Upside Down (home top)

We can only support Portrait because this is all our image is capable of displaying as. This covers both Portrait normal and Portrait Upside-Down so lets unselect the portrait orientations and leave the portrait options selected.

1.1 Defining Programatically Which Orientations To Support

The first part of this simply tells to app what orientations it supports, it does not actually prevent the app from changing to those orientations.

To do this open up your ViewController.m file and scroll down to the section of code that looks like this…

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);

This is the event that get called when orientation change is detected. Here you will see that we are returning YES if the device orientation is anything but Portrait Upside-down, the reason is simple because this is the default activity.

We need to make a few changes to return YES if the device orientation is either portrait or portrait upside-down, below is the code we use.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown);

This code is a simple logic statement checking the orientation, if the orientation is UIInterfaceOrientationPortrait or UIInterfaceOrientationPortraitUpsideDown return YES, if not return NO.

Now if you run this you will find that the device will only rotate to the two portrait orientations.

Orientation Tip

Although we’ve used the upside-down orientation in this tutorial it is actually advised against by Apple which is why they do not enable this by default. Only portrait normal, landscape left and landscape right are portraits you should use normally, but for rare cases where you may need upside-down they offer this as an option. In future apps you should avoid supporting the device being upside-down, unless you are developing an iPad app.

2. Preventing Toolbar Displaying

Showing the time, signal or battery level in our iJingle app isn’t really needed which is why we opted for a fullscreen app. There are a few things you will need to do in order to hide the toolbar from your very own iJingle style app.

In the project navigation pane on the left of Xcode expand the Supporting Files folder and click on JingleBells-Info.plist, here is where we will make the changes to prevent toolbar displaying on launch.

In here right click in the white space towards the bottom and click on Add Row

Now in the new row begin typing Status and this should auto-fill with Status bar initially hidden, accept this and where NO is currently written to the right type YES and save this file.

Now in the ViewController.xib file select the main canvas and you will see, in the right panel, an option saying Status Bar, here select None.

Now when you run the app the status bar will not show during launch or afterwards.

3. Adding Icon

Defining an icon is very simple, again open up your JingleBells-info.plist file and there should be a pre-defined option called Icon Files with 0 Items.

When selected you can click the Add icon besides it and this will add a new row within it, here you will define the none-retina icon. You should call this “Icon.png”.

Clicking add again you will be able to define a second icon, this time for the retina-enabled icon. Call this Icon@2x.png.

4. Adding a Default Launch Screen

One tool within iOS is to define a launch image for your app. This is the screen that will be displayed when your app is currently launching. Of course the screen has no purpose but to show something to indicate the app is launching, that way the user doesn’t just think their phone has crashed.

Adding the default screen requires no effort and you may already have seen, if you imported to files correctly that you already have a launch screen because all that is required is that within your app bundle you provide 2 images.

One of the images you provide should be called “Default.png” and the second Default@2x.png for retina displays. As long as you have these files when Xcode compiles your app these will be used.

Making a Jingle Bells App, The End

And that is it. We’ve now gone from planning to design to coding to complete and a few tidbits too clean up after ourselves, now you should have your very own iJingle app.

Hopefully you have enjoyed this series and hopefully at has pushed you into learning how apps are put together from start to end. You now have a fully working app, as functionless as it may be, and with this knowledge you can adapt it to creating your very own apps in the future.

Feel free to publish your very own iOS iJingle app, just make sure it differs in design and name from iJingle.

Finally, Merry Christmas and have a Happy New Year we will be back in the new year with plenty more 2012 tutorials. Subscribe, Share and Enjoy.

Download The Xcode Project

You can download the Xcode Project for this tutorial to help you better understand the code and syntax.

Download Now!

About John Slater

I'm a professional web designer professionally, in a professional way, but also love iOS Development and two years ago is when i threw myself into the deep end and learnt enough to create a few apps. While i develop my skills i want to help others learn iOS development, because i'm kind like that. @slaterjohn