Icons and Launch Images

Every app needs a set of app icons and a launch image.

  • An app icon is an icon for your application that is used on the device’s Home screen. It is tapped to start the app.
  • A launch image is a fullscreen image that is displayed instantly when the app is started. The image is displayed while the app loads and gets replaced by the starting screen when the app is fully ready to use.
  • An App Store icon is an icon for your application that is used in the App Store.
  • A Small icon is an icon for your application that is used for search results on the device (Spotlight), and in the Settings app.

These icons and images must meet specific criteria so that iOS can display them properly. In addition, icon and image files have naming requirements.

Type iPhone 5 iPhone 4/4S iPhone 3GS New iPad iPad 2
App Icon 114 x 114 57 x 57 144 x 144 72 x 72
Icon@2x.png Icon.png Icon–72@2x.png Icon–72.png
Launch Image 640 x 1136 640 x 960 320 x 480 1536 x 2008 (Portrait)
2048 x 1496 (Landscape)
768 x 1004 (Portrait)
1024 x 748 (Landscape)
Default–568h@2x.png Default@2x.png Default.png Default-Portrait@2x~ipad.png
Default-Landscape@2x~ipad.png
Default-Portrait~ipad.png
Default-Landscape~ipad.png
App Store Icon 1024 x 1024 512 x 512 1024 x 1024 512 x 512
iTunesArtwork@2x.png iTunesArtwork.png iTunesArtwork@2x.png iTunesArtwork.png
Small Icon 58 x 58 29 x 29 100 x 100 (Spotlight)
58 x 58 (Settings)
50 x 50 (Spotlight)
29 x 29 (Settings)
Icon-Small@2x.png Icon-Small.png Icon-Small–50@2x.png
Icon-Small@2x.png
Icon-Small–50.png
Icon-Small.png

iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds rounded corners, a drop shadow, and reflective shine. You should make sure your icons do not have any rounded corners or reflections so as not to interfere with this rendering.

If however, you’d rather not have these effects automatically added, you can set the Icon already includes gloss effects to YES in the Information Property List (Project-Info.plist).


  1. Custom Icon and Image Creation Guidelines. iOS Human Interface Guidelines. Apple, Sep 19 2012.

Custom Fonts

Embedding Fonts

If you don’t want to use any of the system fonts provided by Apple, you can embed custom fonts in your applications. TrueType and OpenType fonts are supported, but I’ve never had much luck with OpenType, so you should stick to TrueType if you can.

  1. Add the TTF resource to your Xcode project, much like you would add an image resource.
  2. Add the file name to the Information Property List (Project-Info.plist), under the Fonts provided by application section.

  1. Load the font into a UIFont using its PostScript name.
  2. Use the UIFont wherever you would write text, like in a UILabel, UITextField, or UITextView.

To get the font name, you can use the Font Book application provided with your Mac. Just load the font in the program and read the PostScript name field in the Info window.

Alternatively, you can print out all the available font families and names to your app using the following UIFont class methods.

Font Attributes

There is no way to set a custom font in the Storyboard, it must be done in code. This unfortunately makes it hard to align and resize text areas, but there are some methods available to help.

sizeToFit will change the bounds of the UIView to snuggly fit around its contents.

NSString‘s sizeWithFont: will return the width and height of the string using that specific font.

The sizeWithFont:forWidth:lineBreakMode: version can also be used for text on multiple lines, and the sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode: version can be used for text with variable font size. These will accurately calculate the width for UILabels with the same properties, but for some reason, the resulting CGSize only includes the first line of text.

 

Capturing Media

The UIImagePickerController is used to get media from the camera or photo library. UIImagePickerController is a modal view controller, meaning you display it with presentViewController:animated:completion: and dismiss it with dismissViewControllerAnimated:completion:.

Similarly to other modal views we’ve seen so far, the UIImagePickerController uses delegation to notify when it’s done and ready for dismissal.

Configuration

The picker is highly customizable, but it’s important to remember that not all devices have all possible capabilities. For example, some older iPads and iPods don’t even have cameras, and some older iPhones only have a back-facing camera. Therefore, it’s important to check for what’s available before proceeding.

isSourceTypeAvailable: checks whether the device supports picking media using the specified source type. Possible source types are:

UIImagePickerControllerSourceTypePhotoLibrary The photo library.
UIImagePickerControllerSourceTypeCamera The built-in camera.
UIImagePickerControllerSourceTypeSavedPhotosAlbum The Camera Roll album, or the photo library if the device does not have a camera.

availableMediaTypesForSourceType: returns the media types available for the selected source type. There are a handful of possible media types, but the two we are concerned with are kUTTypeImage and kUTTypeMovie. These constants are defined in the MobileCoreServices framework, which must therefore be added to the project for us to use them.

On devices with multiple cameras, isCameraDeviceAvailable: returns whether the specified camera is available or not. isFlashAvailableForCameraDevice: can then be used to check whether the specified camera has a flash or not.

The allowsEditing property lets the user edit the media in the picker before it completes.

When capturing video, the videoMaximumDuration property can be used to cap the video length, and the videoQuality property can be used to set the compression type and resolution.

Handling the Result

The media dictionary holds a lot of relevant information:

Key Description
UIImagePickerControllerMediaType The media type, kUTTypeImage or kUTTypeMovie
UIImagePickerControllerOriginalImage The original UIImage.
UIImagePickerControllerEditedImage The edited UIImage, if allowsEditing is set to YES.
UIImagePickerControllerMediaMetadata An NSDictionary holding metadata like EXIF and GPS.
UIImagePickerControllerReferenceURL An NSURL file reference to the original video.
UIImagePickerControllerMediaURL An NSURL file reference to the edited video, if allowsEditing is set to YES.

