Expedia app sectionIndex: how they do that?

Question

I noticed that Expedia app ( http://a5.mzstatic.com/us/r1000/027/Purple/4c/f4/6c/mzl.wcipbyyg.320x480-75.jpg) has a customized sectionIndex for UITableView on hotels list. (image attached)

I'm figuring that it could be a custom view, maybe with a vertical UISlider but, as I know, UISlider cannot recognize touch events on slides but just dragging ones.

So, how they do that ? A vertical sequence of buttons ? But, in this case, how to recognize dragging events ?

I would like to replicate that control but I need some hints ;)

thanks

Answer 1

There are more ways how to achieve the effect. Assuming you have a self.view initialized from a nib file and it's ordinary UIView, you can put this code into viewDidLoad:

- (void)viewDidLoad
{
    CGRect tvFrame = self.view.frame;
    tvFrame.origin = CGPointZero;
    UITableView* tv = [[UITableView alloc] initWithFrame:self.view.frame];
    tv.delegate = self;
    tv.dataSource = self;
    tv.showsVerticalScrollIndicator = NO;
    [self.view addSubview:tv];

    CGRect svFrame = CGRectMake(290, 10, 30, 400);
    UIScrollView* sv = [[UIScrollView alloc] initWithFrame:svFrame];
    sv.contentSize = CGSizeMake(10, 780);
    sv.showsVerticalScrollIndicator = NO;
    sv.bounces = YES;

    CGRect vFrame = CGRectMake(10, 380, 10, 20);
    UIView* v = [[UIView alloc] initWithFrame:vFrame];
    v.backgroundColor = [UIColor blueColor];
    [sv addSubview:v];

    [self.view addSubview:sv];
    [super viewDidLoad];
}

This will create a table with a narrow scroll view with a blue rectangle over the table. Now you can scroll both scroll views (the table is also a scroll view) independently.

Then you will have to setup delegates and receive scroll events via UIScrollViewDelegate. When one of the scroll views starts dragging, you have to start setting offset of the other scroll view.