Xcode Fix: Show the iPhone Simulator Skin on a Retina Display

Update 2-22-15: Xcode 6 doesn't show the Simulator Skin anymore. You should use the .PSD documents from Apple instead.

My students get confused when they’re working on an iPhone app and they run the iOS Simulator and only see a rectangular screen. Contrary to popular belief, you don’t need to see the “iPhone skin” to make an iPhone app. You won’t see the skin if your working on iOS 7 apps, scaling the iOS Simulator to something other than 100%, or making iPad apps. There’s two options to get the iPhone Skin to work, and I’ll explain what the retina iPhone screen means.

Option 1: Turn Off Scaling

If you scale the size of the iPhone simulator to 50% or 75% the skin will not display. It’s not documented behavior. I believe that Apple did this because it prevents screenshots of iPhone apps that are blurry or distorted. If you need to take screenshots for marketing, Apple offers iOS device .PSD files for Photoshop that include the skin that you can use for promotional purposes.

iPhone 5S for marketing your apps.

Option 2: Get a Retina Display

On iOS 7 there are no non-retina iPhone’s that can run the OS. You’ll be targeting an iPhone 4, iPhone 4S, iPhone 5, or iPhone 5S as the minimum system requirements. Because of this new restriction, when you go to make your iPhone app, the screen that you’re going to see on your computer is going to be a retina iPhone screen. It’ll be a 1-to-1 pixel representation and it will be huge!

If you’re on a non-retina display (i.e. external monitor, Macbook Air, iMac, or older Macbook Pro) you will not see the “iPhone skin” Instead you’ll see one of two things. Either a popup window that looks like the dimensions of the screen, or you’ll see a strange black frame around a very large window.

What is a retina iPhone Screen?

There are a ton of pixels on a retina screen, it’s double the size of what the original iPhone shipped with, which was 480x320 pixels (height x width). To top it off, Apple launched a new iPhone 5 with even more pixels in the vertical direction. Here are the current iPhone screen sizes. Take a look at how big these iPhone screens look at full resolution.

• iPhone 4/4S: 960x640 pixels (height x width)
• iPhone 5: 1136x640 pixels (height x width)

View fullsize

