ios background images sizes and naming in xamarin - ios

I am using xamarin.forms to develop an app. The app has screens with background images. So to have proper background's i referred to the ios documentation here with taking dimensions of the launch/splash screen into consideration as they are like background images, but this doesn't work. This is what i follow:
iPhone
320 x 480 Default.png
640 x 960 Default#2x.png
640 x 1136 Default-568h#2x.png
750 x 1334 Default-667h#2x.png
1242 x 2208 Default-736h#3x.png
2208 x 1242 Default-Landscape#3x.png
iPad
768 x 1024 Default-Portrait.png
1536 x 2048 Default-Portrait#2x.png
1024 x 768 Default-Landscape.png
2048 x 1536 Default-Landscape#2x.png
the images in iphone 6 (iOS 9.0) are repeating.
EDIT:
I needed the naming convention and sizes for the image to be used as background images in xamarin.forms content page.
Any help on this sizes and naming?

I have also been struggling with this, it seems like the iPhone 6 (Plus) screens aren't implemented in Xamarin.Forms.
LaunchScreen
This is probably because Apple themselves are recommending the use of Storyboards and/or XIB files for your LaunchScreen as of iPhone 6, or better yet iOS 8.
I quote:
In iOS 8 and later, you can create a XIB or storyboard file instead of
a static launch image. When you create a launch file in Interface
Builder, you use size classes to define different layouts for
different display environments and you use Auto Layout to make minor
adjustments. Using size classes and Auto Layout means that you can
create a single launch file that looks good on all devices and display
environments.
This, in fact, is supported by Xamarin.Forms.
Just create a StoryBoard in your Resources file, configure your splash screen and select it as LaunchScreen in your info.plist file.
Advantage is that it works for all devices.
Background images
As for background images, according to the Xamarin iOS documentation this should work.
If it doesn't for Xamarin.Forms you should probably report a bug.
Meanwhile you could use a custom renderer like underneath, taken from the Xamarin Forums or check another suggestion from that thread:
[assembly: ExportRenderer(typeof(InfoPage), typeof(InfoPage_iOS))]
namespace Oxaco_BBC.iOS
{
public class InfoPage_iOS : PageRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(false);
UIGraphics.BeginImageContext(this.View.Frame.Size);
UIImage i = UIImage.FromFile("Background.png");
i = i.Scale(this.View.Frame.Size);
this.View.BackgroundColor = UIColor.FromPatternImage(i);
}
}
}

Related

Image sizes required to convert storyboard to Autolyaouts and Size classes?

My existing app has two Storyboards (for iPhone and iPad), and it supports iOS7+. I am now planning to convert it to one storyboard using Autolayouts and Size Classes, but I have few confusions:
What will the size of the images? For instance, right now without Size Classes and Autolayouts, I ask designer to slice images for iPhone5, and iPad and make them #2x and #3x respectively. But for Autolayouts, what size they will have to slice i.e what screen size will they choose and then will give me images accordingly for #2x and #3x, i.e what universal screen size? For instance, I ask them to give me a background image of screen size. What size will they give me? From what I understand, it should not be iPhone specific or iPad specific as the app will be universal.
I am aware of the fact that Size Classes support iOS8 onwards, so what about iOS7? I will have to do things programatically for iOS7? Will I have to use device-specific images or can I use universal size images for iOS7 as well?
size classes doesnt mean you cant be specific with things anymore, you should still set the background to be a suitable phone sized image for when the size class is the shape of a phone (compact x regular), and set a suitable iPad sized image when its the size of an iPad (regular x regular).
it seems like you can still use size classes in iOS 7 with some limitations
i think you are viewing the size classes as having one generic storyboard that will solve your problems of having a specific iPad and iPhone storyboard like before, which is partly true, all it really does is save you having two separate storyboards, so if your ipad and iphone screens differ, you would need to have the differences layout out in the different size classes (in your case the different sized backgrounds are a difference). it might just save you having to specify your autolayouts twice in 2 different storyboards (and even then maybe not)
For images, you still need different images from design team as:
imageName#2x.png: 640 x 960 (iPhone 4. iPhone 4s)
imageName-568h#2x.png: 640 x 1136 (iPhone 5, iPhone 5s)
imageName-667h#2x.png: 750 x 1334 (iPhone 6, Portrait)
imageName-736h#3x.png: 1242 x 2208 (iPhone 6 Plus, Portrait)
imageName~ipad.png: 750 x 1334 (iPad)
imageName~ipad#2x.png: 1242 x 2208 (iPad Retina)
For icons, we will prefer to make a font file from svg of the icons using icomoon.io website.
During development, we need to validate image name on device level. Just look into this utility:
https://github.com/victorjiang/UIImage-VJDeviceSpecificMedia/blob/master/UIImage%2BVJDeviceSpecialMedia.m

