First, the application of pictures
The image resources in the standard iOS control, Apple has done the corresponding upgrade, we need to worry about is to apply their own image resources. Just like the @2x high-resolution version (translator: the high-score) image created to support the iphone 4, we want to create a high-score version of the image for the ipad app. I know a lot of developers are very predictable. This upgrade was completed on the iOS 5.0 SDK. But I would like to stress that what Michael Jurewitz (@Jury) mentioned before:
-If you want your high scores to appear on your new ipad, you must compile with Xcode 4.3.1 along with the iOS 5.1 SDK!
Second, the application icon
The next step is to make a high-score version of the app's main icon, because the low-score version of the icon looks miserable on the new ipad desktop. To support more iOS devices and higher-resolution screens, iOS developers need to prepare the main program icon file for their app in a variety of sizes, and the list looks increasingly long and longer ... (Translator: Sigh ~). For details, please refer to the latest Apple Developer documentation for iOS APP Programming Guide and iOS Human Interface guidelines. From the official documentation, I found what we needed to prepare for the retina display of the new ipad:
ipad main app icon (144x144 pixels): Previously used on ipad 1, 2 generation is 72x72 pixels. Now we need the extra @2x version (144x144 pixels).
ipad search results icon (100x100 pixels): This icon appears in the system search results (Translator Note: Also in system settings, if the app supports it). The previous version was 50x50 pixels, and now the @2x version requires 100x100 pixels.
File naming and Info.plist files:
Depending on the minimum version of iOS that your app needs to support, you may want to specify the icon file name in the Info.plist file, or you can name different versions of the main icon files according to Apple's specifications. Perhaps the saddest thing is that you're doing a general-purpose app (Universal app) that runs on your iphone and runs on your ipad, and you're going to support iOS 3.1.x or even earlier (translator: now iOS 4.0 and later have a very high device penetration rate, There is absolutely no need to support the antique version, we are not Android). Since iOS 3.2 does not support the designation of an icon file in the Info.plist file, you have to use the specifications specified by Apple to name the icon file. A complete list is almost like this:
icon.png–57x57 iphone App icon
[email protected]–114x114 iPhone Retina Display app icon
icon-72.png–72x72 ipad app icon
[email protected]-144x144 iPad Retina Display app icon
icon-small.png–29x29 IPhone system settings and search results icons
[email protected]–58x58 iPhone Retina display system settings and search results icons
icon-small-50.png–50x50 IPad system settings and search results icons
[email protected]–100x100 iPad Retina display system settings and search results icons
If your app is only compatible with iOS 3.2 and later, Then you can specify the icon file in the Info.plist file, you do not have to abide by the above naming convention, of course, you have to name it is not a problem (translator: In order to facilitate and art communication and future project resources management, or recommended to follow this set of specifications). In iOS 3.2, Apple introduced the Cfbundleiconfiles key in the Info.plist file, where you can specify the various versions of the app's icon directly. If you omit the. png suffix, you can also ignore the @2x portion of the high-score version of the image and the system will automatically match.
Apple has introduced a new key cfbundleicons in iOS 5.0 to support the newspaper and magazine (Newsstand) feature, which makes things more complicated (the translator: Sigh again). This key contains sub-key Cfbundleprimaryicon, the inside of the Cfbundleiconfiles subkey is stored in the Info.plist root node cfbundleiconfiles key inside the content. If your app only supports iOS 5.0 and later, then you can use a cfbundleicons key, or you'll need to keep the Cfbundleiconfiles key and related content at the same time.
(Translator: The original story here is slightly biased, not mentioning Cfbundleprimaryicon, and confusing, confusing.) In fact, in Xcode, the default way to open Info.plist is to see the icon files and icon files (IOS 5) two sets of keys)
In short, in order to be backward compatible, this link will bring a little confusion to the developers, quite easy to make mistakes. Therefore, developers are advised to do more testing for different devices and screen combinations.
Third, the App store screenshot picture
Apple has recently made rules for app submissions, and if it's an iphone or IPod touch app, it must submit a high-score version of the Retina Display app screen. The specific image size requirements are as follows (the previous dimensions include the system status bar):
-Horizontal screen: 960x640 or 960x600
-Vertical screen: 640x960 or 640x920
Apple has yet to make similar requests for ipad app submissions, but it's time to consider using a high-score version to make your app look good on the new ipad. The corresponding dimensions are as follows (the front dimensions are in the case of the status bar):
-Horizontal screen: 2048x1536 or 2048x1496 pixels
-Vertical screen: 1536x2048 or 1536x2008 pixels
Note: Some of the comments in the original text have been supplemented, run-time loading screen, for the new ipad screen also need to prepare, file naming and size requirements:
-Horizontal screen: [email protected]~ipad.png (2048x1496 pixels)
-Vertical screen: [email protected]~ipad.png (1536x2008 pixels)
--------------------------------------------------------------------------------------------------------------- --------------
--------------------------------------------------------------------------------------------------------------- --------------
ICON Settings Official documents: http://developer.apple.com/library/ios/#qa/qa1686/_index.html
IPhone, ipad Universal settings
itunes show
① open itunes, click on the itunes Store Right-Copy the link on the selected app icon,
And then open the link in the browser (this link is an introductory page applied on AppStore)
② in the displayed page, using the developer tools on the browser, navigate to the upper-right corner of the page
175x 175 app icon
http://a3.mzstatic.com/us/r1000/089/purple/43/61/36/ Mzl.gvbidihl.512x512-75.jpg
Image size (px) |
Filename |
Use |
Degree of importance |
512x512 |
itunesartwork | TD valign= "Top" > get itunesartwork picture in itunes
Yes No, recommended if not, Icons cannot be displayed in Ituens, |
57x57 |
Icon.png |
The App Store and home interface on Iphone/ipod touch |
This really is. |
114x114 |
[Email protected] |
IPhone 4 (High resolution) Home interface [Retina Display in App Icons settings] |
No, we recommend it. |
72x72 |
Icon-72.png |
Home interface compatible with ipad [first picture in App Icons settings] |
No, we recommend it. |
29x29 |
Icon-small.png |
Spotlight Search and Setup interface |
No, we recommend it. |
50x50 |
Icon-small-50.png |
ipad-compatible Spotlight Search |
If there is a set bundle, it is best to have |
58x58 |
[Email protected] |
IPhone 4 (high resolution) Spotlight Search and Setup interface |
If there is a set bundle, it is best to have |
320x480 default.png iPhone4 Launch Images
640*960 [email protected] iPhone4 Launch Images
768x1024 default-portrait~ipad.png ipad Launch Images
1024x768 default-landscape~ipad.png ipad Launch Images
Default-landscape~ipad.png App for ipad
Image size (px) |
Filename |
Use |
Degree of importance |
512x512 |
Itunesartwork |
Show in ITunes Store |
No, we recommend it. |
72x72 |
Icon-72.png |
The home interface on the APP store and ipad |
This really is. |
29x29 |
Icon-small.png |
The Setup interface on the ipad |
If there is a set bundle, it is best to have |
50x50 |
Icon-small-50.png |
ipad-compatible Spotlight Search |
No, we recommend it. |
Now do not provide iPhone4 must icon [email protected], will not pass the App Store audit, so, now [email protected] is also necessary.
IPhone Tab Bar Item image
Standard Display
30x30. PNG, 24-bit with transparency (if only 1 color). Worst case Size ~350 bytes. Standard set-up tabicon.png
Retina Display
60x60. PNG, 24-bit with transparency (if only 1 color). Worst case Size ~2000 bytes. [Email protected]
Reference turn: Http://shy818818.blog.163.com/blog/static/93398309201157104340600/
http://developer.apple.com/library/ios/#documentation/uikit/reference/uitabbaritem_class/reference/reference.html
iphone launch page, Default.png
Extend the time of default.png display
Join thread delay in DELEGATE.M
-(Bool) Application: (UIApplication *) application didfinishlaunchingwithoptions: (nsdictionary *) launchOptions
{
[Nsthread Sleepfortimeinterval:10];
.............
}
The applied default.png picture shows a time that is proportional to the speed at which the machine loads the application, the faster the load, the shorter the display time, the slower the load, the longer the display time,
If you feel fast, you can use the above method to prolong its display time.
iOS devices now have three different resolutions:
IPhone 320x480,
IPhone 4 640x960,
IPad 768x1024.
Previous program Start screen (picture) Just prepare a default.png, but now it's getting a lot more complicated.
If a program supports both the iphone and ipad, it needs to include the following images:
default-portrait.png ipad Dedicated vertical splash screen 768x1024 or 768x1004
Default-landscape.png ipad-specific landscape Start screen 1024x768 or 1024x748
default-portraitupsidedown.png ipad Dedicated Vertical splash screen (home button on screen), can omit 768x1024 or 768x1004
Default-landscapeleft.png ipad-specific landscape Start screen, can omit 1024x768 or 1024x748
Default-landscaperight.png ipad-specific landscape Start screen, can omit 1024x768 or 1024x748
default.png iphone Default boot image, 320x480 or 320x460
[Email protected] iPhone4 start picture 640x960 or 640x920
In order to use the above splash screen on ipad, you also need to add the Info.plist
Key:uisupportedinterfaceorientations.
Also, adding a value
Uiinterfaceorientationportrait
Uiinterfaceorientationportraitupsidedown
Uiinterfaceorientationlandscapeleft
Uiinterfaceorientationlandscaperight.
implement Default.png animations on iphone
Principle:
Add a picture like default.png and animate the image to achieve the fade-out effect of the default animation.
Operation:
In-(BOOL) Application: (UIApplication *) application didfinishlaunchingwithoptions: (Nsdictionary *) Add the following code to the Launchoptions:
Make this interesting.
Uiimageview *splashview = [[Uiimageview alloc] Initwithframe:cgrectmake (0,0, 320, 480)];
Splashview.image = [UIImage imagenamed:@ "Default.png"];
[Self.window Addsubview:splashview];
[Self.window Bringsubviewtofront:splashview];
[UIView Beginanimations:nil Context:nil];
[UIView setanimationduration:2.0];
[UIView setanimationtransition:uiviewanimationtransitionnone ForView:self.window Cache:yes];
[UIView setanimationdelegate:self];
[UIView setanimationdidstopselector: @selector (startupAnimationDone:finished:context:)];
Splashview.alpha = 0.0;
Splashview.frame = CGRectMake (-60,-85, 440, 635);
[UIView commitanimations];
It's OK.
Sizes of IPhone UI Elements
Element |
Size (in points) |
Window (including status bar) |
X 480 pts |
Status Bar (How to hide the status bar) |
pts |
View inside window (Visible status bar) |
460 x |
Navigation Bar |
pts |
Nav Bar Image/ Toolbar Image |
Up to x pts (transparent PNG) |
Tab Bar |
pts |
Tab Bar Icon |
Up to x pts (transparent PNGs) |
Text Field |
pts |
Height of a view inside A navigation bar |
416 pts |
Height of a view inside A tab bar |
411 pts |
Height of a view inside A NavBar and a tab bar |
367 pts |
Portrait Keyboard Height |
216 pts |
Landscape Keyboard Height |
pts |
Points vs. Pixels
The IPhone 4 introduced a high resolution display with twice the pixels of previous iPhones. However you don ' t has to modify your code to Support high-res displays; The coordinate system goes by points rather than pixels, and the dimen Sions in points of the screens and all UI elements remain the same.
Ios 4 supports high resolution displays (like the IPhone 4 display) via The scale property on UIS Creen, UIView, UIImage, and Calayer classes. If the object is displaying high-res content, it is set to 2.0. Otherwise it defaults to 1.0.
all your need to does to support high-res displays are to provide @2x versions of the images in your project. See the checklist for updating to ios4 or apple documentation for supporting High Resolution screens for More info.
Adjusting Sizes
Click here for See how to Adjust view Frames and Bounds.
Additional References
- Apple documentation:points vs. Pixels
- Apple Documentation:uibarbuttonitem Class Reference says "Typically, the size of a toolbar and navigation bar image is 20 X-Points. "
- Apple Documentation:uitabbaritem Class Reference says "the size of an a tab bar image is typically-X-points."
// ----------------------------------------------------------------------------------------------------
Fillet radius
ITunes artwork icon─────────────────────────512px (90px)
App icon (iPhone4) ──────────────────────────114px (20px)
App icon (iPad) ─────────────────────────────72px (12px)
App icon (iPhone 3g/3gs) ─────────────────────57px (10px)
spotlight/settings icon icon (iPhone4) ─────────────58px (10px)
spotlight/settings icon icon (iPhone 3g/3gs/ipad) ────29px (9px)
=====================================================================
Designing an app for IPhone, IPad or IPhone4 Here's a couple of things to keep in mind:
IPhone & IPod Touch (1st, 2nd & 3rd Generation)
portrait:320 x 480 px, x 480 point
landscape:480 x-px, 480 x
Status bar:20px, 20point
dpi:163dpi
Color Mode:8bit RGB
Color Temperature:warm
Application icon:57 x-px, X-point
AppStore icon:512 x px, X
Spotlight Search icon:29 x 29px, X point
Document icon:22 x px, X
Webclip icon:57 x-px, X-point
Toolbar icon:20 x + px, X-point
Tab bar icon:30 x px, X
Launch Image:see above Portrait/landscape
IPhone4
portrait:640 x 960 px, x 480 point
landscape:960 x 640 px, 480 x
Status bar:40px, 20point
dpi:326dpi
Color Mode:8bit RGB
Color Temperature:cool
Application icon:114 x px, X
AppStore icon:512 x px, X
Spotlight Search icon:58 x (px), X
Document icon:44 x (px), X
Webclip icon:114 x px, X
Toolbar icon:40 x + px, X-point
Tab bar icon:60 x px, X
Launch Image:see above Portrait/landscape
notes:effectively pixel-doubled Previous generations, bare in mind the screen is the same size and concessions would have To being made e.g keeping assets the same *physical size but doubling their effective resolution. See below.*
Ipad
portrait:768 x 1024px, 768 x 1024point
landscape:1024 x 768px, 1024x768 x 768point
Status bar:20px, 20point
dpi:132dpi
Color Mode:8bit RGB
Color Temperature:warm
Application icon:72 x px, X
AppStore icon:512 x px, X
Spotlight Search icon (Results): X-px, X-point
Spotlight Search icon (settings): x px, X
Document icon:64 x px, X
Webclip icon:72 x px, X
Toolbar icon:20 x + px, X-point
Tab bar icon:30 x px, X
Launch Image:see above Portrait/landscape
Notes:many apps include a rounded mask at the corners of the Screen/split view-its part of the default view of the many app s by the OS. The radius of the rounded corner of these is 6px onto a black background and is optional.
Icon size radii (via Toxinide):
29X29PX, border-radius:5px
50x50px, border-radius:9px
57X57PX, border-radius:10px
58X58PX, border-radius:10px
72X72PX, border-radius:12px
114X114PX, border-radius:20px
512X512PX, border-radius:90px
iOS project icon and default picture naming conventions