UIScrollView with an ImageView not scrolling vertically

Question

I have a UIImageView and it has an image larger than the screen size. I have this UIImageView as a sub view of UIScrollView. Now, I am unable to scroll down. to view the whole image. But the zooming functionalities are working fine.

@IBOutlet weak var scrollView: UIScrollView!

var imageView = UIImageView();

override func viewDidLoad() {
    super.viewDidLoad()
}

func centerScrollViewContents(){
    let boundsSize = scrollView.bounds.size
    var contentsFrame = imageView.frame

    if contentsFrame.size.width < boundsSize.width {
       contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2
    }
    else { 
       contentsFrame.origin.x = 0
    }

    if contentsFrame.size.height < boundsSize.height {            
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2
    }
    else {
        contentsFrame.origin.y = 0
    }

    imageView.frame = contentsFrame
   // scrollView.frame = contentsFrame        
}

func scrollViewDidZoom(scrollView: UIScrollView) {
    centerScrollViewContents()
}

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

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()

    // Dispose of any resources that can be recreated.
}

override func viewDidAppear(animated: Bool) {

    scrollView.delegate = self
    imageView.frame = CGRectMake(0, 0, scrollView.frame.size.width, scrollView.frame.size.height)

   // imageView.contentMode = UIViewContentMode.ScaleAspectFill
   // imageView.clipsToBounds = true
    imageView.image = UIImage(named: imgstr)

    var imagee = UIImage(named: imgstr)
    let size = imagee?.size
   // imageView.frame = CGRectMake(0, 0, size.width!, size.height!)
    imageView.contentMode = .Top
    scrollView.addSubview(imageView)

    scrollView.contentSize = size!
    let scrollViewFrame = scrollView.frame
    let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
    let scaleHeight = scrollViewFrame.size.height / scrollView.contentSize.height
    let minScale = min(scaleHeight, scaleWidth)

    scrollView.minimumZoomScale = 1
    scrollView.maximumZoomScale = 5
    scrollView.zoomScale = minScale

    centerScrollViewContents()   
}

enter image description here

All answers are wrong, you are using AutoLayout, so you can use frame property to change, you should create an IBOutlet for your ImageView top constraint and change it, plus see this google.co.in/… — iphonic
– iphonic, Commented May 3, 2015 at 11:49
You can use ImageScrollView open source, a zoomable and scrollable image view. github.com/huynguyencong/ImageScrollView — huynguyen
– huynguyen, Commented Mar 6, 2016 at 16:27

Vkt0r · Accepted Answer · 2015-04-30 17:21:02Z

4

+25

You have to solve two main problems to your UIScrollView work

One problem reside inside where you initialize all the data for the UIScrollView, I mean the function viewDidAppear.
You must set the constraints for you UIScrollView like Top, Bottom, Left and Right to 0 respect the your SuperView.

If you put the code inside your viewDidAppear inside of your function viewDidLoad and delete your function viewDidAppear, it works fine as you want. Like in the following way:

override func viewDidLoad() {
    super.viewDidLoad()


    scrollView.delegate = self
    imageView.frame = CGRectMake(0, 0, scrollView.frame.size.width, scrollView.frame.size.height)

    // imageView.contentMode = UIViewContentMode.ScaleAspectFill
    // imageView.clipsToBounds = true
    imageView.image = UIImage(named: "imgstr.jpg")

    var imagee = UIImage(named: "imgstr.jpg")
    let size = imagee?.size
    // imageView.frame = CGRectMake(0, 0, size.width!, size.height!)
    imageView.contentMode = .Top
    scrollView.addSubview(imageView)

    scrollView.contentSize = size!
    let scrollViewFrame = scrollView.frame
    let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
    let scaleHeight = scrollViewFrame.size.height / scrollView.contentSize.height
    let minScale = min(scaleHeight, scaleWidth)

    scrollView.minimumZoomScale = 1
    scrollView.maximumZoomScale = 5
    scrollView.zoomScale = minScale

    centerScrollViewContents()
}

You must too set the constraints for the UIScrollView in your Storyboard

I though that the problem reside in the following difference:

