MCSwipeTableViewCell 2.1.4

MCSwipeTableViewCell 2.1.4

×

测试已测试✗
语言语言 Obj-CObjective C
许可证 MIT
发布时间上次发布2015 年 7 月

由 Ali Karagoz 维护。

MCSwipeTableViewCell 2.1.4

  • 作者：
  • Ali Karagoz

尝试展示如何实现类似于在执行良好的 Mailbox iOS 应用中看到的那种 TableViewCell。

演示

退出模式

退出模式 MCSwipeTableViewCellModeExit 是我们在 Mailbox 应用中可以看到的原始行为。滑动单元格会使它消失。在毁灭性模式中很方便。

切换模式

切换模式 MCSwipeTableViewCellModeSwitch 是我介绍的新行为。单元格在选择状态后会弹回，这允许您保留单元格。快速切换选项很方便。

API 参考

有关类的全部功能概述，请参阅头部文件 MCSwipeTableViewCell.h。

使用方法

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

    MCSwipeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (!cell) {
        cell = [[MCSwipeTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];

        // Remove inset of iOS 7 separators.
        if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
            cell.separatorInset = UIEdgeInsetsZero;
        }

        [cell setSelectionStyle:UITableViewCellSelectionStyleGray];

        // Setting the background color of the cell.
        cell.contentView.backgroundColor = [UIColor whiteColor];
    }

    // Configuring the views and colors.
    UIView *checkView = [self viewWithImageName:@"check"];
    UIColor *greenColor = [UIColor colorWithRed:85.0 / 255.0 green:213.0 / 255.0 blue:80.0 / 255.0 alpha:1.0];

    UIView *crossView = [self viewWithImageName:@"cross"];
    UIColor *redColor = [UIColor colorWithRed:232.0 / 255.0 green:61.0 / 255.0 blue:14.0 / 255.0 alpha:1.0];

    UIView *clockView = [self viewWithImageName:@"clock"];
    UIColor *yellowColor = [UIColor colorWithRed:254.0 / 255.0 green:217.0 / 255.0 blue:56.0 / 255.0 alpha:1.0];

    UIView *listView = [self viewWithImageName:@"list"];
    UIColor *brownColor = [UIColor colorWithRed:206.0 / 255.0 green:149.0 / 255.0 blue:98.0 / 255.0 alpha:1.0];

    // Setting the default inactive state color to the tableView background color.
    [cell setDefaultColor:self.tableView.backgroundView.backgroundColor];

    [cell.textLabel setText:@"Switch Mode Cell"];
    [cell.detailTextLabel setText:@"Swipe to switch"];

    // Adding gestures per state basis.
    [cell setSwipeGestureWithView:checkView color:greenColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState1 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
        NSLog(@"Did swipe \"Checkmark\" cell");
    }];

    [cell setSwipeGestureWithView:crossView color:redColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState2 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
        NSLog(@"Did swipe \"Cross\" cell");
    }];

    [cell setSwipeGestureWithView:clockView color:yellowColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState3 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
        NSLog(@"Did swipe \"Clock\" cell");
    }];

    [cell setSwipeGestureWithView:listView color:brownColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState4 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
        NSLog(@"Did swipe \"List\" cell");
    }];

    return cell;
}

代理

MCSwipeTableViewCell 有一些代理方法用于跟踪用户行为。请查看头部文件以了解 MCSwipeTableViewCellDelegate 提供的所有方法。

@interface MCTableViewController () <MCSwipeTableViewCellDelegate>
#pragma mark - MCSwipeTableViewCellDelegate

// Called when the user starts swiping the cell.
- (void)swipeTableViewCellDidStartSwiping:(MCSwipeTableViewCell *)cell;

// Called when the user ends swiping the cell.
- (void)swipeTableViewCellDidEndSwiping:(MCSwipeTableViewCell *)cell;

// Called during a swipe.
- (void)swipeTableViewCell:(MCSwipeTableViewCell *)cell didSwipeWithPercentage:(CGFloat)percentage;

单元格删除

在 MCSwipeTableViewCellModeExit 模式下，您可能希望执行一个完美的淡出动画来删除单元格，以下几行将为您提供如何执行它的思路

[cell setSwipeGestureWithView:crossView color:redColor mode:MCSwipeTableViewCellModeExit state:MCSwipeTableViewCellState2 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
    NSLog(@"Did swipe \"Cross\" cell");

    // Code to delete your cell...

}];

您还可以在删除单元格之前请求确认

__weak MCTableViewController *weakSelf = self;

[cell setSwipeGestureWithView:crossView color:redColor mode:MCSwipeTableViewCellModeExit state:MCSwipeTableViewCellState1 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) {
    NSLog(@"Did swipe \"Cross\" cell");

    __strong MCTableViewController *strongSelf = weakSelf;
    strongSelf.cellToDelete = cell;

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Delete?"
                                                        message:@"Are you sure your want to delete the cell?"
                                                       delegate:self
                                              cancelButtonTitle:@"No"
                                              otherButtonTitles:@"Yes", nil];
    [alertView show];
}];

然后处理 UIAlertView 操作

#pragma mark - UIAlertViewDelegate

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {

    // No
    if (buttonIndex == 0) {
        [_cellToDelete swipeToOriginWithCompletion:^{
            NSLog(@"Swiped back");
        }];
        _cellToDelete = nil;
    }

    // Yes
    else {
        // Code to delete your cell...
    }
}

在演示项目中也有一个示例，我建议您看看。

修改触发百分比

如果默认的触发限制不符合您的需求，您可以使用 firstTrigger (默认: 25%) 和 secondTrigger (默认: 75%) 属性来更改它们。

cell.firstTrigger = 0.1;
cell.secondTrigger = 0.5;

重置单元格位置

在使用 MCSwipeTableViewCellModeExit 模式时，您可以使用 -swipeToOriginWithCompletion: 方法将单元格放回其位置

[cell swipeToOriginWithCompletion:^{
    NSLog(@"Cell swiped back!");
}];

安装

兼容性

本库不兼容自动布局，因此您需要在自己的 xib 属性中禁用自动布局。

需求

  • iOS >= 5.0
  • ARC

联系方式

Ali Karagoz

许可

MCSwipeTableViewCell 在 MIT 许可下可用。有关更多信息，请参阅 LICENSE 文件。