StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strike>Fixed it by applying the transformations to the UIScrollView (containing the UIImageView), instead of the UIImageView itself.</strike> </p> <p>Just applying the transformations to the UIScrollView didn't work well enough. It would put the rotated image inside a smaller view and zooming did not use the available screen space. </p> <p>I finally managed to fix this though, so here's how. </p> <p><strong>Requirements</strong></p> <ul> <li>A horizontally scrolling list of full-screen pictures</li> <li>Rotating the device must <em>not</em> rotate the app, but <em>must</em> rotate the shown picture</li> <li>Must be able to zoom pictures, both when holding the device in portrait and landscape orientation</li> </ul> <p><strong>How I implemented it</strong></p> <p>One main UIScrollView with height equal to screen height, and width equal to screen width * picture count. Paging enabled.<br> This main UIScrollView contains a subview for each picture. Each subview looks like this:<br> UIScrollView > UIView > UIImageView</p> <p>The UIScrollView has the size of the screen, and its origin.x property is 0 for the first subview, and increased with the screen width for each subsequent UIScrollView. The result is a main UIScrollView, with all the sub UIScrollViews next to eachother like this (without the spacing):</p> <pre><code>┌────────────────────┐ │┌───┐┌───┐┌───┐┌───┐│ ││ 1 ││ 2 ││ 3 ││ 4 ││ ││ ││ ││ ││ ││ │└───┘└───┘└───┘└───┘│ └────────────────────┘ </code></pre> <p>To fix the rotation problem, the UIImageView is no longer a direct subview from the UIScrollView, but is now embedded inside a container UIView.<br> The <code>viewForZoomingInScrollView:</code> method of the main UIScrollView delegate now returns the container UIView for the visible picture, so this container UIView will be used for zooming. Rotation of the image views is still done with an animated <code>setTransform:</code> using both <code>CGAffineTransformScale</code> and <code>CGAffineTransformMakeRotation</code>.</p> <p>My guess that the implementation without the container UIView did not work, was because the UIImageView can no longer be transformed by the main UIScrollView, when there's already a transform applied to it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload