How to Present Content Larger Than a Single Screen Efficiently Using iOS Scroll View

In iPhone app development, the iOS scroll view is generally used to view content that can’t fit entirely in a single screen. This UIScrollView is one of the most useful and versatile control. A common iOS control that we recently looked – iOS Table View – is a subclass of iOS Scroll View which provide a great way to display content that is larger to fit into a single screen.

In today’s iOS app tutorial, we’ll build a sample app to demonstrate how to use iOS scroll view control for iPhone app development to display content larger than a single screen efficiently.

Let’s Get Started

Create a new project under file menu.

samplescroll01

Select Single View Application.

samplescroll02

Enter the project details and click on Next.

samplescroll1

Once you successfully create a new project, go to Main.Storyboard and select ViewController.

select ViewController

Now drag and drop UIScrollView from “Show the object library” section.

Show the object library

drag and drop UIScrollView

Set the outlet of Scroll View in ViewController.swift

@IBOutlet weak var scrMain: UIScrollView!

Set the outlet

Now set delegate of ScrollView.

set delegate

Set auto layout to tableview.

Set auto layout

Now define a UIImageView object and add image in UIScrollView.

var imgView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        imgView = UIImageView(image: UIImage(named:"beautiful_swan_2-t2.jpeg"))
        imgView.center = self.view.center
        imgView.contentMode = .scaleAspectFit
        imgView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width,      height: self.view.frame.size.height)
        
        scrMain.backgroundColor = UIColor.black
        scrMain.autoresizingMask = [UIView.AutoresizingMask.flexibleWidth , UIView.AutoresizingMask.flexibleHeight]
        scrMain.delegate = self
        scrMain.minimumZoomScale = 0.1
        scrMain.maximumZoomScale = 4.0
        scrMain.zoomScale = 1.0
        scrMain.addSubview(imgView)
        
        self.setupGestureRecognizer()
        // Do any additional setup after loading the view, typically from a nib.
    }

Now add delegate method of ScrollView for zoom in/out image in scrollview.

//MARK: Adding Gesture recognizer
    func setupGestureRecognizer() {
   let doubleTap = UITapGestureRecognizer(target: self, action: 	#selector(ViewController.handleDoubleTap(recognizer:)))
        doubleTap.numberOfTapsRequired = 2
        scrMain.addGestureRecognizer(doubleTap)
    }
    
    @objc func handleDoubleTap(recognizer: UITapGestureRecognizer) {
        if (scrMain.zoomScale > scrMain.minimumZoomScale) {
            scrMain.setZoomScale(scrMain.minimumZoomScale, animated: true)
        } else {
            scrMain.setZoomScale(scrMain.maximumZoomScale, animated: true)
        }
    }
    
    override func viewWillLayoutSubviews() {
        setZoomScale()
    }
    
    func setZoomScale() {
        let imageViewSize = imgView.bounds.size
        let scrollViewSize = scrMain.bounds.size
        let widthScale = scrollViewSize.width / imageViewSize.width
        let heightScale = scrollViewSize.height / imageViewSize.height
        
        scrMain.minimumZoomScale = min(widthScale, heightScale)
        scrMain.zoomScale = 1.0
    }
    
    
    //MARK: ScrollView Delegate
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imgView
    }
    
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        let imageViewSize = imgView.frame.size
        let scrollViewSize = scrollView.bounds.size
        
        let verticalPadding = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.height) / 2 : 0
        let horizontalPadding = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width) / 2 : 0
        
        scrollView.contentInset = UIEdgeInsets(top: verticalPadding, left:  horizontalPadding, bottom: verticalPadding, right: horizontalPadding)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

And done!

When you run the demo, the output should be like this:

simulator-screen-shot-jan-5-2017-3-47-46-pm

So now that you know the implementation process, you’re ready to add iOS scroll view control in your iOS app. And if you’ve face any issue, or can’t seem to implement scroll view control successfully, consult with an expert developer or hire iPhone app developer to do the job for you.

Grab a free copy of ScrollView Demo from Github.

This page was last edited on February 4th, 2019, at 9:42.
 
 

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *