Expedia app sectionIndex: how do they do it?

Question

I noticed that the Expedia application ( http://a5.mzstatic.com/us/r1000/027/Purple/4c/f4/6c/mzl.wcipbyyg.320x480-75.jpg ) has a custom Index section for UITableView in the hotel list. (image attached)

I suppose this may be a custom view, perhaps with a vertical UISlider, but as I know, UISlider cannot recognize touch events on slides, but simply drag and drop them.

So how do they do it? Vertical button sequence? But, in this case, how to recognize event drag and drop?

I would like to reproduce this control, but I need some hints;)

thanks

Answer 1

There are many ways to achieve the effect. Assuming you have self.view initialized from a nib file and a regular UIView, you can put this code in 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 above the table. Now you can scroll both types of scrolling (the table also represents scrolling) independently.

Then you will have to configure delegates and receive scroll events through UIScrollViewDelegate. When one of the scroll views starts dragging, you need to start adjusting the offset of the other scroll view.