Custom Scrollbar for iPhone's UIView (Making Long Scrolls Not Suck)

In a post, Making Long Scrolls on the iPhone Not Suck, Aza Raskin describes an alternative scrollbar control that's better at getting around on very long pages:

Sticky Scroll Indicator

It's not important that the scrollbar "remains for some amount of time" to activate it; I'm fine with simply swiping along the right edge of the iPhone's screen to grab hold of the scrollbar handle. The idea is that if I drag the handle 3/4 of the way down on the physical screen, I'd be 3/4 of the way down on the page.

Tthe Dropbox iPhone app (it's great, btw!) has exactly this kind of scrollbar for long PDF documents. Regular scrolling is done by dragging anywhere but on the handle; dragging the handle moves the view to that location. This seems to have been implemented "from scratch", as I don't think the SDK is flexible enough to customize the behavior of the existing scrollbar.

However, Dropbox uses the native document viewers to show documents on the iPhone, so somehow they add the scrollbar functionality to it. See the scrollbar handle? You can drag that to quickly get somewhere else in the document.

Dropbox scrollbar at the top Dropbox scrollbar at the bottom

This concept is very similar to how index bars work in UITableView (ie. Contacts.app); the index appears as a bar on the right hand side of the table (for example, "a" through "z"), and you can touch a particular label to jump to the target section. In this case, however, a very long page doesn't have sections, and it should work for general-purpose scrolling, not jumping to sections.

So how can I go about implementing this method of scrolling? I'm looking

Edit Report

There's probably an open source implementation for this. I don't know any. Maybe shoot an email to Dropbox developers?

Anyway, the way I'd do this is:

@interface UICustomisedScrollView : UISCrollView
{
    BOOL showingScroller;
    UIView scroller; //Customise this, either in IB or in viewDidLoad
}

@implementation UICustomisedScrollView

- (BOOL)touchesShouldBegin:(NSSet *)touches withEvent:(UIEvent *)event inContentView:(UIView *)view {
    showingScroller = !showingScroller;
    if(showingScroller)
        scroller.hidden = NO;
    else
        scroller.hidden = YES;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if(showingScroller) {
        if(/*the touch is on the scroller*/) {
             /* scrollview.setContentOffset(...) we want to scroll according to how much the user scrolls here */
        }
        //move scroller.frame.origin to where the touch is.
    }
}

I'm guessing it won't be too difficult... But I haven't tested the above code yet. That's the general idea anyway =)

answered 2011-02-02T00:29:02.870

Custom Scrollbar for iPhone's UIView (Making Long Scrolls Not Suck)

1 Answer

Your Answer