通过动画将单选按钮添加到UITableViewCell：iOS

Question

I need idea how to implement this kind of custom UITableViewCell by animating, just like the out-of-the-box feature of UITableViewCell when sliding left or right.

What I've done so far (and is working), is:

1. Add a button with that circle image.
2. Toggle visibility of that button.
3. Toggle highlighted and normal state of the button.
4. Toggle constraints of the whole views when showing or hiding the radio button in #2.
5. Reload Data.

I'm thinking that this question might make my implementation cleaner when instead of toggling visibility and constraints of my custom tableViewCell , just slide it or animate it.

EDIT : These radio buttons appear only in a certain mode, like editing mode. So normally, there are no radio buttons in my cells.

Answer 1

You can try this I created Simple Demo.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>
{
    NSMutableArray *dataArray;
}

    @property (weak, nonatomic) IBOutlet UITableView *mTableView;
// You can toggle the Selection by Means you can show hide the checkboxes
    - (IBAction)didTapBringCheckBoxBtn:(id)sender;

@end

View controller.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    dataArray=[[NSMutableArray alloc]init];
    [dataArray addObject:@"Apple"];
    [dataArray addObject:@"Mango"];
    [dataArray addObject:@"Papaya"];
    [dataArray addObject:@"Guava"];
    [dataArray addObject:@"Pineapple"];
    [dataArray addObject:@"Strawberry"];
    [dataArray addObject:@"Banana"];
    [dataArray addObject:@"Grapes"];
    [dataArray addObject:@"Pomegranate"];
    [dataArray addObject:@"Green Tea"];
    [dataArray addObject:@"Raisin"];

    self.mTableView.delegate=(id)self;
    self.mTableView.dataSource=(id)self;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Check Box Button Action

- (IBAction)didTapBringCheckBoxBtn:(id)sender {

     if(self.mTableView.editing==YES)
{
[self.mTableView setEditing:NO animated:YES];
}else{
[self.mTableView setEditing:YES animated:YES];
}

}

#pragma mark - UITableView DataSource Methods

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [dataArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }

    cell.textLabel.text = [dataArray objectAtIndex:indexPath.row];
    return cell;
}

#pragma mark - UITableView Delegate Methods

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 3;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"user selected %@",[dataArray objectAtIndex:indexPath.row]);
}
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
{
     NSLog(@"user de-selected %@",[dataArray objectAtIndex:indexPath.row]);
}

@end

OutPut Will look Like This :

At Start Not showing Checkboxes :

On click Show CheckBox :

Answer 2

You did the harder, you just need to hide your button, here is a similar implementation I did to have a delete button and delete it without a confirmation.

1) Made a subview in content view, and made it bigger than content view with a negative leading space (-42 is the value of the slide offset)

Then put your checkmark button in this hidden space like I did for mine:

Then when you will set editing mode to true, your checkbox will appear with slide animation ;)

Answer 3

Lets consider your data source looks like

NSMutableDictionary *sampleRecord = [[NSMutableDictionary alloc] initWithObjectsAndKeys:@"isSelected",@"true",@"title",@"title text", nil];
records = [[NSMutableArray alloc] init];
[records addObject:[sampleRecord copy]];
[records addObject:[sampleRecord copy]];
[records addObject:[sampleRecord copy]];

And your table delegate/data source methods should be

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [records count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    //Initialize your cell
    //Read the all views from your cell
    //Now add the click event to your radio button (UIButton)

    [myButton addTarget:self action:@selector(changeRadioState) forControlEvents: UIControlEventTouchUpInside];

    return cell;
}

- (IBAction)changeRadioState:(id)sender
{
    //Detect the row index fro table where is the button present
    CGPoint buttonPosition = [sender convertPoint:CGPointZero toView:tableView];
    NSIndexPath *indexPath = [tableView indexPathForRowAtPoint:buttonPosition];

    //Now get the resource data for clicked row
    NSMutableDictionary *record = [records objectAtIndex:indexPath.row];

    //Change the selected state images
    if ([[records valueForKey:@"isSelected"] isEqualToString:@"true"]) {
        [sender setImage:[UIImage imageNamed:@"unSelectStateImage"] forState:UIControlStateNormal];
        [record setValue:@"false" forKey:@"isSelected"];

    }
    else{
        [sender setImage:[UIImage imageNamed:@"selectedStateImage"] forState:UIControlStateNormal];
        [record setValue:@"true" forKey:@"isSelected"];
    }

    //Reload entire table
    [tableView reloadData];

    //Or else you can reload the single row by
    [tableView beginUpdates];
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    [tableView endUpdates];
}

Answer 4

MGSwipeTableCell is an easy to use UITableViewCell subclass that allows to display swipeable buttons with a variety of transitions.

https://github.com/MortimerGoro/MGSwipeTableCell