ios - Programmatically scroll a UIScrollView


Translate

I have a UIScrollView which has several views. When a user flicks their finger, the view scrolls to the right or left depending on the direction of the finger flick. Basically my code works in a way similar to the iPhone photo app. Now, is there a way that I can programmatically do the same thing so that I end up with a slideshow that runs on its own with a click of a button and a configurable pause between each scroll?

How do you really do slideshows with UIScrollView?



All Answers
  • Translate

    You can scroll to some point in a scroll view with one of the following statements in Objective-C

    [scrollView setContentOffset:CGPointMake(x, y) animated:YES];
    

    or Swift

    scrollView.setContentOffset(CGPoint(x: x, y: y), animated: true)
    

    See the guide "Scrolling the Scroll View Content" from Apple as well.

    To do slideshows with UIScrollView, you arrange all images in the scroll view, set up a repeated timer, then -setContentOffset:animated: when the timer fires.

    But a more efficient approach is to use 2 image views and swap them using transitions or simply switching places when the timer fires. See iPhone Image slideshow for details.


  • Translate

    If you want control over the duration and style of the animation, you can do:

    [UIView animateWithDuration:2.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        scrollView.contentOffset = CGPointMake(x, y);
    } completion:NULL];
    

    Adjust the duration (2.0f) and options (UIViewAnimationOptionCurveLinear) to taste!


  • Translate

    Another way is

    scrollView.contentOffset = CGPointMake(x,y);
    

  • Translate

    With Animation in Swift

    scrollView.setContentOffset(CGPointMake(x, y), animated: true)
    

  • Translate

    Swift 3

       let point = CGPoint(x: 0, y: 200) // 200 or any value you like.
        scrollView.contentOffset = point
    

  • Translate
    scrollView.setContentOffset(CGPoint(x: y, y: x), animated: true)
    

  • Translate
    [Scrollview setContentOffset:CGPointMake(x, y) animated:YES];
    

  • Translate

    I'm amazed that this topic is 9 years old and the actual straightforward answer is not here!

    What you're looking for is scrollRectToVisible(_:animated:).

    Example:

    extension SignUpView: UITextFieldDelegate {
        func textFieldDidBeginEditing(_ textField: UITextField) {
            scrollView.scrollRectToVisible(textField.frame, animated: true)
        }
    }
    

    What it does is exactly what you need, and it's far better than hacky contentOffset

    This method scrolls the content view so that the area defined by rect is just visible inside the scroll view. If the area is already visible, the method does nothing.

    From: https://developer.apple.com/documentation/uikit/uiscrollview/1619439-scrollrecttovisible


  • Translate
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        board=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.height, 80)];
        board.backgroundColor=[UIColor greenColor];
        [self.view addSubview:board];
        // Do any additional setup after loading the view.
    }
    
    
    -(void)viewDidLayoutSubviews
    {
    
    
        NSString *str=@"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
        index=1;
        for (int i=0; i<20; i++)
        {
            UILabel *lbl=[[UILabel alloc]initWithFrame:CGRectMake(-50, 15, 50, 50)];
            lbl.tag=i+1;
            lbl.text=[NSString stringWithFormat:@"%c",[str characterAtIndex:arc4random()%str.length]];
            lbl.textColor=[UIColor darkGrayColor];
            lbl.textAlignment=NSTextAlignmentCenter;
            lbl.font=[UIFont systemFontOfSize:40];
            lbl.layer.borderWidth=1;
            lbl.layer.borderColor=[UIColor blackColor].CGColor;
            [board addSubview:lbl];
        }
    
        [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(CallAnimation) userInfo:nil repeats:YES];
    
        NSLog(@"%d",[board subviews].count);
    }
    
    
    -(void)CallAnimation
    {
    
        if (index>20) {
            index=1;
        }
        UIView *aView=[board viewWithTag:index];
        [self doAnimation:aView];
        index++;
        NSLog(@"%d",index);
    }
    
    -(void)doAnimation:(UIView*)aView
    {
        [UIView animateWithDuration:10 delay:0 options:UIViewAnimationOptionCurveLinear  animations:^{
            aView.frame=CGRectMake(self.view.frame.size.height, 15, 50, 50);
        }
                         completion:^(BOOL isDone)
         {
             if (isDone) {
                 //do Somthing
                            aView.frame=CGRectMake(-50, 15, 50, 50);
             }
         }];
    }
    

  • Translate

    I am showing how to create a simple scroll view with two UIView and add some auto layout constraints so that it will scroll smoothly.

    I am supposing that you have an empty view controller in main.storyboard.

    1.Add a UIView.

    let view = UIView()
        view.backgroundColor = UIColor.green
        self.view.addSubview(view)
        view.translatesAutoresizingMaskIntoConstraints = false
        top = view.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0)
        left = view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0)
        right = view.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 0)
        bottom = view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0)
        height = view.heightAnchor.constraint(equalToConstant: self.view.frame.height)
        NSLayoutConstraint.activate([top, right, left, height, bottom])
    

    2.Add a ScrollView.

    let scroll = UIScrollView()
        scroll.backgroundColor = UIColor.red
        view.addSubview(scroll)
        scroll.translatesAutoresizingMaskIntoConstraints = false
        top = scroll.topAnchor.constraint(equalTo: view.topAnchor, constant: 10)
        left = scroll.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0)
        right = scroll.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0)
        bottom = scroll.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10)
        NSLayoutConstraint.activate([top, right, left, bottom])
    

    3.Add first UILabel.

     let l2 = UILabel()
            l2.text = "Label1"
            l2.textColor = UIColor.black
            l2.backgroundColor = UIColor.blue
            scroll.addSubview(l2)
            l2.translatesAutoresizingMaskIntoConstraints = false
            top = l2.topAnchor.constraint(equalTo: scroll.topAnchor, constant: 10)
            left = l2.leadingAnchor.constraint(equalTo: scroll.leadingAnchor, constant: 10)
            height = l2.heightAnchor.constraint(equalToConstant: 100)
            right = l2.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -10)
            NSLayoutConstraint.activate([top, left, right, height])
    

    4.Add Second UILabel.

    let l1 = UILabel()
        l1.text = "Label2"
        l1.textColor = UIColor.black
        l1.backgroundColor = UIColor.blue
        scroll.addSubview(l1)
        l1.translatesAutoresizingMaskIntoConstraints = false
        top = l1.topAnchor.constraint(equalTo: scroll.topAnchor, constant: 1000)
        left = l1.leadingAnchor.constraint(equalTo: scroll.leadingAnchor, constant: 10)
        bottom = l1.bottomAnchor.constraint(equalTo: scroll.bottomAnchor, constant: -10)
        height = l1.heightAnchor.constraint(equalToConstant: 100)
        right = l1.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -10)
        NSLayoutConstraint.activate([left, bottom, right, height, top])
    

    Label1 enter image description here