iOS Tutorial: Display Large Amount of Data Efficiently With UIScrollView Integration

0
Shares
iOS Tutorial: Display Large Amount of Data Efficiently With UIScrollView Integration
Rate this post

With the increased demand of displaying a large amount of data such as email records or images in iPhone/iPod, it has become difficult to fit all data at the same time on the screens of iOS devices.

But, it doesn’t mean it’s impossible.

The solution is UIScrollView. It has a functionality of allowing developers to fit a large amount of data on screens of iOS devices.

The UIscrollView paging is a versatile class that handles scrolling, panning, and zooming. A perfect example I can share here is QuickPic Gallery. This application has used UIScrollView to make easy for its users to scroll the images in their iOS devices.

In this UIScrollView tutorial, we have created a simple UIScrollView example to make you show you how you can do it too.

Getting Started

Create a new project under the file menu and select “Single View Application” and click on next.

SV1

In the next tab, give a name to your project. Here, we’re naming it as SOScrollViewInfinite.

SV2

Once you create the new project, Setup UI of your app as per your requirements.

SV3

Next, add outlet of UIScrollVIew and declare an array of images in “CocoaLigature0 ViewController.swift”

@IBOutlet weak var scrInfinite: UIScrollView!
let slideImages : NSArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]

Now assign the delegate of UIScrollView in CocoaLigature 1 “CocoaLigature0 ViewController.swift”

class ViewController: UIViewController, UIScrollViewDelegate

Set the delegate of UIScrollView in ViewDidLoad() function.

scrInfinite.delegate! = self

Setup all the images and index them in the UIScrollView and call them from ViewDidLoad() funtion in CocoaLigature 1 “CocoaLigature0 ViewController.swift”

override func viewDidLoad() {
super.viewDidLoad()
scrInfinite.delegate! = self
self.setInfiniteScrollView()
}

//MARK: Set Infinite ScrollView
func setInfiniteScrollView() {
for i in 0..<slideImages.count {
self.addImage(withName: slideImages[i] as! String, atPosition: i)
}
for i in 0..<slideImages.count {
self.addImage(withName: slideImages[i] as! String, atPosition: i + slideImages.count)
}
for i in 0..<slideImages.count {
self.addImage(withName: slideImages[i] as! String, atPosition: i + 2 * slideImages.count)
}
scrInfinite.contentSize = CGSize(width: kNumImages * CGFloat(slideImages.count) * kImageWidth, height: kImageHeight)
scrInfinite.scrollRectToVisible(CGRect(x: kImageWidth, y: 0, width: kImageWidth, height: kImageHeight), animated: false)
}

func addImage(withName imageString: String, atPosition position: Int) {
let image = UIImage(named: imageString)!
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: CGFloat(position) * (kImageWidth + kPadding), y: 0, width: kImageWidth, height: kImageHeight)
scrInfinite.addSubview(imageView)
}

Next, set the delegate of UIScrollView to manage the scroll during drag and scroll.

//MARK: UIScrollView Delegate
func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView.contentOffset.x <= (intCountArray - 1) * kImageWidth {
scrInfinite.contentOffset = CGPoint(x: (intCountArray + (intCountArray - 1)) * kImageWidth, y: 0)
}
else if scrollView.contentOffset.x >= (2 * (intCountArray)) * kImageWidth {
scrInfinite.contentOffset = CGPoint(x: (intCountArray) * kImageWidth, y: 0)
}
}

func scrollViewWillBeginDragging(scrollView: UIScrollView) {
if scrollView.contentOffset.x <= (intCountArray - 1) * kImageWidth {
scrInfinite.contentOffset = CGPoint(x: (intCountArray + (intCountArray - 1)) * kImageWidth, y: 0)
}
else if scrollView.contentOffset.x >= (2 * (intCountArray)) * kImageWidth {
scrInfinite.contentOffset = CGPoint(x: (intCountArray) * kImageWidth, y: 0)
}
}

This is a small tutorial. Pretty simple, right?

By doing this, you’ll be able to display all the data you want in the iOS device screens. It’s that simple. If you have any questions or difficulties, don’t hesitate to reach out.

Although, there are other possibilities to display large data with the help of UIScrollView. So, if you’ve any App idea that includes displaying a large amount of data on a single screen and wish to implement UIScrollView in your own native app, contact us.

Get your iPhone app developed by leading iPhone app development company in India with a team of highly experienced iOS developers. And when you hire us for your next iOS app project, we not only design and develop as per your requirements, but we also do research thoroughly and suggest the functionalities to include for the success of your app.

We have also uploaded the source code of UIScrollView on the GitHub. Feel free to download and use it in your next project.

This page was last edited on September 23rd, 2016, at 18:58.
 
0
Shares
 

Contact us Now to Get a Free Quote for Your App Idea

Get your free consultation now