viewDidAppear is called when the view is actually visible, and can be called multiple times during the lifecycle of a View Controller (for instance, when a Modal View Controller is dismissed and the view becomes visible again). This is where you want to perform any layout actions or do any drawing in the UI - for example, presenting a modal view controller. However, anything you do here should be repeatable. It's best not to retain things here, or else you'll get memory leaks if you don't release them when the view disappears.
viewDidLoad is called exactly once, when the view controller is first loaded into memory. This is where you want to instantiate any instance variables and build any views that live for the entire lifecycle of this view controller. However, the view is usually not yet visible at this point.

If you any problem I have a project ready to submit to Github if you want to see it.

UPDATE: After test it again your code, I resume your error to less code. Your code work fine, if you put your line imageView.frame = CGRectMake(0, 0, size!.width, size!.height) your code works fine without contraints.

Something like this :

override func viewDidAppear(animated: Bool) {


    scrollView.delegate = self        

    // imageView.contentMode = UIViewContentMode.ScaleAspectFill
    // imageView.clipsToBounds = true
    imageView.image = UIImage(named: "imgstr.jpg")

    var imagee = UIImage(named: "imgstr.jpg")
    let size = imagee?.size

    // This line should be here!!!
    imageView.frame = CGRectMake(0, 0, size!.width, size!.height)
    imageView.contentMode = .Top
    scrollView.addSubview(imageView)

    scrollView.contentSize = size!
    let scrollViewFrame = scrollView.frame
    let scaleWidth = scrollViewFrame.size.width / scrollView.contentSize.width
    let scaleHeight = scrollViewFrame.size.height / scrollView.contentSize.height
    let minScale = min(scaleHeight, scaleWidth)

    scrollView.minimumZoomScale = 1
    scrollView.maximumZoomScale = 5
    scrollView.zoomScale = minScale

    centerScrollViewContents()       

}

The key is that in your previous code you set the frame for the image as the frame of the scrollView not at the size of the image that is bigger than the scrollView.

I hope this help you.

edited Apr 30, 2015 at 17:21

answered Apr 30, 2015 at 13:41

Vkt0r

23.5k15 gold badges86 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Adam Young Over a year ago

What do you mean by pinning it to super view in this case? Isn't the screen it's superview? I have updated my question to show how I am pinning it?

Vkt0r Over a year ago

@AdamYoung Exactly that just unmark "Contraints to margin" and put the rest left, right, bottom and top to 0, is what I mean.

Vkt0r Over a year ago

Let me know if you want to see my test project in Github

Vkt0r Over a year ago

@AdamYoung See updated answer, I going to upload the project now

Vkt0r Over a year ago

@AdamYoung This the link of the project test in Github github.com/Vkt0r/ScrollViewTest

|

Sohel L. · Accepted Answer · 2015-04-24 11:45:02Z

3

Make sure you have enable userinteraction for scrollview: scrollview.userInteractionEnabled=YES

answered Apr 24, 2015 at 11:45

Sohel L.

9,5392 gold badges35 silver badges59 bronze badges

12 Comments

Adam Young Over a year ago

I am trying it but zooming is working fine. So it means it is already enabled.

Sohel L. Over a year ago

@AdamYoung Still you have make sure by adding that line. I hope it will work for sure

Sohel L. Over a year ago

Also make sure that size of your UIScrollView is less then the contentsize (ImageSize), then only it will scroll.

Raj Over a year ago

are you interested in using autolayout approach? you don't have to write code for autolayout . you can handle it with Interface builder only

Adam Young Over a year ago

Code snippet would be of great help

|

Rahul Mane · Accepted Answer · 2015-05-27 10:50:47Z

take a UIScrollView put a UIView (lets say it container view) inside the scrollview and then put imageview inside the containerView.

now apply the auto layout constraints to uiscrollview like this

left, right, top, bottom margins, width and height constraints in scrollview

now apply the autolayout constraints to the containerView

left, right, top, bottom margins, width and height constraints in containerView

now apply the autolayout constraints to the imageView

left, right, top, bottom constraints to the imageView

after this your autolayout structure must be like this

autolayout structure

after this write the following code in the ViewController.m

- (void)viewWillAppear:(BOOL)animated
{
   [super viewWillAppear:animated];
   [self.doubleTapGesture setNumberOfTapsRequired:2];
}

