×

iOS UIScrollView


What is UIScrollView ?

ScrollView is used to highlight the Contents whose size is more than the screen . You can embed any UIElement inside the scrollView. In simple words , slideshow you see in many websites or apps are created using UIScrollView :)

Important properties of UIScrollView

Property Description
1) contentSize ContentSize indicates the size of the content view.
2) contentOffset ContentOffset indicates the point at which the origin of the content view is offset from the origin of the scroll view.
3) scrollEnabled scrollEneabled indicates a Boolean value that determines whether scrolling is enabled.
4) scrollsToTop scrollToTop indicates a Boolean value that controls whether the scroll-to-top gesture is enabled.
5) scrollRectToVisible:animated: Scrolls a specific area of the content so that it is visible in the receiver.
6) pagingEnabled A Boolean value that determines whether paging is enabled for the scroll view.
7) showshorizontalScrollIndicator A Boolean value that controls whether the horizontal scroll indicator is visible.
8) showsverticalScrollIndicator A Boolean value that controls whether the vertical scroll indicator is visible.
9) keyboardDismissMode The manner in which the keyboard is dismissed when a drag begins in the scroll view.

Important Delegate Methods

Sr.No Delegate
1) - (void)scrollViewDidScroll:(UIScrollView *)scrollView;

Tells the delegate when the user scrolls the content view within the receiver.

2) - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

Tells the delegate when the scroll view is about to start scrolling the content.

3) - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;

Tells the delegate when the user finishes scrolling the content.

4) - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

Tells the delegate that the scroll view is starting to decelerate the scrolling movement.

5) - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

Tells the delegate that the scroll view has ended decelerating the scrolling movement.

Example :-

This example is basically a simple slider Screen which most appps contains. Like in linked in , like in Zomato Apps You may see a slider screen before you sign up.

We strongly recommend to use Autolayout category . Makes Coding Simplified. It's short and simple. In this example we used UIView + Autolayout Category which we studied in previous tutorial . You can refer that here

Final Output :-

Then when you scroll the screen of app in right side , second Image Appears

Then when you scroll the screen of app in right side , third Image Appears



//  Created by Manish Methani.
//  Copyright (c) 2017 Codzify. All rights reserved.
//

#import "ViewController.h"
#import "UIView+Autolayout.h"

static const int btnHeight = 42;

@interface ViewController ()
{
    UIScrollView *myScrollView;
    UIPageControl *pageControl; 
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self initializeSrollView];  
}

