CODEWITHSUNDEEP
iphoneiosuitableview
Hesham
Hesham

Reputation: 5274

UITableView with custom index view

What I'm trying to do is to customize the look of UITableView index. After some search I came to the conclusion that this is not possible and I have to make a custom view to accomplish something like the screen shot below.

example http://img705.imageshack.us/img705/8573/57screenshot20111231at9.png

My table view doesn't have sections, so what I want to do is to scroll one "page" down or up when one of the little dots is tapped. Also I want the user to be able to swipe over the view to jump over pages quickly just like the standard table view index.

I will be grateful if you provide me with an example of something similar to this or at least some guidelines on where to start.

Upvotes: 2

Views: 3458

Answers (1)

msgambel
msgambel

Reputation: 7340

As long as you don't mind the 'dots' being a fixed colour, this is indeed possible to accomplish with the already provided methods. You need only use the 2 methods:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;

You will also need a UIImageView that holds the transparent image you have over the selected 'dot'.

In the first method, return an NSArray for the form: [NSArray arrayWithObjects:@".", @".", ..., @".", nil];. This will enter in 'dots' in the side bar, where each dot represents 1 section of the UITableView. When the user taps on one of the 'dots', the UITableView will move to the corresponding section. Since you want the sections to be each 1 page length, just section your data accordingly.

As for the second method, this is where you adjust the frame of the UIImageView holding the transparent image which covers the selected dot. Just change the .frame. property to line up with the new selected section. You'll need to do a bit of math to get this lined up right, but it's fairly easy.

You'll also need to use the UIScrollViewDelegate methods to handle moving the transparent image while the user is scrolling. They are:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

These will allow you to have the UIImageView move to the appropriate section while the user is scrolling. Again, you'll have to do a bit of math to get everything lined up perfectly.

Hope that Helps!

Upvotes: 4

Related Questions