Quick Scrolling Design Pattern in iOS

Question

I have a very long list in my app. Each cell has multiple lines of text and a large picture, making scrolling through this list of 200+ items very tedious.

I wanted to implement a solution that would make scrolling easier, without implementing alphabetical scrolling as shown in the contacts app (since this would prevent me from allowing fast scrolling).

I wanted to implement a solution where, if you scrolling on the right side (to the point where your finger is hovering over the scroll bar on the right), than it would work the same as if you were clicking and dragging on the scroll bar on a desktop (meaning you could drag the scroll bar to the top or bottom very very quickly).

Is this a viable design for iOS? If so, what would be the best way to go about implementing it?

Answer 1

You could use a UISlider for that purpose. Here I created an example of a small tableview with 1000 rows and a slider to scroll across them: example

You can customize the UISlider to make it smaller, vertical, or whatever you want. Here's the viewControllers code, in case the file goes offline:

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var slider: UISlider!
    @IBOutlet weak var tableView: UITableView!
    private let numberOfRows = 1000

    override func viewDidLoad() {
        super.viewDidLoad()
        slider.maximumValue = Float(numberOfRows - 1) //due to rows goes from 0 to 999
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return numberOfRows
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cellIdentifier") as! UITableViewCell
        cell.textLabel?.text = "\(indexPath.row)"
        return cell;
    }

    @IBAction func sliderValueChanged(sender: UISlider) {
        let positionToScroll = sender.value
        tableView.scrollToRowAtIndexPath(NSIndexPath(forRow: Int(positionToScroll), inSection: 0), atScrollPosition: UITableViewScrollPosition.None, animated: false)
    }

}