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

时间:2017-02-09 08:44:39

标签: ios objective-c swift uitableview tableviewcell

我需要了解如何通过动画实现这种自定义UITableViewCell,就像UITableViewCell向左或向右滑动时的开箱即用功能一样。

我到目前为止(并且正在工作)所做的是:

  1. 添加带有该圆圈图像的按钮。
  2. 切换该按钮的可见性。
  3. 切换按钮的突出显示和正常状态。
  4. 在#2中显示或隐藏单选按钮时,切换整个视图的约束。
  5. 重新加载数据。
  6. 我认为这个问题可能会使我的实现更加清晰,而不是切换自定义tableViewCell的可见性和约束,只需滑动它或为其设置动画。

    编辑:这些单选按钮仅在某种模式下显示,例如编辑模式。通常情况下,我的单元格中没有单选按钮。

    enter image description here

4 个答案:

答案 0 :(得分:1)

你可以尝试这个我创建的简单演示。

<强> 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

查看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看起来像这样:

开始时不显示复选框:

enter image description here 点击Show CheckBox: enter image description here

答案 1 :(得分:1)

让我们考虑您的数据源是

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]];

您的表委托/数据源方法应该是

- (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];
}

答案 2 :(得分:1)

你做得更难,你只需要隐藏你的按钮,这是一个类似的实现,我做了一个删除按钮并删除它没有确认。

1)在内容视图中制作子视图,并使其大于具有负前导空格的内容视图(-42是幻灯片偏移的值)

enter image description here

然后将你的复选标记按钮放在这个隐藏的空间中,就像我为我做的那样:

enter image description here

然后,当您将编辑模式设置为true时,您的复选框将显示幻灯片动画;)

答案 3 :(得分:-1)

MGSwipeTableCell 是一个易于使用的UITableViewCell子类,允许显示具有各种过渡的可滑动按钮。

  

https://github.com/MortimerGoro/MGSwipeTableCell