iOS project icon and default picture naming conventions

Source: Internet
Author: User
Tags naming convention

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

TD valign= "Top" > get itunesartwork picture in itunes

Image size (px)

Filename

Use

Degree of importance

512x512

itunesartwork

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.