UiScrollview with nested image looks weird

Question

I have a UIScrollView inside a UIViewController (subclassed by ImageViewController). The ViewController itself is part of a NavigationController's stack. Now, apart from having a navigation bar, I want the ScrollView to take all of the available room on the screen. The UIImageView inside the scrollview should then fill the available room of the scroll view. You can see the current state at the bottom of this posting.

class ImageViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    var imageView: UIImageView?
    var image: UIImage?

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self

        if let image = image {
            imageView = UIImageView(image: image)
            if let imageView = imageView {
                imageView.frame = CGRect(origin: CGPoint(x: 0, y: 0), size: image.size)
                scrollView.addSubview(imageView)
                scrollView.contentSize = image.size

                let scaleHeight = scrollView.frame.size.height / scrollView.contentSize.height
                let scaleWidth = scrollView.frame.size.width / scrollView.contentSize.width
                let minimumScale:CGFloat = min(scaleHeight, scaleWidth)
                let maximumScale:CGFloat = max(scaleHeight, scaleWidth)

                scrollView.minimumZoomScale = minimumScale
                scrollView.maximumZoomScale = maximumScale
                scrollView.zoomScale = maximumScale
            }
        }
    }

    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return imageView
    }
}

The code leaves me with unnecessary borders (left, right, top). How do I get rid of them?

enter image description here

EDIT: With @Bxtr's suggestion and another stackoverflow thread I was able to remove the borders left and right to the scroll view. After some more digging I found out that by deactivating Adjust Scroll View Insets, the image inside the scroll view can be correctly vertically positioned. Still, I do not get the reason for the vertical misplacement in the first place...

score 5 · Answer 1 · answered Jul 08 '15 at 13:18

5

Have you checked the margin/padding values, because it kinda looks so (same size on left and right border). If it is not the case, could you please also post your xml file of the activity so we can have every part of the puzzle to help you ?

answered Jul 08 '15 at 13:18

Bxtr

316
1
13

You were right about the left and right margin! Concerning the vertical issue, I just updated the post (the problem is solved, yet I do not understand why). If you have further insights I would be glad to here about them. – Bastian Jul 13 '15 at 10:46
i will do some further researches about it when i'll be back from hollydays, but i'm glad that i Helped you ! – Bxtr Jul 13 '15 at 15:14

score 3 · Answer 2 · answered Jul 14 '15 at 06:17

3

scrollView.contentSize = image.size;

you have to tweek this line. You are explicitly setting scroll view content size to the image size. You have to set content size to fit the Width of Screen.

answered Jul 14 '15 at 06:17

ataurrehman

129
1
10

score 2 · Answer 3 · answered Jul 14 '15 at 04:50

2

You can use a UIView in UIScrollView, and that UIView contains UIImage. You need to set constraints properly.

answered Jul 14 '15 at 04:50

Parth Adroja

13,198
5
37
71

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

After some more digging I found out that by deactivating Adjust Scroll View Insets, the image inside the scroll view can be correctly vertically positioned. Still, I do not get the reason for the vertical misplacement in the first place...

The reason is that the view controller's automaticallyAdjustsScrollViewInsets property is by default YES, the following is from apple documentation:

automaticallyAdjustsScrollViewInsets

A Boolean value that indicates whether the view controller should automatically adjust its scroll view insets.

Default value is YES, which allows the view controller to adjust its scroll view insets in response to the screen areas consumed by the status bar, navigation bar, and toolbar or tab bar. Set to NO if you want to manage scroll view inset adjustments yourself, such as when there is more than one scroll view in the view hierarchy.

Besides setting automaticallyAdjustsScrollViewInsets = No, you can pin the scrollView to the topLayoutGuide (instead of to the top of the viewController's view) when using autoLayout.

Actually, the scrollView's Top Space was already pinned to the Top Layout Guide. With this setting and automaticallyAdjustsScrollViewInsets = YES the vertical misplacement happens. So once again: I am quite puzzled about why I have to set the property to NO in order to get the desired layout. — Bastian, Jul 14 '15 at 12:18

UiScrollview with nested image looks weird

4 Answers4