- (void)initializeSrollView
{
    //Initialise a scroll View Here 
    myScrollView = [[UIScrollView alloc]
                    initWithFrame:CGRectMake(0, 0,
                                             self.view.frame.size.width,
                                             self.view.frame.size.height-80)];
    [self.view addSubview:myScrollView];
    myScrollView.showsHorizontalScrollIndicator = NO;
    
    /* You have to enable Paging. Three dots you see at the end called as pagination. */
    myScrollView.pagingEnabled = YES;
    

/* We created a simple Dictionary which contains image and one title */
    NSMutableArray* tagImageArray = [[NSMutableArray alloc]init];
    NSMutableDictionary* dict = [[NSMutableDictionary alloc]init];
    [dict setObject:@"manish@2x.jpg" forKey:@"imageName"];
    [dict setObject:@"Think fast . Think smart." forKey:@"title"];
    [tagImageArray addObject:dict];
    

 /* You can add any image you want */
    dict = [[NSMutableDictionary alloc]init];
    [dict setObject:@"manish2.jpg" forKey:@"imageName"];
    [dict setObject:@"Basics is the key of any programming." forKey:@"title"];
    [tagImageArray addObject:dict];
    
/* You can add any image you want */
    dict = [[NSMutableDictionary alloc]init];
    [dict setObject:@"manish3.jpg" forKey:@"imageName"];
    [dict setObject:@"Before Quitting , Always remember why you started" forKey:@"title"];
    [tagImageArray addObject:dict];
    
        
    for (int i = 0; i < [tagImageArray count]; i++)
    {
        CGFloat myOrigin = i * myScrollView.frame.size.width;
        NSMutableDictionary* tempDict = [tagImageArray objectAtIndex:i];
        UIImageView *tagIconImageView = [[UIImageView alloc]init];
        tagIconImageView.image = [UIImage imageNamed:[tempDict objectForKey:@"imageName"]];
        [myScrollView addSubview:tagIconImageView];
        tagIconImageView.frame = CGRectMake(myOrigin,24, myScrollView.frame.size.width, myScrollView.frame.size.width -60);
        tagIconImageView.contentMode = UIViewContentModeScaleAspectFit;
        
        
        UILabel* descriptionLabel = [[UILabel alloc]initWithFrame:CGRectMake(myOrigin+12,CGRectGetMaxY(tagIconImageView.frame), myScrollView.frame.size.width- 12*2,120)];
        [myScrollView addSubview:descriptionLabel];
        descriptionLabel.numberOfLines = 0;
        descriptionLabel.textColor = [UIColor blackColor];
        descriptionLabel.textAlignment = NSTextAlignmentCenter;
        descriptionLabel.lineBreakMode = NSLineBreakByWordWrapping;
        
        NSMutableAttributedString* titleString = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%@ \n",[tempDict objectForKey:@"title"]]];
        
        [titleString addAttribute:NSFontAttributeName
                            value:[UIFont boldSystemFontOfSize:18.0]
                            range:NSMakeRange(0,titleString.length)];
        
        
                descriptionLabel.attributedText = titleString;
    }
    
    myScrollView.delegate = self;
    
 /* Three dots in final Output are called as Paging Control */ 
    pageControl = [[UIPageControl alloc] init] ;
    pageControl.numberOfPages = [tagImageArray count];
    pageControl.pageIndicatorTintColor = [UIColor grayColor];
    pageControl.currentPageIndicatorTintColor = [UIColor lightGrayColor];
    
    [pageControl addTarget:self action:@selector(changePage) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:pageControl];
    pageControl.backgroundColor = [UIColor clearColor];
    [pageControl autolayout];
    [pageControl bottomAlign:0];
    [pageControl height:40];
    [pageControl width:200];
    [pageControl centerXAlign];
    
    UIView *bottomSeparatorView = [[UIView alloc]init];
    [self.view addSubview:bottomSeparatorView];
    [bottomSeparatorView autolayout];
    [bottomSeparatorView leftAlign:0];
    [bottomSeparatorView rightAlign:0];
    [bottomSeparatorView bottomAlign:btnHeight];
    [bottomSeparatorView height:1];
    bottomSeparatorView.backgroundColor = [UIColor lightGrayColor];
    
/* Sign In Button */
    UIButton *signInBtn = [[UIButton alloc]init];
    [signInBtn setTitle:@"SIGN IN" forState:UIControlStateNormal];
    [signInBtn setTitleColor:[UIColor
                              orangeColor] forState:UIControlStateNormal];
    [signInBtn addTarget:self action:@selector(signIn:) forControlEvents:UIControlEventTouchUpInside];
    signInBtn.titleLabel.font = [UIFont systemFontOfSize:14.0];
    
    [self.view addSubview:signInBtn];
    [signInBtn autolayout];
    [signInBtn leftAlign:10];
    [signInBtn bottomAlign:0];
    [signInBtn height:btnHeight];
    
    
    UIButton *joinNowBtn = [[UIButton alloc]init];
    [joinNowBtn setTitle:@"JOIN" forState:UIControlStateNormal];
    [joinNowBtn setTitleColor:[UIColor
                               orangeColor] forState:UIControlStateNormal];
    [self.view addSubview:joinNowBtn];
    joinNowBtn.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [joinNowBtn addTarget:self action:@selector(joinNow:) forControlEvents:UIControlEventTouchUpInside];
    [joinNowBtn autolayout];
    [joinNowBtn rightAlign:4];
    [joinNowBtn bottomAlign:0];
    [joinNowBtn height:btnHeight];
    
    NSLayoutConstraint *contraint = [NSLayoutConstraint constraintWithItem:joinNowBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:signInBtn attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
    [self.view addConstraint:contraint];
    
    
    myScrollView.contentSize = CGSizeMake(myScrollView.frame.size.width * tagImageArray.count,myScrollView.frame.size.height);
    
    
}



/* Controls the page Dots when pages are scrolled . */
- (void)changePage 
{
    // update the scroll view to the appropriate page
    CGRect frame;
    frame.origin.x = myScrollView.frame.size.width *pageControl.currentPage;
    frame.origin.y = 0;
    frame.size = myScrollView.frame.size;
    [myScrollView scrollRectToVisible:frame animated:YES];
}

/* Scroll View Delegate */
- (void)scrollViewDidScroll:(UIScrollView *)sender 
{
    // Update the page when more than 50% of the previous/next page is visible
    CGFloat pageWidth = myScrollView.frame.size.width;
    int page = floor((myScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage = page;
}

/* SignIn Method */
-(void)signIn:(id)sender
{
   NSLog(@"Login Button Clicked");
}

/* Join Now Method */
-(void)joinNow:(id)sender
{
   NSLog(@"Join Now Button Clicked");   
}

@end