iOS: Create Stretchable Scroll view like in Spotify playlist with Swift

Introduction 

Imagine an iOS app where scrolling feels as natural as pulling back a catapult—where the interface responds effortlessly to your touch, seamlessly scrolling upward the more you pull down. This blog dives into the mechanics of achieving this captivating scrolling effect, offering insights and practical tips for developers looking to elevate their iOS applications with intuitive user interactions.

Let’s take a look at demo below…

Sponsored

Stop the habit of wishful thinking and start the habit of thoughtful wishes with Justly.

Let’s do coding!

1. In your xcode project create a scroll view outlet in your ViewController.swift file

@IBOutlet weak var scrollView: UIScrollView!

2. Confirm a ScrollView delegate to your ViewController class

class StretchableScrollViewController: UIViewController {@IBOutlet weak var scrollView: UIScrollView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
    }
}

3. Now we will write core logic behind the effect into scrollViewWillBeginDragging(scrollView:) method of UIScrollViewDelegate

extension StretchableScrollViewController: UIScrollViewDelegate {
       func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
          if scrollView.contentOffset.y < 0 {
             self.scrollView.contentInset.top = estimetedScrollingPoint(offsetY: scrollView.contentOffset.y)
          } else {
             self.scrollView.contentInset.top = 0
          }
       }
       func estimetedScrollingPoint(offsetY: CGFloat) -> CGFloat {
           let maxOffset = (offsetY * 100) / (self.view.frame.size.height / 3)
let offset = (maxOffset * (scrollView.contentSize.height - self.view.frame.size.height)) / 100
           return offset
       }
}

• You can also check the full source code — github project.

Conclusion 

Implementing a scrolling effect akin to a catapult adds an engaging and intuitive dimension to user interaction on websites and applications. By mimicking the natural motion of a catapult—where pulling down initiates an upward scroll—the user experience becomes not only dynamic but also memorable.

Thanks for your support!

Happy coding!!

Related Useful Articles