iOS Place a View on a TableViewCell when cell is in focus - ios

Question

In a VC I have a tableView with custom Cell "ChartListCell". When the user is on any particular cell I want to open a view with 2 buttons in it on top of the cell and let user click on any button and appropriate action be taken for that cell. What would be the best way to implement this feature ? I am stuck at :-
Event to find cell/row is selected.
Place the view at the cells' position - so it stays on top of the cell.
Create the view with 2 btns - would be better to create it programmatically so events can be mentioned in the same VC only or to create a xib would be better option ?
Hide the view again when selection is lost.
UPDATE :-
So I tap the cell, the view (like below with 2 buttons) appears. If I scroll the table, the view stays on the cell. Once I tap an option on the new view , or tap on another cell or somewhere outside it disappears.
UPDATE :-
I created a xib file and in didSelectRowAtIndexPath am trying to show the view, but it's not appearing.
// Get the SELECTED CELL
ChartListCell *cell = (ChartListCell*)[tableView cellForRowAtIndexPath:indexPath];
NSLog(#"ABOUT TO SHOW VOV");
NSArray *visitorOptView = [[NSBundle mainBundle] loadNibNamed:#"VisitorsOptionsView" owner:self options:Nil];
VisitorsOptionsView *vov = [visitorOptView objectAtIndex:0];
vov.frame = cell.frame;
[self.view addSubview:vov];
[self.view bringSubviewToFront:vov];
Nothing appears. Where am I going wrong ? To give the same location as of the cell, I tried vov.frame = cell.frame , but I think I may be wrong at that step. What else should be at that place ???
What would be the best methods to implement the above ? Can you please help me guide out. Any help is highly appreciated.
Below image shows what I am looking to meet up the design :-

Answer 1

I made this demo project for you:http://goo.gl/Y6GFmj , you can download it
You can add the view into your table cell instead of your view. You need to subclass your table view cell and add a property to hold the overlay view.
#interface MyTableViewCell : UITableViewCell
#property (weak, nonatomic) UIView * overlayView;
#end
Note that the overlay view should be a weak property, because the cell's view will have the strong reference to it, just like an IBOutlet.
You need to add another property in your table view controller to hold the last selected index path, so that when you select a new row, you can remove the overlay view in the old one.
#property (strong, nonatomic) NSIndexPath * lastSelectedRow;
Use the following function to remove the overlay view from a cell
- (void)removeViewInCellOfIndexPath:(NSIndexPath *)indexPath
{
if (!indexPath)
return;
MyTableViewCell * cell = (MyTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
if (cell.overlayView)
{
[cell.overlayView removeFromSuperview];
}
}
Now you can deal with the selection:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// deselecte the row
[tableView deselectRowAtIndexPath:indexPath animated:NO];
// remove the overlay view from the last selected row
[self removeViewInCellOfIndexPath:self.lastSelectedRow];
// add overlay view to this row
MyTableViewCell * cell = (MyTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
// note the origin of the frame is (0, 0) since you are adding itto the cell instead of the table view
UIView * view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height)];
view.backgroundColor = [UIColor greenColor];
[cell.contentView addSubview:view];
// remember this view and this indexpath
cell.overlayView = view;
self.lastSelectedRow = indexPath;
}

Answer 2

I had done something similar to this, What I did was while creating my custom cell I had placed another view at the bottom which contained the two buttons, make the two buttons as IBOutlets of their classes.
When I load it in my table view with the usual method in CellForROwAtIndexpath I defined as following...
- (UITableViewCell *)couchTableSource:(CBLUITableSource*)source
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *cellid=#"Cell";
CustomTableCell* cell=(CustomTableCell*)[_Mytableview dequeueReusableCellWithIdentifier:cellid];
if(cell==nil)
{
NSArray *nib=[[NSBundle mainBundle] loadNibNamed:#"CustomTableCell" owner:self options:nil];
cell=[nib objectAtIndex:0];
}
[cell.firstButton addTarget:self action:#selector(firstButtonClicked:event:) forControlEvents:UIControlEventTouchUpInside];
[cell.secondButton addTarget:self action:#selector(SecondButtonClicked:event:) forControlEvents:UIControlEventTouchUpInside];
}
I maintained a global integer flag as SelectedIndex and used it as follows
In didSelectRowAtIndexPath I have done something Like this..
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if(selectedIndex == indexPath.row)
{
selectedIndex = -1;
[_Mytableview reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
return;
}
//First we check if a cell is already expanded.
//If it is we want to minimize make sure it is reloaded to minimize it back
if(selectedIndex >= 0)
{
NSIndexPath *previousPath = [NSIndexPath indexPathForRow:selectedIndex inSection:0];
selectedIndex = indexPath.row;
[_Mytableview reloadRowsAtIndexPaths:[NSArray arrayWithObject:previousPath] withRowAnimation:UITableViewRowAnimationFade];
}
//Finally set the selected index to the new selection and reload it to expand
selectedIndex = indexPath.row;
[_Mytableview reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
}
also and the most important step in heightForRowAtIndexPath
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if(indexPath.row == selectedIndex)
{
return (return the actual size of the cell, Including the view with two buttons);
}
else
{
return (return the size of cell -(the size of view containing the two buttons));
}
}
In viewWillAppear make Sure to assign this so that the cell would be normal whenever the is presented
-(void)viewWillAppear:(BOOL)animated
{
selectedIndex=-1;
[myTableView reloadData];
}