- (IBAction)handleDoubleTapGesture:(UITapGestureRecognizer *)sender 
{    
   float newScale = self.scrollView.zoomScale *3;
 if (self.scrollView.zoomScale > self.scrollView.minimumZoomScale) 
  {
    [self.scrollView 
        setZoomScale:self.scrollView.minimumZoomScale animated:YES];
   }
   else       {      
    CGRect zoomRect = 
     [self zoomRectForScale:newScale
                   withCenter:
    [self.doubleTapGesture 
   locationInView:self.doubleTapGesture.view]];
       [self.scrollView zoomToRect:zoomRect animated:YES];
    }
  }

 - (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center 
 {    
    CGRect zoomRect;

    zoomRect.size.height = 
       self.contentViewHeightConstraint.constant / scale;
    zoomRect.size.width  = 
        self.contentViewWidthConstraint.constant  / scale;

    center = [self.contentView 
        convertPoint:center fromView:self.view];

    zoomRect.origin.x = center.x - ((zoomRect.size.width / 2.0));
    zoomRect.origin.y = center.y - ((zoomRect.size.height / 2.0));

     return zoomRect;
 }

#pragma mark - UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.contentView;
}

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView 
            withView:(UIView *)view
{
    self.ContentViewVerticalSpaceConstraint.constant = 0;
    [self.contentView layoutIfNeeded];
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView 
                    withView:(UIView *)view atScale:(CGFloat)scale
{
    if (scale <= 1)                    self.ContentViewVerticalSpaceConstraint.constant = 174;
        [self.contentView layoutIfNeeded];
    }
}

now check it it will be working fine with the double tap and pinch gesture.

Thank you very much! The only thing I've needed to remove is ContentViewVerticalSpaceConstraint everything other works fine.

aochuih · Accepted Answer · 2015-04-26 23:17:48Z

1

Try this:

imageView.frame = CGRectMake(0, 0, imageSize.height, imageSize.height)

Or

scrollView.contentSize = CGSizeMake(imageSize.width * 2, imageSize.height * 2)

In general, I add subviews in ViewDidLoad.

edited Apr 26, 2015 at 23:17

answered Apr 26, 2015 at 23:08

aochuih

114 bronze badges

Comments

Nurdin · Accepted Answer · 2015-04-30 02:14:41Z

1

Make sure your UIScrollView's height not more than the view's height itself.

Sample code

@IBOutlet weak var scroller: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    scroller.contentSize = CGSizeMake(400, 2300)
    scroller.showsHorizontalScrollIndicator = true
    scroller.scrollEnabled = true
}

Reference: http://blog.revivalx.com/2015/02/23/how-to-use-scroll-view-in-xcode-6-ios-8xcode6/

answered Apr 30, 2015 at 2:14

Nurdin

24k47 gold badges140 silver badges316 bronze badges

Comments

Vineesh TP · Accepted Answer · 2015-04-30 04:18:28Z

1

Enable UIImageView userinteraction.

imageView.userInteractionEnabled=true;

answered Apr 30, 2015 at 4:18

Vineesh TP

8,02314 gold badges76 silver badges140 bronze badges

Comments

Faran Ghani · Accepted Answer · 2015-04-30 15:08:32Z

1

In order to Scroll vertically You have to set x axis as 0 in the content size of the scrollView. and set this in your viewDidLoad method.

answered Apr 30, 2015 at 15:08

Faran Ghani

2874 silver badges17 bronze badges

Comments

Reynaldo Aguilar · Accepted Answer · 2015-04-30 17:03:26Z

1

You need to uncomment this line:

//imageView.frame = CGRectMake(0, 0, size.width!, size.height!)

of course, it will give you a compiler error. Since the optional value is size, the correct way is:

imageView.frame = CGRectMake(0, 0, size!.width, size!.height)

answered Apr 30, 2015 at 17:03

Reynaldo Aguilar

1,9361 gold badge15 silver badges30 bronze badges

Comments

Rahul Mane · Accepted Answer · 2015-05-27 10:32:29Z

0

It isn't scrolling with drag gestures because of auto layout.
In viewDidLoad, auto layout will reset the content size after you define it. You have two options: you can disable auto layout, or you can set contentSize in viewDidLayoutSubviews.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.contentSize = CGSize(width:10, height:10)
}

edited May 27, 2015 at 10:32

Rahul Mane

1,00518 silver badges33 bronze badges

answered Apr 27, 2015 at 5:45

Shanmugasundharam

2,09224 silver badges32 bronze badges

Collectives™ on Stack Overflow

UIScrollView with an ImageView not scrolling vertically

9 Answers 9

9 Comments

12 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

9 Comments

12 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related