I'm wondering what the correct sizes are for
1) setting a background image for a UIView on various iPhone devices, including Retina, 4s, 4, etc..
(does the version of iOS matter?)
2) setting a background image for the UINavigationBar, again on those various device versions/os versions
Lastly, how should one go about naming these files. I know that Apple is very strict about naming an image with a #2x.png, with specific names, etc.
If there is documentation that somebody could point to, that would be great as well. I couldn't find anything on the dev website...
Thank you in advance.
iPhone and iPod Touch Screen Pixel and UI Component Dimensions
Notes:
Retina Dimensions are given in parentheses.
All pixel dimensions include highlight or stroke effects. For example, a 30-pixel high button is actually a 29-pixel high button with a 1-pixel highlight on the bottom.
iPhone screen size:
Portrait 320×480 (640×960) pixels
Landscape 480×320 (960×640) pixels
iPhone Nav bar:
Portrait: 44 (88) pixels high
Landscape: 32 (64) pixels high
iPhone Nav bar buttons:
Portrait: 30 (60) pixels high
Landscape: 24 (48) pixels high
iPhone Nav bar button icons: About 20×20 (40×40) pixels (when in Landscape mode, it shrinks the 20×20 (40×40) pixel icon)
iPhone Toolbar: 44 (88) pixels high (does not change)
iPhone Toolbar button: 30 (60) pixels high (does not change)
iPhone Toolbar button icon: about 20×20 (40×40) pixels
iPhone Tab Bar: 49 (98) pixels high (does not change)
iPhone Tab Bar icon: about 30×30 (60×60) pixels
iPad Pixel Dimensions:
iPad screen size:
Portrait 768×1024 (1536×2048) pixels
Landscape 1024×768 (2048×1536)
iPad Navigation Bar and Tool Bars: 44 (88) pixels high
iPad Nav Bar and Tool Bar buttons: 30 (60) pixels high
iPad Nav Bar and Tool Bar button icons: about 20×20 (40×40) pixels
iPad Tab Bar: 49 (98) pixels high
iPad Tab Bar icons: about 30×30 (60×60) pixels
iPad List View: 320 (640) pixels wide.
Follow answers in this link for the basic naming standards for the newer devices. iOS version shouldn't matter, but hardware does.
EDIT
Wow, literally found all dimension on this site Check it out, it has pictures!
Another useful link here.
Related
on iPhone X, UIApplication.sharedApplication.statusBarFrame.size.height is 20.
As you know, on iphone X statusbar height is 44.
Because I set statusbar background using UIApplication.sharedApplication.statusBarFrame.size.height, there's weird blank white rectangle between statusbar and the contents.
But if I set background height 44 manually, that white rectangle disappear.
I cannot understand why UIApplication.sharedApplication.statusBarFrame.size.height is 20 on iPhone X. Do I need to do something else to get statusbar height correctly on iPhone X?
I noticed this too while testing my app on iPhone X. In my case I resolved this issue (status bar height became 44) by using LaunchScreen.storyboard instead of Launch Images. But in general it can be caused by lacking of a launch image with appropriate size for iPhone X (1125px × 2436px), if there is no appropriate launch image, also black stripes may appear at top and bottom of the app.
I am just finish my app for iPhone, now I have to convert it for both iPhone and iPad. I can check the device on runtime. but the problem is that. I don't know what should be size of custom navigation bar (320 * 44 I used in iPhone) ,custom tab bar (320 * 44 i used in iPhone), buttons,table background and my more images size for iPad.
I googling but not get the perfect answer in one place. till now i understand only that image name concept
devices without retina:
ImageName.png - For iPhone/iPod
ImageName~ipad.png -- For iPad
devices with retina display:
ImageName#2x.png - For iPhone/iPod
ImageName#2x~ipad.png -- For iPad
can any one provide me links from where I get the all information about image size and resolution for iPad and retina display. like splash screen , icon size , navigation bar size, tab bar size, manage custom images for buttons for both iPhone and iPad etc
It is hard to describe my all image size and resolution problem in this question, but hope you guys understand my problem
Many Thanks.
Here you go, from the Apple Developer Documentation: Custom Icon and Image Creation Guidelines
Also: App Icons on iPad and iPhone
I get the following warnings in my iPad launch images, but not the iPhone images:
I can't find the text related to the warnings anywhere.
Here are my plist settings:
And my image files:
When I tried "Default-iPad.png" it didn't fix it either.
The image dimensions are 768 x 1024 (portrait) and 1024 x 768 (landscape).
Make your mouse cursor hover over the warning sign and the warning should appear.
It'll tell you that iPad Launch Images should be 768 x 1004 and 1024 x 748
That means you have to remove the status bar from the image.
Here's the deal for launch images which work for all iPads. This should tell you exactly what to do and what you need. You need four images, either the first group or the second one, depending on if your app is set to show the top status bar or not. Notice that the names are the same whether your image has room for the status bar or not.
Description : image width x height - image name
iPad - with status bar turned ON (shows wifi connection, time, etc)
Portrait : 768x1004 - Default-Portrait.png
Landscape : 1024x748 - Default-Landscape.png
Portrait Retina : 1536x2008 - Default-Portrait#2x.png
Landscape Retina : 2048x1496 - Default-Landscape#2x.png
iPad - with status bar turned OFF (more screen real estate)
Portrait : 768x1024 - Default-Portrait.png
Landscape : 1024x768 - Default-Landscape.png
Portrait Retina : 1536x2048 - Default-Portrait#2x.png
Landscape Retina : 2048x1536 - Default-Landscape#2x.png
You can either resize your images to be 20px smaller in height, or you can make the status bar hide during app launch.
In new versions of XCode (I use 4.5.2), there is a checkbox to hide the status bar in the Project > Target > Summary settings, right above the launch image previews:
iPhone's resolution is 480*320. However, it has a global status bar at the top, and Safari uses an address bar and toolbar. How much vertical space do they take up? Or, what's the resolution on Safari's horizontal and vertical viewable area?
ANSWER SUMMARY
Status bar, 20 px
Address bar, 60 px
Toolbar, 44 px
I measure it at 320 x 356 (but see comment on question about debug bar).
The status bar is 20px high. But you can remove that to get more space. The toolbar is 44px high in portrait.
So, by my measurement, the Safari address / search bar is 60px high.
Not really to do with safari, but a useful link for iPhone dimensions
http://www.idev101.com/code/User_Interface/sizes.html
I am developing a game which works only in landscape mode. When I import a launch image (Default.png) into my xcode proj and run it, the image appears in portrait mode and then the view starts in landscape mode. How can I make my splash/launch image be displayed in landscape mode only?
First thing is no one is gonna know from outside the application that application is gonna run in portrait or landscape.
If at all you still want to view the splash screen in landscape mode you have to design the image in such a way as we cannot change the behaviour of the splash screen.
Instead of designing the image as 320X480, design it as 480X320 and your problem will get solved.
hAPPY cODING...
Always create 320x480 and 640x960 sized pictures. Just name them Default.png and Default#2x.png. As Michael Kessler notes, to have them appear in landscape, you have to rotate the graphics in your gfx editor.
I quote Apple docs as they look as of now:
iPhone and iPod touch
Portrait 320 x 480 pixels, 640 x 960 pixels (#2x)
Landscape Not supported
iPad
Portrait 768 x 1004 pixels, 1536 x 2008 pixels (#2x)
Landscape 1024 x 748 pixels, 2048 x 1496 pixels (#2x)
http://developer.apple.com/library/ios/DOCUMENTATION/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12
So you can see that landscape orientation of images are not supported for iPhone/iPod.