iPhone 4 (3.5" retina screen) 

View fullsize

iPhone 5 (4" retina screen)

Desktop Retina Screens

Mobile device screens have been far ahead of the desktop screen sizes since the first introduction of Apple’s retina display on the iPhone 4. At the time, the increase in pixel density was a huge upgrade and cutting edge. Now the mobile market has caught up, but pixel density on desktop displays is still behind. The retina Macbook Pro’s are one of the few options for a large (i.e. 15”) monitor, unless you’re willing to spend $3,500 on a 32” 4k display from Sharp.

Buying the Sharp 4k display won’t solve your desire for more pixels either. The graphics power required for a display of that size is enormous. To power a desktop sized retina monitor your computer needs a very, very fast graphics card. These graphics cards are expensive (and will be for the next several years). You’ll need a 2013+ Retina Macbook Pro or the new 2013+ Mac Pro to show all of the pixels on 4K monitors (3840x2160 pixels).

Retina Macbook Pro

The 15” retina display on my Macbook Pro has 2880x1800 pixels (width x height). That’s just enough pixels to display a retina version of the iPhone 5 Simulator. If you’re on the Macbook Pro 13” your resolution is 2560x1600 which is too small to display the retina iPhone 5 skin, but large enough to display the retina iPhone 4 skin.

• iPhone 4 Skin - 1488 x 792 (height x width)
• iPhone 5 Skin - 1668 x 828 (height x width)

iPhone 4 Skin - 1488 x 792 (height x width)

iPhone 5 Skin - 1668 x 828 (height x width)

Bug Fix: Multiple Monitors and the iPhone Skin

I’m on a Retina display, but I connect to an external display. When I move the iPhone Simulator between screens it doesn’t update to show the retina iPhone skin. In order to get it to redraw itself with the skin, you can just change the current device that you’re simulating. Toggle between the iPhone 4” and iPhone 3.5” screens from the Menu Bar.

Go to the Menu > Hardware > Device > iPhone Retina (4-inch)

You can also do this fix after you’ve detached from a non-retina display and are now back to just working off of your Retina Macbook display.

Connect

1. Join my iPhone mailing list to keep learning how to make iPhone apps.
2. For more structured learning, signup for my online iPhone app course.

Top 3 Projects from How to Make an iPhone App for iOS 7 in January 2014

We ran another successful app challenge in my new course How to Make an iPhone App for iOS 7! There were 47 projects submitted for the competition and it was narrowed down to three winners. Each of these students has built an app from scratch and taught themselves Objective-C and iOS app development along the way.

The students started with sketches based on their app ideas, moved to paper prototyping, and then began writing code to bring the app to life. Checkout the project pages and leave some love!

1st Place

Thread List: Embroidery Floss/Thread Manager

by Josh Greco

"There are hundreds of different colored embroidery flosses and it can be difficult to keep track of what you have on-hand versus what you need for any given project. This application aims to simplify this task and help ensure you always have enough of the materials you need.

Features:

1. Maintain a database of embroidery floss on-hand.
2. Maintain a database of personal projects and their embroidery floss requirements.
3. Maintain a database of all available embroidery floss produced by the DMC manufacturer.

My wife is an avid "stitcher" and has thusfar been unhappy with existing apps which advertise similar functionality. If I can make something she can use and enjoy, it stands to reason that others would find it useful."

2nd Place

ClimbNotes

by Trish Ang

"ClimbNotes is an app for rock climbers! More specifically, it's a personal note-taking app for any projects that a climber is working on. A project is a climbing route that requires multiple tries and sometimes long periods of time to complete. 

This app is actually a sub-function of a larger app I'm developing, SuperBeta: an interactive guide for outdoor climbing. Since the functionality is a lot more simple, however, I'm focusing on learning the basics of objective C and also learning how to customize the UI through Xcode. 

Below is an early sketch and a test walkthrough is available here. The functions for ClimbNotes are basically:

• Add a new route
  A route requires at least one image. You can add a title, a difficulty grading, a quality grading, and tie it to a location. You can also add supplemental information like a description, categorize the type of climb it is, etc. If possible, I'd also like the user to be able to trace the route onto the photo.
• Take notes on your progress
  On routes you've already recorded, you can make notes for each attempt you make. For example, I can say I tried the route again last Sunday and got two moves further, but still fall around 70% through."

ClimbNotes Video Link

3rd Place

Brewer Note

by Andy Culler

"What's the biggest problem with homebrewing? Forgetting an awesome recipe! From brewday to cracking that first bottle is at least 3 weeks, which is plenty of time to not write it down.  Why not record your recipe as you're brewing, complete with notifications for every step of the way?  BrewerNote brings this all to your phone along with brew history, recipe sharing, and more

Recipes

The recipes section will be used to store the detailed ingredients and steps to brew each recipe that the user inputs.  These will be associated with brews, both current and completed.

Current Brews

The current brews section tracks brews that are currently either being brewed (still in the kettle) or in some stage of fermentation. The main reason that this is important is for timers. These timers include:

• Hop additions
• Fermentation stages
• Carbonation

Completed Brews

The completed brews section is a history of past brews.  This is helpful when, down the line, you crack open an old bottle of brew. So long as it's labeled, this section will allow you to go back and see what ingredients were used, how long it was fermenting, and how long it aged."

Show Finger Touches with Reflector or iPhone Demos with TouchPose

If you've used Reflector on Mac to create screen recordings or demo videos of your iPhone apps, you're going to want to use this code. I use a lot of gestures and touch input in my apps. To make it easy to see what the user is doing during a video or presentation in my development versions I now use Todd Reed's Touchposé to display the fingers. You can access my fork of Touchposé on github. 

Note: You can only show touches for code that you have access to. There isn't an option to do this in public iPhone or iPad apps.

Warning: Don't submit the Touchposé code to the App Store, keep it only in your development builds. I'll show you how to prevent accidentally submissions with a pre-processor variable. 

1. In your prefix header file (i.e. .pch file under Supporting Files in Xcode). Add code for a preprocessor variable called "APP_STORE_RELEASE". You'll want to change this value when you need to make an official release.

// Note: Set to 1 when ready to submit app to App Store
// Set to 0 for development and testing
#define APP_STORE_RELEASE 0

Find your .pch file in your Supporting Files folder on the left panel.

2. Drag QTouchposeApplication.h and QTouchposeApplication.m to your project navigator to add it to your project and target.

a. Make sure you copy the files into your destination group's folder.

b. Make sure you add it to any targets that will need to show touch input.

Check the boxes for "copy items into destination group's folder" and add to your app target.

3. Open main.m under Supporting Files and add code to create the QTouchposeApplication when not building the app for the App Store. (i.e. we don't want to submit private APIs , or Apple will reject the app)

a. At the top add a header #include statement, but only include when not building for the App Store

#if !(APP_STORE_RELEASE)
#import "QTouchposeApplication.h"
#endif

b. In the main method brackets, update the code to be as follows.

#if !(APP_STORE_RELEASE)
return UIApplicationMain(argc, argv, NSStringFromClass([QTouchposeApplication class]), NSStringFromClass([AppDelegate class]));

#else
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
#endif

Update the code in main.m to only use the special QTouchposeApplication when not building for App Store

4. Open your AppDelegate and start Touchpose. You can play with the settings so that it's always visible, or only when your mirroring the display for Reflector or projectors.

a. Import the header file for QTouchposeApplication.h

#if !(APP_STORE_RELEASE)
#import "QTouchposeApplication.h"
#endif

b. In application:didFinishLaunchingWithOptions: update the code to show the touches. Typically I keep alwaysShowTouches to NO, unless I'm testing something or recording a video with ScreenFlow.

#if !(APP_STORE_RELEASE)

// For demo purposes, show the touches even when not mirroring to an external display.
QTouchposeApplication *touchposeApplication = (QTouchposeApplication *)application;
touchposeApplication.alwaysShowTouches = YES;
#endif

5. Enjoy!

Checkout my iPhone Game Showing Touches

We're working on a new game for iPhone called Bomb Dodge. We did a limited release that you can download called Protect the Bomb Checkout the video and let me know if the touches help you understand how the game plays.

Wrap-up

1. Download my sample project or grab the source code from github.
2. Subscribe to my iPhone newsletter.
3. Grab Reflector if you don't have it, it's essential for recording demo videos of iPhone or iPad apps.
4. Checkout my beginner iPhone development course on Skillshare.