Questions on retina, screen size, pixels and scaling.

[thedon1]

So i'm making an app, i've pretty much coded all the functionality but now comes the graphics. It's a simple 1 screen app.



1) I've programmed it using the 4 inch layout but I don;t need the extra space for anything in particular. Do i need to do anything to get it to work on a 3.5 inch device or will it just cut the bottom off (which i'm OK with)?

2) I wan to make some art for a couple of buttons. I've added the buttons in my xib file but how do I know how many pixels they are? I've read the width and height in the size inspector are points, not pixels.

3) Do I need to include non retina versions of the icons or can iOS scale them down? I've read about using @2x in the filename to indicate retina graphics but only if i'm also including no retina.


Any help would be great.

Thanks

[ArtOfWarfare]

Have you tried using the simulator? The hardware menu allows you to swap between 3.5" non retina, 3.5" retina, and 4" retina.

I believe iOS will automatically scale your graphics down or up if you don't provide the correct resolution. I'm not quite sure how it handles going between 3.5" and 4" screens.

[resetme]

i'm at the same step as you.

i found that:

-you need to provide non-retina image files. (all images, app icon, background, resources)

-Use AutoLayout (that will move all your objects for 3.5, 4 and iphone 5)

-If you don't use auto layout it's better to go for size: inferred and then autosizing to arrange your buttons for 3.5, 4 and 5.

- If you have a fullscreen background, then you should add a special version for the iphone 5 and change it by code. (there is no image@568 format, only for splash screen)

Test it using simulator, i had my app with auto layout off, so some of my bottom buttons were out of the screen.

[xStep]

Originally Posted by resetme

-Use AutoLayout (that will move all your objects for 3.5, 4 and iphone 5)

It should be noted that AutoLayout is limited to iOS 6.0 and above.

[resetme]

Originally Posted by xStep

It should be noted that AutoLayout is limited to iOS 6.0 and above.

yes, that is very important!! i'm not using AutoLayout because the iOS 6.0 limitation

[thedon1]

Thanks for the reply guys.

My apps layout is actually very simple and I don't actually use the extra space the iPhone 5 gives. The simulator automatically just cuts a bit off the bottom and my buttons are pretty close to the bottom edge but it's no big deal.

Would I be OK just submitting it like that? It sucks that I need retina and non-retina art, is there no automatic scaling?

What do you mean use size: inferred? I've not seen that anywhere or heard of it.

[ArtOfWarfare]

Originally Posted by resetme

yes, that is very important!! i'm not using AutoLayout because the iOS 6.0 limitation

iOS 6 was at 72% a week ago. I suspect it's much higher now that Christmas has passed. Your app won't hit the store today. Going out of the way to support pre-6.0 seems silly to me.

[resetme]

There is an autoscaling (you start with the retina version) but when you work with bitmaps the scaling get blurry and get bad results (borders, shadows, etc).

There is an option in attributes for size inferred (simulated metrics), then what i do is select a button (show the size inspector) and use the Autosizing to manage position for multiple screen sizes.


Actually idk about the autoscaling and the bad results, i just saw it on google (create a retina image, then in size inspector u resize it to non-retina size).

You can try it and gave us a feedback

Apple wont block it for that issue. my first app have only retina images and everything is scaled by code. I didn't care about it at all... but that was my app with my money lol (http://www.youtube.com/watch?v=851cRnruZds)

[xStep]

Originally Posted by ArtOfWarfare

iOS 6 was at 72% a week ago. I suspect it's much higher now that Christmas has passed. Your app won't hit the store today. Going out of the way to support pre-6.0 seems silly to me.

It's not like turning off Autolayout is going out of your way to support per-iOS 6. So far my experience with Autolayout in IB suggests it still needs some tuning.

Given the adoption of iOS 6 I too think it a bit silly to support a previous version when creating a new app. I made that decision for my app and iOS 5. I had developed the app in iOS 4 and could have released it for that but iOS 5 was in the same state as iOS 6 is now. A bonus is that I can add iOS 5 specific features and know I'm not leaving a customer behind. I'm experimenting with one of those features right now.

[juiceman]

Hello. I have a question along similar lines. I'm working with a developer to produce my app. The app has been designed for the iPhone 3 layout and my developer has said that on an iPhone 4 or 5 it'll be displayed with 'a border at the top and bottom'. This doesn't seem like an ideal solution to me. What are my other options?

[dejo]

Originally Posted by juiceman

Hello. I have a question along similar lines. I'm working with a developer to produce my app. The app has been designed for the iPhone 3 layout and my developer has said that on an iPhone 4 or 5 it'll be displayed with 'a border at the top and bottom'. This doesn't seem like an ideal solution to me. What are my other options?

Ask the developer to explain why there will be borders top and bottom for the iPhone 4. I'm curious how they will answer that one.

[xStep]

Originally Posted by dejo

Ask the developer to explain why there will be borders top and bottom for the iPhone 4. I'm curious how they will answer that one.

juiceman, what dejo is hinting at is that all iPhones up to and including the 4S have the same aspect ratio. There should be no borders on any phone model earlier than the iPhone 5.

If there will be borders on the iPhone 5, then the design hasn't taken into account the new aspect ratio. It's not esthetically optimal to have the borders but it doesn't hurt. If the project started before the introduction of the iPhone 5, then a redesign may have a cost associated with it.

[thedon1]

Originally Posted by resetme

There is an autoscaling (you start with the retina version) but when you work with bitmaps the scaling get blurry and get bad results (borders, shadows, etc).

There is an option in attributes for size inferred (simulated metrics), then what i do is select a button (show the size inspector) and use the Autosizing to manage position for multiple screen sizes.


Actually idk about the autoscaling and the bad results, i just saw it on google (create a retina image, then in size inspector u resize it to non-retina size).

You can try it and gave us a feedback

Apple wont block it for that issue. my first app have only retina images and everything is scaled by code. I didn't care about it at all... but that was my app with my money lol (http://www.youtube.com/watch?v=851cRnruZds)

I'm not using autolayout. Instead, I used the vertical autosizing in the view inspector and when using the simulator, everything seems to work fine when scaled down to the 3.5 inch display, it just makes everything a bit thinner vertically. I don't have a 4 or 4s at hand to try this but ill just have to hope that it works the same in practice.

I've got no non-retina art. My app is more of a calculator type app so i don't have pictures or anything that would get messed up when scaled down. It would just be text etc that isn't as sharp I suppose. I hope it doesn't cause any problems when scaled!