iOS - Scroll View

Use of Scroll View

Scroll View is used for displaying content more than the size of the screen. It can contain all of the other UI elements like image views, labels, text views and even another scroll view itself.

Important properties

• contentSize
• contentInset
• contentOffset
• delegate

Important methods

- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated

Important delegate methods

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
   willDecelerate:(BOOL)decelerate

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

Update ViewController.h as follows

Make your class conform to scroll view delegate protocol by adding < UIScrollViewDelegate> and declare a scroll view instance as shown below in ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIScrollViewDelegate>
{
    UIScrollView *myScrollView;
} 

@end

Add a custom method addScrollView

-(void)addScrollView{
    myScrollView = [[UIScrollView alloc]initWithFrame:
    CGRectMake(20, 20, 280, 420)];
    myScrollView.accessibilityActivationPoint = CGPointMake(100, 100);
    imgView = [[UIImageView alloc]initWithImage:
    [UIImage imageNamed:@"AppleUSA.jpg"]];
    [myScrollView addSubview:imgView];
    myScrollView.minimumZoomScale = 0.5;
    myScrollView.maximumZoomScale = 3;
    myScrollView.contentSize = CGSizeMake(imgView.frame.size.width,
    imgView.frame.size.height);
    myScrollView.delegate = self;
    [self.view addSubview:myScrollView];
}

Note:

We have to add an image named as "AppleUSA1.jpg" to our project which can done by dragging the image to our navigator area where our project files are listed. The image should of resolution higher than the device to see scrolling of image.

Implement the scrollView Delegates in ViewController.m

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return imgView;
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSLog(@"Did end decelerating");
} 
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//    NSLog(@"Did scroll");
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView 
  willDecelerate:(BOOL)decelerate{
    NSLog(@"Did end dragging");
}
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    NSLog(@"Did begin decelerating");
}
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"Did begin dragging");
}

Update viewDidLoad in ViewController.m as follows

(void)viewDidLoad
{
   [super viewDidLoad];
   [self addScrollView];
   //Do any additional setup after loading the view, typically from a nib
}

Output

Now when we run the application we'll get the following output. Once you scroll the scroll view you will be able to see the remaining part of image.