How can one create a iOS7 Icon in Images.xcassets with Xcode5? I've searched many places, but i did not find what the required Icon sizes were.
My App is for iOS7+.
Here is a screenshot:
I've added some icons below in the AppIcon.appiconset folder in mac. Do I need to add in the xcode side bar? What are the required sizes for the AppIcon.appiconset folder?
This is very easy & in-fact it is self explanable. You need not even have to think about the name of the icons. The only thing that you need to worry about is the sizes. Here is how to infer the sizes out of that screen.
BASIC RULE : Multiply the 1x or 2x shown in the empty box with the pt value under it. When there are two boxes like 1x & 2x for the same pt value, let's say 40pt, it means you have to provide both the sizes of images. 40x40 & 80x80 .
Make sure if your app is Universal or Device specific. Based on that, you need to provide the icons.
Point to be noted Images.xcassets doesn't sizes your files. It is just a catalog where you add the files of specific sizes.
Now let's say you have a myIcon.png file of a bigger size (its always better to create your app icon with a size of 1024x1024, if not then at least 512x512).
Open the Images.xcassets & now read each empty icon elements. There is the size name provided, already.
NOW CONCENTRATE : If empty dasshed box reads as 2x & text below reads as iPhone Spolight - iOS 5,6 Settings - iOS 5-7 29pt, then it is actually seeking an image double the size of 29pt, So you need an image size of 58x58
You just need to re-size your actual image using any editor (previewer is the best editor) & create the specific size. Save it some where & drag upon that specific Box.
You are done.
Here is a sample to read it. Hope that makes all your doubt clear going forward.
You need not have to worry about naming conventions of images when using Images.xcassets
Once you have all your images ready, just drag & drop it into the Images.xcassets in Xcode itself. Make sure you are dropping it into AppIcon category. Similarly you need to do things for LaunchImage as well if you are interested.
AppICon Sizes - XCAssets - Xcode 6.4
iPhone Spotlight
iOS 5-6 - 29pt
29*29 -1x,
58*58 - 2x,
87*87- 3x
iPhone Spotlight
iOS 7,8- 40pt
80*80 - 2x,
120*120 - 3x
iPhone App
iOS 5,6 - 57pt
57*57 - 1x,
114*114 - 2x
iPhone App
iOS 7,8 - 60pt
120*120 - 1x,
180*180 - 2x
iPad Settings
iOS 5-8 - 29 pt
29*29 -1x,
58*58- 2x
iPad Spotlight
iOS 7,8 - 40pt
40*40 -1x,
80*80 - 2x
iPad Spotlight
iOS 5,6 - 50pt
50*50 -1x,
100*100 - 2x
iPad App
iOS 5,6 - 72pt
72*72 -1x,
144*144 - 2x
iPad App
iOS 7,8 - 76pt
76*76 -1x,
152*152 - 2x
Related
For a new project my client wants to cover all iPhone and iPad sizes. For icons and sprites I'm not really gonna change the shapes of the images, but I'm in a bind with assets for my background images.
Looking at http://iosres.com I was wondering if there is some logic to cover both Landscape and Portrait 3:4 and 9:16 in one asset or should I simply make a set of iPhone and iPad and use UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad to figure out what to show before loading my views?
Also I'm wondering what's most effective for all the different device sizes. I know from experience that an iPad 3 wouldn't like to have a background image loaded on 4k resolution and that you want to avoid pixel differences so it won't trigger scaling in UIImageViews. Will iOS automatically figure out that the iPad 3 will use like the #1x variations, whereas the iPad Pro will load the #3x versions?
Yes iOS will automatically figure out which image to load at runtime and load #1x #2x or #3x depending upon the type of device. You don't need to do anything like UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad for each image.
Edit:
You can also add ~ipad suffix in image names so iOS will pick the appropriate background image for iPhones and iPads. i.e. image_name#2x~ipad.png and image_name#2x.png.
I suppose iPhone 6 Plus is with 1242x2208px. Thus, my #3x images are scaled according to this ratio.
When applied, the image is much bigger than it's displayed on iPhone 6 and iPhone 5 with corresponding #2x images. I wonder why?
below is an example - the last icon is using #3x while the first three are stretched from #2x images.
After being struggling for days, I finally found the problem.
It turns out that, you have to set LaunchImage sets to fit each device screen appropriately. Otherwise, Apple will assume your app is not ready for iPhone 6 and 6 Plus yet, thus stretching your image assets to fit the screen. So even when I set the high resolution images, it still recognise it is for iPhone 5S and below.
The solution is, create a LaunchImage asset catalog, make sure you have the right resolution of launch images for each device. for iPhone 6 and 6 plus, you these additional assets:
Default-667h#2x.png - 750 x 1334
Default-736h#3x.png - 1242 x 2208
Default-736h-Landscape#3x.png - 2208 x 1242
And then, in your project setting > General > App Icons and Launch Images, make sure you are using asset catalog and choose the correct LaunchImage set.
Hope this helps.
Note that this probably only bothers those who are not using Storyboard but pure code to manage UI.
Additional Note: I encountered cache problem with Xcode 6 and simulator. When you update image and it doesn't take effect, try goto Simulator > Reset Content and Settings OR in your Xcode press cmd + alt + shift + K
In my iPad app which is restricted to UIInterfaceOrientationLandscapeRight , i added splash image by named default-Landscape.png & default-Landscape#2x.png images but it is rendering in simulator but not in my iPad.
All file names are case-sensitive.
rename them to : Default-Landscape.png & Default-Landscape#2x.png
with capital "D"
in simulator it isnt case-sensitive but in device it is
hope it helps. happy coding :)
I assume you mean the Default image.
Go to the Target - Summery view and check the the image is set for "Launch Images" and that there is no error or warning (usually due to size issue, you will see a small yellow mark over the picture)
deleted the app from both device and simulator
Clean your product
and reinstall on device via xcode.
Assuming you still have a problem, try to open the original image in Photoshop and re-export it as PNG 24
Refer Automatic orientation support for iPhone and iPad apps By Apple
iPad-only applications:
Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748 pixels (for landscape) or 768 x 1004 pixels (for portrait).
Default launch image files:
Default-PortraitUpsideDown.png - upside-down portrait version.
Default-LandscapeLeft.png - left-oriented landscape version.
Default-LandscapeRight.png - right-oriented landscape version.
Default-Portrait.png - generic portrait version.
Default-Landscape.png - generic landscape version.
Default.png - default portrait launch. Its usage is strongly discouraged, use more specific launch images instead.For iPad launch images, do not include the status bar region.
Create launch images of these sizes:
For portrait:
768 x 1004 pixels
1536 x 2008 pixels (high resolution)
For landscape:
1024 x 748 pixels
2048 x 1496 pixels (high resolution)
This happened to me with an Ionic 3 app. Eventually I discovered the image it was loading is Default#2x~universal~anyany.png
As we know iPad 3 have 2048×1536 resolution.
for iPhone 4 with retina display we put big image with name #2X and one normal image in our bundle.
so for iPad 3 application development we also need to put two images one is normal size and other with big size with #2X name..?
Any one know please reply.
With the iPad 3, you also simply need to name your retina images foo#2x.png. It needs to be exactly two times the resolution of the corresponding foo.png. So, say foo.png is 10x10, then your foo#2x.png needs to be 20x20.
You can also make version specifically for iPhone/iPod or iPad and iOS will automatically chose the correct version. For this, you can use the ~iphone and ~ipad modifiers:
foo.png for all devices with non-retina display
foo~iphone.png specifically for iPhone/iPod non-retina
foo~ipad.png specifically for iPad non-retina
foo#2x.png for all devices with retina display
foo#2x~iphone.png specifically for iPhone/iPad retina
foo#2x~ipad.png specifically for iPad retina
You can mix them in any combination, as long as there's always a version for all your supported devices (if you're doing an iPad-only app there's no need to provide images for iPhone, of course). So it's OK to provide for example foo~iphone.png, foo~ipad.png and then foo#2x.png.
I think it would be "image~ipad" & "image#2x~ipad" for iPad with Retina Display if you are writing a Universal app (since "image" & "image#2x" are for iPhone/iPod images).
Otherwise I guess "image" & "image#2x" is OK.
Refer to How to support both iPad and iPhone retina graphics in universal apps .
The images on a few UIButtons are getting scaled down way smaller on the iPhone 4 compared to how the show up on interface builder, the iPhone simulator or an iPhone 3G.
How can I ensure the button images stay the same size as they appear in IB?
Do you have two images, e.g. one for 320*480 and one for 640*960 screen resolution? E.G one file named myImage.png and one named myImage#2x.png?