By MaRK: Making a NewsStand app for your iPhone/iPad

With Apple introducing iOS 5.0, comes a new feature, called Newsstand. It is a place; a folder in your iOS device where you can manage all your Newspapers and Magazine subscriptions.

This is what Apple has to say about this cool new feature:

“Read all about it. All in one place. iOS 5 organizes your magazine and newspaper app subscriptions in Newsstand: a folder that lets you access your favorite publications quickly and easily. There’s also a new place on the App Store just for newspaper and magazine subscriptions. And you can get to it straight from Newsstand. New purchases go directly to your Newsstand folder. Then, as new issues become available, Newsstand automatically updates them in the background — complete with the latest covers. It’s kind of like having the paper delivered to your front door. Only better.”

This is how the Newsstand app looks like:

Newsstand iPhone

So, in this first tutorial on Newsstand, we will see how to put an app into the Newsstand, or convert an existing application into a Newsstand application.

Let us first make a normal application. So open your XCode and create a new project by clicking File -> New -> New Project. Choose Single View Application from the Project Template and Click Next.

Give a suitable name to the Project.

Now, lets do normal stuff, of giving a normal icon for our application. I have included an app icon icon.png. Open NewsstandDemo-Info.plist file and add icon.png for the IconFiles key.

Now, we will just open our ViewController.xib and change it to look like this:

Build and run the application. Now click on the home button on the simulator and we will see our icon for the a

Ok. That was quite normal stuff, of giving an app icon. Now, lets convert our application into a newsstand app.

This basically involves 2 steps:

Make your app a newsstand app by giving a key in the plist.
Giving an icon and its specifications.

So lets get geared up to do that:

1. Giving a key in the plist: Open NewsstandDemo-Info.plist and define a new key in that. For this, click the drop down and choose the key named “Application presents content in Newsstand”.

By default, this boolean key has a value of NO. Change this value to YES.

Now run the application, and we will see an app in the Newsstand folder. Yes, that’s our app. Just click on the app, and we will see the view controller we created previously.

2. Giving an icon and its specifications: Now, lets change that icon to give it our custom icon. Please not that even for a Newsstand app, we will have to specify the normal icons that were provided earlier. Along with those, we have to provide an additional icon. There are specifications for the Newsstand icon, you could find them in the Human Interface guidelines. Although I will highlight the important points:

All Newsstand apps need to supply a Newsstand icon that represents the default cover art in the App Store. The long edge of this icon should measure at least 512 pixels.
The aspect ratio of all Newsstand icons should be between 1:2 and 2:1. In addition, all Newsstand icons must be flat and have 90° corners. Do not add perspective to any of your Newsstand icons. So, to change the icon, create a new key in NewsstandDemo-Info.plist by selectingIcon files (iOS 5) from the drop down. This is a dictionary having 2 objects, which in turn are dictionaries, the first being Primary Icon, and the second being Newsstand Icon. For the primary icon, just give the normal 57*57 image name, and any other names. For Newsstand, we will give the name of a magazine icon we have created.There are 2 important things to note here.

(a) Binding Type: This has 2 options - Magazine and Newspaper. Default is magazine.

When you specify the magazine binding type, iOS adds the appearance of multiple pages and a shadow that suggests thickness. You must also specify a left or right binding edge for a magazine icon, to indicate the edge that should receive the stapled binding appearance.When you specify the newspaper binding type, iOS adds the appearance of additional copies of the paper that are stacked beneath the current issue.b) Binding Edge: This key has 3 values to choose from – Left, Right andBottom.If you specify the left binding edge, iOS adds the stapled binding appearance to the left edge and the multiple-page appearance to the right edge, in case of a magazine.Similarly, for a newspaper binding edge, when you specify the newspaper binding edge as Left, iOS adds the appearance of a fold to the bottom edge. Similarly, for Right and Bottom edges.

Now, just run the app. We will see our app in the newsstand folder, along with the icon we have provided!

App in Newsstand folder

Also, take the application in multitasking mode, and you will see the staples to the left edge, and the multiple-page appearance to the right edge as shown below: