vzm
vzm

Reputation: 2450

Issue with autosizing between iPhone 4 and iPhone 5

I have my view set up this way with the autosizing parameters: enter image description here

Everything else (Album artwork, title labels, etc...) are setup this way:

enter image description here

And this is the way that autosizing usually works best for me, but for now this is the end result that I am getting:

on the iPhone 5 it looks great, like this:

enter image description here

But on the iPhone 4, the Artist name and sometimes track name run into the album artwork:

enter image description here

How can this issue be fixed? Please be as detailed as possible

Upvotes: 0

Views: 324

Answers (1)

Teddy
Teddy

Reputation: 184

To clarify, the disparity you are seeing is caused by the different screen sizes for 4-inch and 3.5-inch screens. If all your subviews are floating with no "struts" or "springs," the autoresizing mechanism will not prevent overlaps or maintain alignment with sibling views.

If you only need to support iOS 6 and higher, you should probably learn and use Auto Layout.

If you want to stick with autoresizing, I recommend using a transparent container view. Encapsulate the labels and controls on the right half of the screen in a UIView approximately the same size as the album image view. Both the album image and the container UIView can have with a flexible width (enable the horizontal springs <–> only, no struts |-|).

On a 3.5-inch screen, the album image will be slightly narrower (make sure your UIImageView's contentMode is UIViewContentModeScaleAspectFit so the square aspect ratio is maintained). The container view will also be narrower, but your labels and pause control will remain vertically aligned as long as they are centered and floating (no springs or struts) as subviews of the container view.

Your "flame" control will probably be fine floating within the container view, too. Just keep in mind it will be closer to the pause control. You can experiment with different combinations of horizontal struts (|–|) for the "flame" and pause controls if they are too close together for usability in the 3.5-inch screen.

Upvotes: 2

Related Questions