3

I have created several xibs in my app without auto-layout and size classes.

When I run app on actual device it runs fine on iPhone6 but on iPhone6 Plus views are hugging one side of the screen.

Elements on all xibs are set to use auto-resizing as:

enter image description here

Adding information on how my xibs are built: Auto-resizing has been set to look like this so that all objects on view stay at the same position when app is used on an iPhone with iOS < 7.0 where background image (that covers the whole view) goes below the status bar; in IOS7 and above background image is visible below the status bar. This is done on all views in the app.

The issue is no matter how I try, including auto layout and size classes to the xib messes up everything. Is there any easy way to transform my views to use auto-layout such that the same views (Designed for iPhone5 resolution | iPhone 4-inch) can be changed so that they appear the same on iPhone6 Plus resolution? It would be great if auto-resizing stays the way it is set.

I have tried using several techniques and Suggested Constraints but images sometimes increase only in height (not maintaining aspect ratios), background images stick to one side of the screen and labels don't increase in size. Assets for the iPhone6 and 6 Plus resolutions have been added into the project as well.

ShayanK
  • 1,243
  • 2
  • 13
  • 27
  • 3
    I used to use the suggested constraints function but most of the time they do not give you what you want. Generally with auto layout you must decide if you want your view to be centered, or how far you want the view to be to its superview, or to an adjacent view. Many tutorials describe this, but **overall, there will be no true shortcut to go from `spring/structs` to auto layout. Learning it is worth it!** – Nate Lee Jan 18 '15 at 03:44
  • Also there are a lot of animations that I have to handle, since iPhone4 and iPhone5 both used same width: 320 on the xib builder at least, I could use point to point animations. Now these animations do not work correctly with the new iPhone6 and iPhone6 plus. Since you have worked on it Any idea how to make generic animations? (what I did were generic anyway for iPhone 3.5 inch and iPhone4 inch) @NateLee – ShayanK Jan 18 '15 at 18:20
  • I came from a strong springs and struts approach and found auto layout difficult to master. Basically constraints behave the same as springs and struts, they now just have properties assigned to them and they can have runtime logic applied. Another tip was you can have two constraints doing the same thing with one having a higher priority. Regarding iPhone 6 and 6 plus. Attempt to start with aligning 'Horizontal Center in Container', and set at least the width making this a low priority. Then pin to your edges as you need. Let me know if I can help some more – latenitecoder Jan 18 '15 at 20:15
  • Actually, animations with auto layout is rather interesting! Instead of animating frames itself (I never touch frames for the most part anymore) I have `IBOutlets` referencing `NSLayoutConstraints` (those blue/orange constraint lines). http://stackoverflow.com/questions/19899323/autolayout-constraints-and-animation is a great outline/hint of what you should do. – Nate Lee Jan 18 '15 at 20:29
  • TL;DR You reference `IBOutlet`s to `constraints` in your `storyboard`, you reset the `constraint's` constant value `(ex. viewHeightConstraint.constant = 100)` and finally, tell your view to `"layout if needed"` (ex. `self.view.layoutIfNeeded()`). – Nate Lee Jan 18 '15 at 20:32

2 Answers2

5

This is what I found when I've needed to deal with the same problem:

1) If you do not want to use Autolayout, you can use the scale mode. Apple added this smart little trick on iOS8 to make all previous apps for iPhone 5 run without any modification on iPhone 6. To use it, you must not set a launch image with the iPhone 6 resolution on your project properties (but you need to set a image for iPhone 5 so it can know you support iPhone 5 and you have to leave Launch Screen File empty). Doing this, iOS will use scale mode when running your app on iPhone 6/6+ and all your views will be correctly scaled to work beautifully with its screens. That's possible because the new screens keep the aspect ratio to the iPhone 5 screen, so iOS basically just need to multiply your pos/size by the correct screen size proportion. I'm not sure this will still work if you set iPhone 6 specific resolution images to some XIBs, though.

This solution basically means you're chosing to ignore iPhone 6 existence and keep programming for the old devices.

2) If you really want to give up the automatic scale mode and make an updated App for iPhone 6 (Apple wants you to do it), you could do any of the two:

  • Use autolayout. That's the standard Apple wants everybody to use, and although it's a bit hard to tame in the beginning, you'll get really attached to it. I've give up using Autolayout for now, though, as I found some problems when trying to run my app on iOS6 and 7, which I cannot afford to not support right now (you can read more about it here).

  • Use two XIBs, one for iPhone 4/4s/iPod Touch 4, and one for iPhone 5/5s/6/6+. Note that I'm suggesting you to keep a XIB for each device aspect ratio Apple has designed. As the aspect ratio will be the same for the devices which will use a given XIB, you can use autoresizing masks to scale up your view as you please. Everything will keep the correct aspect ratio.

I'm using the first suggestion (scale mode) for now, while my issues with autolayout running on iOS6 and 7 do not get solved.

Community
  • 1
  • 1
john1034
  • 128
  • 1
  • 8
  • This did the trick for me. I had a client's old app which he wanted some modifications. Without adding the LaunchFile, the Xibs scaled properly on iPhone6/6+ but after adding the LaunchFile, the layout got modified. Removing the LaunchFile did the trick! Thank you :) – Mahendra Liya Jan 11 '16 at 11:14
0

I think you are in the right way working with autoresize masks. Maybe some adjusts in it can resolve your problem.

The picture you attached is the autoresizing property of the object with a little preview of how this setting will behaviour.

Setting the autoresizing mask like you did, will fix you object's distance relative to it's superview, but as you are not setting the width flexible (the unselected arrows inside the box), the system will have to choose between positioning your object on the left or the right side of the container to resolve the conflict, and your object will probably be on the left side (default behaviour ... you can confirm this on the autoresize mask preview little window).

Try setting the width flexible and make sure that the superview's settings are configured to scale too (flexible width and flexible height).

I'm developing a project since iOS4, supporting iPhone and iPad using only one xib for each screen just setting the view scale behaviour using the autoresize mask properties, so I'm pretty sure that you can do it too.

Please, don't use 2 xibs if you have the same layout. It's a very bad practice most of the cases and you will stress later trying to update the layout, adding a button or wherever ...

FormigaNinja
  • 1,571
  • 1
  • 24
  • 36