Creating a custom UITableView index iOS

Question

Our designers have come up with a nice design that involves the index on the right side of the UITableView to be taller than the UITableView itself. It also has some custom images for search and better font/color than the default implementation. However, since UITableView does not support customizing its index (that I know of) I've been trying to get this going manually. The UI looks like this:

This should be a simple task, but I'm having a hell of a time making it work. I have set up a UIView to the right of the table with UIButtons lined up from top to bottom to represent my index. The goal being as the user drags in/out of the UIButtons, I would jump the UITableView to the right section.

I have searched around and it seems that the thing to do this would be to listen to the UIControlEventTouchDragOutside and UIControlEventTouchDragEnter events to know when I'm in/out of one of the UIButtons.

To this end, I have set up the entire list of buttons as an IBOutletCollection which I init in ViewDidLoad like so:

@property (retain, nonatomic) IBOutletCollection(UIButton) NSArray* indexButtons;


@implementation ViewBeerListViewController
...
@synthesize indexButtons = _indexButtons;

- (void)viewDidLoad
{
    [super viewDidLoad];

    ...

    // Go through the index buttons and set the change function
    for (int i = 0; i < [self.indexButtons count]; ++i)
    {
        UIButton* button = [self.indexButtons objectAtIndex:i];
        [button addTarget:self action:@selector(touchDragOutside:) forControlEvents:UIControlEventTouchDragOutside];
        [button addTarget:self action:@selector(touchDragEnter:) forControlEvents:UIControlEventTouchDragEnter];
    }
}

The functions touchDragOutside and touchDragEnter look like this:

- (IBAction)touchDragOutside:(UIButton*)sender
{
    NSLog(@"Button %@ touch dragged outside", [sender titleLabel].text);
}

- (IBAction)touchDragEnter:(UIButton*)sender
{
    NSLog(@"Button %@ touch dragged enter", [sender titleLabel].text);
}

This all builds and runs. However, it appears that I only ever get events for the button on which I initiated a touch. E.G. if I touch down on the letter "G", and start dragging up and down, I will only see logs for touch dragging out of "G" and into "G". I get no events for any of the other UIButtons as I go over them.

Any help with resolving this issue will be immensely appreciated. I've been stuck on what seems to be a very trivial problem for a very long time.

Thanks!

Answer 1

Instead of making them with UIButtons, try creating a custom UIView that contains UILabels with each letter. Then in the custom UIView class, override the following:

– touchesBegan:withEvent:
– touchesMoved:withEvent:
– touchesEnded:withEvent:

and use those to determine which labels are being touched. Within touchesMoved, for example, you could have:

UITouch * touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
for(UIView * indexView in self.indexViews) {
    if(CGRectContainsPoint(indexView.frame,point)) {
        //indexView was touched. do something here
        break;
    }
}

Note that you can also use a UIImageView for the top one instead of UILabels and this will still work.