iOS - Objective-C - IGGridView Slide an Individual Cell to Reveal a Custom Menu

Stephen Zaharuk / Tuesday, May 6, 2014

The IGGridView has a few different options for allowing you to slide a row and reveal a menu. However, what if you're not using a row based grid, and instead have a cell based grid, maybe something like this:

A sliding row gesture wouldn't really work there. But instead of using a context menu, it'd be pretty awesome to be able to slide a single cell out of the way and display a menu.

So... how hard is this going to be? Well, actually its pretty simple. We just need to create a custom IGGridViewColumnDefinition and a custom IGGridViewCell. All of which was designed to be as simple as possible.

Lets first create our cell. For this case, we're just going to create a cell that displays an image. And since we want to display something custom behind that image, we'll have another empty view, which could be populated with buttons for a custom menu. So when we initialize the cell, we'll create our subviews and hook up a couple of gestures

UISwipeGestureRecognizer* left = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeLeft:)];
 left.direction = UISwipeGestureRecognizerDirectionLeft;
 [self addGestureRecognizer:left];
 
 UISwipeGestureRecognizer* right = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeRight:)];
 right.direction = UISwipeGestureRecognizerDirectionRight;
 [self addGestureRecognizer:right];

We connect the gestures directly to our cell. Since our gridView is vertically scrolling, we know that we can hook up left/right swipe gestures as they won't get in the way with scrolling.

Now, when we swipe left we want our image view to move with our finger, and like wise we want the same thing when we swipe right.

[UIView animateWithDuration:_duration animations:^()
 {
   _imageView.frame = CGRectMake(val, _imageView.frame.origin.y,     _imageView.frame.size.width, _imageView.frame.size.height);
 
 }];

We're also going to add a method to close the cell, to make sure its back to its original position:

-(void)closeUp
{
   _imageView.frame = CGRectMake(self.contentInset.left, _imageView.frame.origin.y, _imageView.frame.size.width, _imageView.frame.size.height);
}

And minus some other minor cell setup code, thats all we need to have in our cell.

Now, our custom column just needs to return our new cell.

@implementation SlideColumn
-(IGGridViewCell *)gridView:(IGGridView *)gridView createCell:(IGCellPath *)path usingDataSource:(IGGridViewDataSourceHelper *)dataSource
{
   SlideCell* cell = [gridView dequeueReusableCellWithIdentifier:self.fieldKey];
 
  if(!cell)
  {
     cell = [[SlideCell alloc]initWithReuseIdentifier:self.fieldKey];
  }
 
   UIImage* image = [dataSource resolveDataValueForCell:path];
  cell.imageView.image = image;
 
  return cell;
}
@end

And finally, we need to tell our DataSourceHelper about this column:

SlideColumn* col = [[SlideColumn alloc]initWithKey:@"image"];
 _dsh = [[IGGridViewSingleFieldMultiColumnDataSourceHelper alloc]initWithField:col];

If we run our App now, you can slide any cell, and it will move out of our way when we swipe left or right:

You can download the full application here.

As this does use NucliOS IGGridView, you will need a copy of NucliOS which you can get here:

As always, i hope this was helpful!

By Stephen Zaharuk (SteveZ)