Problems when trying to support 3.5 and 4 inch screen of iPhone

2
votes

I started the development of a new app on the iPhone 5 and now I also have to add support for 3.5 inch screens. As you know, there is more space for content on a 4 screen than on a 3.5 screen.

When I run the app on a 3.5 screen, the whole layout is messed up. Is it possible to use the layout normally on a 4 inch screen, but place the layout within a scroll view when run on a 3.5 screen?

My idea was to scroll the page rather than completely redesigning it. How can I achieve that?

(or maybe it is somehow possible to design a layout for the 3.5 screen and the 4 screen seperately)?

3
iphoneioscocoa-touchinterface-builderiphone-5
Have you set up your struts or autolayout correctly? – Jonathan Grynspan
Then you should do that first. – Jonathan Grynspan
Well I am using autolayout and constraints, but that doesnt change the fact, that I am able to define both layouts for both screen sizes. – nimrod
I'll suggest you go with auto-layout. Ideally that's the way to get it done correctly. Try avoiding scroll view for this purpose. raywenderlich.com/20881/beginning-auto-layout-part-1-of-2 is a very good tutorial on auto-layout. But you can find more on google. Initially it'll be difficult to understand it but as you go through it, you'll find it very handy. – Aditya Mathur

3 Answers

1
votes

It is totally possible to design completely different layouts for 3.5 and 4 inch screens. You would just need to add this :

#define IS_IPHONE_5 (((double)[[UIScreen mainScreen] bounds].size.height) == ((double)568))

And build separate cases, using if (IS_IPHONE_5) {do this...} else {do that...}

BUT

This should be done only as a last resort, because it would require a lot of manual/extra coding. You should ideally create the view in such a way that it automatically adjusts itself for both the screens. And you can do that in 2 ways :

1)With Auto-Layout i.e applying constraints on and between each view element. (Personally I don't like it a lot)

2)Without AutoLayout, by applying auto-resizing masks on each of the view elements. (and checking by toggling the form factor button in storyboard)

0
votes

For that u need to add image of size 640* 1136 with name [email protected] and addded to the image folder and then add the image in the Target-General- AppIcons

It very simple and it worked for me

0
votes

I wouldn't suggest ScrollView since, if you go by that Method then there will be a lot of reframing of the UI ELEments

If You contain few elements then I would suggest go by AutoLayout or AutoResizing Mask, set your constraints in such a manner that they expand and contract depending on your views height,

or

If your View contains a lot of UI ELements that the constraints conflict then and only then go For Two XIb files in your App corresponding to the same class (set your ClassName to the Two Xins in identity Inspector), If you are using Story board then just Duplcate your Current View and Adjust it for iPhone 5 and set the StoryBoard Identifier different for each, and Then based on the Device height load the Views Respectively such as

if([[UIScreen mainSceen]bounds].size.height>480){

//Load iPhone 5 View }else{

//Load iPhone 4 view }