Separate launch images for iPad?

I'm working on an update to bring my iPhone app to iPad. (to make it a universal app)
Currently I have the following launch images:
Default.png - 320 x 480 px
Default#2x.png - 640 x 960 px
Default-568h#2x.png - 640 x 1136 px
Default-667h#2x.png - 750 x 1334 px
Default-736h#3x.png - 1242 x 2208 px
Do I need to add separate launch images for the iPad?
The app should support all devices with iOS 8 and is currently portrait mode only.
Yes, you need add separate launch images for the iPad.
As you support only portrait mode you need add only two images:
1. Default~ipad.png 1024x768 px
2. Default#2x~ipad.png 2048x1536 px
Also you can use alternative way for launch images: LaunchScreen.xib (Xcode -> File -> New -> File... -> User Interface -> LaunchScreen).
It's suitable way when your launch screen can be built in interface builder. It will allow avoid storing multiple launch images in the project, so it makes your app thinner.

How to support various iphone screen sizes as of 2014?

I'm almost done building my first iPhone app and am trying to add a background image, and am finding it a little confusing, because nowadays there's like 3 or 4 different size screens among the different iPhone versions, with different resolutions to boot.
So while I'm aware of the whole image#2x.png thing, I still don't know what I really need. If I want my app to run on iPhone 4/4s, 5s/5c, 6/6+, how many different versions of a background image do I need, and at what sizes and resolutions?
I have googled around and have not found any cohesive answers up to date for 2014.
Also, if the iPhone 6 is 1334x750 #3x, does that mean I'm supposed to include a 4002x2250 background? And then for the 1920x1080 iPhone 6+ #3x, a 5760 x 3240 image? That's MASSIVE! I feel like I must be understanding this incorrectly.
If you want to support native resolution of iPhone 6/Plus, you need to add launch images (prior to iOS 8) or launch screen xib (iOS 8).
iPhone 4/4S: 640 x 960
iPhone 5/5S: 640 x 1136
iPhone 6: 750 x 1334
iPhont 6 Plus: 1242 x 2208
That means you need to prepare 4 launch images with above resolution if you want to support these devices. You can use iOS simulator to capture screenshots with different resolutions. Your app will run in compatibility mode on new resolution devices if it can't find the launch image of the specific resolution. compatibility mode means your view will be scaled to fit the new screen size when still have the same logical size.
EDIT:
I think op misunderstands what do #2x and #3x mean. The resolution of iPhone 6 is 750(pixels) x 1334(pixels), 326 pixels per inch. This is the REAL resolution. And 375(points) x 667(points) is the logical size if the native resolution is supported. iPhone 6 Plus's resolution is 1242(pixels) x 2208(pixels), 401 pixels per inch and the logical size is 414(points) x 736(points).
This is how images with different resolutions work on iOS device:
Let's say you want to run your app on iPhone 4s, iPhone 5/5S, iPhone 6/plus. First thing you should do is to provide 4 launch images to support native resolutions of these devices. When iOS launch your app, it will check if the app provides the right launch image to support the native resolution of current device. If iOS finds it, then use that in launch time and the logical size of screen is right, your app runs as normal. Otherwise, your app will run in compatibility mode in which all of the views will be scaled.
Suppose there is an image named foo.png in your app of which the logical size is 100(points) x 100(points). You want this image looks same in all the above devices. You should provide 2 versions of this image. One is 200(pixels) x 200 (pixels) and should be named foo.png#2x and the other is 300(pixels) x 300(pixels) named foo.png#3x. If you load this image with [UIImage imageNamed:#"foo"], on devices except iPhone 6 plus, the app will load the image named foo.png#2x. Otherwise the app will load foo.png#3x and sample it down to 300 * 84%(pixels) x 300 * 84%(pixels).
And if you load an image from an url and need to render it on the runtime. Let's say the size you get is {width:100, height:100}, the scale is 1.0. This means the REAL size of this image is 100 * 1.0(pixels) x 100 * 1.0(pixels. If you don't want it to be scaled, you need to calculate the logical size yourself. You do it like this:
UIImage *image = ... // you get it from an url
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat width = image.size.width / scale;
CGFloat height = image.size.height / scale;
CGRect frame = CGRectMake(50.0f, 50.0f, width, height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeCenter;
imageView.image = image;
[self.view addSubview:imageView];
I think the easiest way to do this is to use an image that fits on iPhone 6+ and then simply set UIImageView's contentMode to UIViewContentModeCenter. I think it's that one at least, the result should be that on iPhone 6+ you have a centered image but on the other screens you simply get a part of the image.
The downsampling of the iPhone 6+ means that an #3x asset covering the entire screen should be 2208x1242 (That is, this resolution is already 3x. The "real" resolution is 736x414). This is the largest resolution needed and you can then use the same image for #2x and #1x assets using the method I described.
You will need three versions of the background image(1x,2x,3x).A good practice to have images of the correct size is to make an image of a size that is 3 times the size of your view and then make the 2x and 1x versions by scaling down.
Apple has come up with a new concept called 'Size Classes' to support the different device sizes.To use size classes you will need the latest version of Xcode(Xcode 6). In the interface builder you can set different set of constraints for different size classes. This way it becomes easier to support all screen sizes. To know more about Size classes watch the WWDC 2014 video "Building Adaptive Apps with UIKit".
Which game engine are you using ?
If you are using cocos2d or cocos2dx then you can use background image of 960 * 640 .Below code will scale the images according to the screen size.
CCSize frameSize = pEGLView->getFrameSize();
CCSize designSize = CCSizeMake(480, 320);
vector<string> searchPaths;
CCSize resourceSize;
Utility :: isPad = true;
searchPaths.push_back("hd");
resourceSize = CCSizeMake(960, 640);
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width , designSize.height, kResolutionExactFit);
pDirector->setContentScaleFactor(resourceSize.width/designSize.width);
These are the different resolutions you will need for your background image.
iPhone 4/4S - 640 * 960
iPhone 5/5S - 640 * 1136
iPhone 6 - 750 x 1334 for portrait 1334 x 750 for landscape
iPhone 6 Plus - 1242 x 2208 for portrait 2208 x 1242 for landscape