Device Orientation

Automatic Adjustment

When a user rotates their device, you may want to rotate the interface to go along with it.

You support different interface orientations by implementing the shouldAutorotateToInterfaceOrientation: method.

If you support an orientation, the frame of all subviews will be adjusted. This adjustment is based on their struts and springs, which are set in the Storyboard.

Struts Springs
Sticks the view to the sides that they are fixed to. Set which dimensions the view scales to as its superview’s bounds change.

By default, the view is not redrawn when its bounds change (i.e. drawRect: is not called automatically). The contentMode property is used to set the redraw behaviour.

Content Mode Portrait Landscape
UIViewContentModeScaleToFill
UIViewContentModeAspectFill
UIViewContentModeAspectFit
UIViewContentModeCenter

Note that this is not the same as springs and struts. Content modes move the bits of the drawing around, and do so after springs and struts have been applied. To call drawRect: every time the bounds change, set the content mode to UIViewContentModeRedraw.

Manual Adjustment

You may sometime want to layout the subviews manually. You can do so by implementing willAnimateRotationToInterfaceOrientation:duration:. Note that the second parameter to the method is the duration of the rotation, so you can even animate your layout changes and time them to complete at the same time as the view rotation animation.


  1. Paul Hegarty. Lecture 5 Slides. iPad and iPhone Application Development. Stanford, Nov 14 2011.

Testing Apps on a Device

Although testing your apps in the iOS Simulator is a good first step, you must make sure they also run properly on an actual device. There are a few differences between running an app on the simulator and on a device that you should be aware of:

  • The processor speed is different. Apps tend to run faster in the simulator.
  • The memory capacity is different. You’ll need to manage your memory more efficiently on a device if you want to avoid out-of-memory errors.
  • You can accurately test multitouch input.
  • You can use the camera to grab images and video.
  • You can use specific inputs not available in the simulator, such as audio, location, orientation, proximity, etc.
  • You can test network connections in a real world setting. This is particularly important if your app needs to connect over the cellular network.

Definitions

Unfortunately, installing apps on an iOS device is a convoluted process. Later versions of Xcode simplify the process a little, but you should still be aware of what all the pieces of the puzzle are in order to properly troubleshoot any issues.

Key A digital identity, consisting of a secret private key and a shared public key. This private key allows Xcode to sign your iOS application binary.
Certificate An electronic document that associate your digital identity with other information, including your name, email address, or business. All iOS applications must be signed by a valid certificate before they can be run on an Apple device.
Device An Apple device that is authorized to run developed applications. The device is identified by a Unique Device Identifier (UDID).
App ID A unique identifier that iOS uses to identify your application, connect to the Apple Push Notification service, share keychain data between applications, and communicate with external hardware accessories you wish to pair your iOS application with. You can create a wildcard App ID if you want a suite of applications to share data. 

Each App ID consists of a unique 10 character Bundle Seed ID provided by Apple and a Bundle Identifier suffix that is provided by the developer. An example App ID would be 8E549T7128.net.silentlycrashing.cart498j.FeedTheCat

Provisioning Profile A collection of digital assets that ties it all together, containing a set of iOS Development Certificates, Unique Device Identifiers and an App ID. The Provisioning Profile must be installed on each device on which you wish to run your application code.

Membership

You must be registered as an Apple Developer and subscribe to the iOS Developer Program. There are many flavours of developer programs, with yearly fees ranging from $0 to $299. depending on the size of the team and the type of distribution required.

Team Members can have many different roles:

Agent The primary contact for the development team. The Agent is responsible for accepting agreements and can enroll their team in additional Apple Developer Programs. The Agent is also the only member that can submit an app for review to Apple.
Admin Admins can invite members, approve Certificate signing requests, register App IDs and Device IDs, and create Provisioning Profiles.
Member Members can submit Certificate signing requests, and download Provisioning Profiles.

Our Team

Our class is registered to the University Program, which allows us to develop apps for educational purposes at no cost, but does not allow any distribution.

I am the Team Agent, and have generated a Certificate using my Key as identification. I registered a wildcard App ID for use in the class, and have generated a Provisioning Profile linking the Certificate to the App ID.

You will all be Team Members.

  1. Register an account as an Apple Developer.
  2. Accept my invitation as a Member of Concordia University (Design and Computation Arts).

You will e-mail me your Device IDs and I will add them to the list of authorized devices on our account.

  1. Locate your Device UDID.
  2. E-mail it to me along with the device model you own, for example: iPhone 3GS.

Once I have added all the devices, I will add them to the Provisioning Profile. To keep things simple, we will all share the Certificate and Provisioning Profile I will generate.

  1. Download and double-click the archived Key and Certificate. This will add the right entries to your Keychain. I will give you the required password in class.
  1. Download and double-click the archived Provisioning Profile (link coming soon). This will add the Profile to Xcode and automatically upload it to your phone when plugged in.

If you’re doing this on one of the computers in the lab, you will have to re-download both archives every time you log in as the machines are wiped out daily.

Running on a Device

  1. Open one of your projects in Xcode.
  2. Plug your iOS device in the computer.
  3. Select the device from the scheme menu at the top.

  1. Make sure the correct profile is selected in the Code Signing section of the Build Settings.

  1. Build and run your app.