How I can get correct splash image programmatically?

Is it possible get correct splash image (for example landscape for iPad with iOS 6) programmatically? To don't perform all check for iPad, screen size and iOS version
You can create custom splash image by using LaunchImage.storyboard. But keep in mind, that you can't use custom fonts in splash view controller or perform any code
Just have the splash screen in the following names and dimensions:
iPhone Portrait/Landscape (iPhone doesn't support Landscape splash screen)
"Default.png" 320 x 480
"Default#2x.png" 640 x 960
"Default-568h#2x.png" 640 x 1136
iPad Portrait
"Default-Portrait.png" 768 x 1024
"Default-Portrait#2x.png" 1536 x 2048
iPad Landscape
"Default-Landscape.png" 1024 x 748
"Default-Landscape#2x.png" 2048 x 1536
FYI: Images having #2x in them are automatically picked up for Retina display devices.
To quote ref: Drawing and Printing Guide for iOS:
Updating Your Image Resource Files
Apps running in iOS 4 should now include two separate files for each image resource. One file provides a standard-resolution version of a given image, and the second provides a high-resolution version of the same image.
The naming conventions for each pair of image files is as follows:
Standard: [ImageName][device_modifier].[filename_extension]
High resolution: [ImageName]#2x[device_modifier].[filename_extension]
The [ImageName] and [filename_extension] portions of each name specify
the usual name and extension for the file.
The [device_modifier] portion is optional and contains either the string ~ipad or ~iphone.
You include one of these modifiers when you want to specify different versions of an image for iPad and iPhone.
The inclusion of the #2x modifier for the high-resolution image is new and lets the system know that the image is the high-resolution variant of the standard image.
So, when it comes to proper dimension for images you need not do much programmatically
Other references:
- iOS Human Interface Guidelines

using 1136 x 640 images in storyboard

EDIT: Dont misunderstand. I get that I can put in myImage.png whose size is 568 x 320 and myImage#2x.png whose size is 1136 X 640 and, at run time, iOS will show the lager image if the device has a retina screen. That is not what this is about. Im talking strictly about placing a 1136 x 640 image in the storyboard.
Some details:
Using xcode 5
iPhone only app (iPhone 4 and above ideally)
Targeting iOS 7 (should keep out any iPhone 3gs ...right?)
Single view app
Using storyboards
My understanding is that I can provide only the higher resolution 1136 x 640 images my app needs for the iPhone 5 then use autolayout to constrain things in such a way that my UI works properly even if the device is an iPhone 4 and has less screen real estate.
My issue is that if I drag a 1136 x 640 image onto the storyboard the image is 2X the size of the view im dropping it into. I get that I can resize the UIImageView and set the mode to aspect fit and the image will display correctly in the view.
However, that would get quite annoying. Is there a way to just set the storyboard to use the retina images directly?
Now I can create images that are half the size (568 x 320) and those will drag and drop into the views perfectly. But I cant imagine why anyone would want to do that. This doesnt make sense to me. I would expect the SDK to let me layout the app in the highest resolution possible.
I tried using images named myImage.png and using myImage#2x.png but neither changed anything.
Don't think of the dimensions in Xcode as pixels, but points. So while you set the image dimensions to be 568 x 320, the #2x images are going to use two pixels per point.
What are you testing on? You might not be seeing a difference because you are only testing on retina devices. If you are only planning on supporting iOS 7 (iPhone 4 and up), you won't be using any non-retina devices.

Resources