[翻译] SWTableViewCell

SWTableViewCell

An easy-to-use UITableViewCell subclass that implements a swippable content view which exposes utility buttons (similar to iOS 7 Mail Application)

一个非常易用的 UITableViewCell 的子类，实现了左右滑动显示信息视图，提供很多实用的按钮（与iOS7的邮件应用相似）

Functionality

Right Utility Buttons

Utility buttons that become visible on the right side of the Table View Cell when the user swipes left. This behavior is similar to that seen in the iOS apps Mail and Reminders.

当用户左滑时，会在右边显示几个按钮。

Left Utility Buttons

Utility buttons that become visible on the left side of the Table View Cell when the user swipes right.

当用户右滑时，可以显示另外的几个按钮。

Features

• Dynamic utility button scalling. As you add more buttons to a cell, the other buttons on that side get smaller to make room
• Smart selection: The cell will pick up touch events and either scroll the cell back to center or fire the delegate method - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
• 当你向按钮添加更多按钮时会动态的缩放按钮，按钮会变小一点而空出更多的空间
• cell会收集触摸事件（通过代理）

• So the cell will not be considered selected when the user touches the cell while utility buttons are visible, instead the cell will slide back into place (same as iOS 7 Mail App functionality)
• Create utilty buttons with either a title or an icon along with a RGB color
• Tested on iOS 6.1 and above, including iOS 7
• 当滑动cell时，按钮变得可见但没有点击时，cell是不会被认为已经被点选了
• 创建按钮时可以设置一个title或者是一个icon配上一种颜色
• iOS6以上都适配

Usage

Standard Table View Cells

In your tableView:cellForRowAtIndexPath: method you set up the SWTableView cell and add an arbitrary amount of utility buttons to it using the included NSMutableArray+SWUtilityButtons category.

在你的 tableView:cellForRowAtIndexPath: 方法中，需要你来设置 SWTableView 的cell，给那些按钮设置属性，请使用类目 NSMutableArray+SWUtilityButtons

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

    SWTableViewCell *cell = (SWTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if (cell == nil) {
        NSMutableArray *leftUtilityButtons = [NSMutableArray new];
        NSMutableArray *rightUtilityButtons = [NSMutableArray new];

        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.07 green:0.75f blue:0.16f alpha:1.0] 
                        icon:[UIImage imageNamed:@"check.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:1.0f blue:0.35f alpha:1.0] 
                        icon:[UIImage imageNamed:@"clock.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0] 
                        icon:[UIImage imageNamed:@"cross.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.55f green:0.27f blue:0.07f alpha:1.0] 
                        icon:[UIImage imageNamed:@"list.png"]];

        [rightUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.78f green:0.78f blue:0.8f alpha:1.0]
                        title:@"More"];
        [rightUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:0.231f blue:0.188 alpha:1.0f] 
                            title:@"Delete"];

        cell = [[SWTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 
                        reuseIdentifier:cellIdentifier 
                        containingTableView:_tableView // For row height and selection
                        leftUtilityButtons:leftUtilityButtons 
                        rightUtilityButtons:rightUtilityButtons];
        cell.delegate = self;
    }

    NSDate *dateObject = _testArray[indexPath.row];
    cell.textLabel.text = [dateObject description];
    cell.detailTextLabel.text = @"Some detail text";

return cell;
}

Custom Table View Cells

Thanks to Matt Bowman you can now create custom table view cells using Interface Builder that have the capabilities of an SWTableViewCell

The first step is to design your cell either in a standalone nib or inside of a table view using prototype cells. Make sure to set the custom class on the cell in interface builder to the subclass you made for it:

感谢 Matt Bowman 提供的帮助，你也可以创建自定义table view cell，通过 IB 来创建。

第一步，你可以在standalone 的nib 中设置，或者是直接用table view 的引用属性修改。确保你在IB中使用了你指定的这个cell的类

Then set the cell reuse identifier:

设置cell的重用标示

When writing your custom table view cell's code, make sure your cell is a subclass of SWTableViewCell:

然后，写你的table view cell的代码，确保你的cell 是继承自SWTableViewCell的:

#import <SWTableViewCell.h>

@interface MyCustomTableViewCell : SWTableViewCell

@property (weak, nonatomic) UILabel *customLabel;
@property (weak, nonatomic) UIImageView *customImageView;

@end

If you are using a separate nib and not a prototype cell, you'll need to be sure to register the nib in your table view:

如果你用了一个分离的nib文件而不是一个注册的nill，你需要确保你在这个table view 中注册了这个cell

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.tableView registerNib:[UINib nibWithNibName:@"MyCustomTableViewCellNibFileName" bundle:nil] forCellReuseIdentifier:@"MyCustomCell"];
}

Then, in the tableView:cellForRowAtIndexPath: method of your UITableViewDelegate (usually your view controller), initialize your custom cell:

然后，在tableView:cellForRowAtIndexPath:方法中，初始化你的cell

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

    MyCustomTableViewCell *cell = (MyCustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier 
                                                                                           forIndexPath:indexPath];
    __weak MyCustomTableViewCell *weakCell = cell;                                                                                     
    //Do any fixed setup here (will be executed once unless force is set to YES)
    [cell setAppearanceWithBlock:^{
        weakCell.containingTableView = tableView;

        NSMutableArray *leftUtilityButtons = [NSMutableArray new];
        NSMutableArray *rightUtilityButtons = [NSMutableArray new];

        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.07 green:0.75f blue:0.16f alpha:1.0] 
                        icon:[UIImage imageNamed:@"check.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:1.0f blue:0.35f alpha:1.0] 
                        icon:[UIImage imageNamed:@"clock.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0] 
                        icon:[UIImage imageNamed:@"cross.png"]];
        [leftUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.55f green:0.27f blue:0.07f alpha:1.0] 
                        icon:[UIImage imageNamed:@"list.png"]];

        [rightUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:0.78f green:0.78f blue:0.8f alpha:1.0]
                        title:@"More"];
        [rightUtilityButtons sw_addUtilityButtonWithColor:
                        [UIColor colorWithRed:1.0f green:0.231f blue:0.188 alpha:1.0f] 
                            title:@"Delete"];

        weakCell.leftUtilityButtons = leftUtilityButtons;
        weakCell.rightUtilityButtons = rightUtilityButtons;

        weakCell.delegate = self;
    } force:NO];

    cell.customLabel.text = @"Some Text";
    cell.customImageView.image = [UIImage imageNamed:@"MyAwesomeTableCellImage"];
    [cell setCellHeight:cell.frame.size.height];
    return cell;
}

Delegate

The delegate SWTableViewCellDelegate is used by the developer to find out which button was pressed. There are two methods:

这个协议  SWTableViewCellDelegate 是开发者用来区分哪一个按钮被点击了，有两个方法：

- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index;
- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index;

The index signifies which utility button the user pressed, for each side the button indices are ordered from right to left 0...n

不管哪边的按钮，都是根据从左往右，索引下标从0---n

Example

#pragma mark - SWTableViewDelegate

- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index {
    switch (index) {
        case 0:
            NSLog(@"check button was pressed");
            break;
        case 1:
            NSLog(@"clock button was pressed");
            break;
        case 2:
            NSLog(@"cross button was pressed");
            break;
        case 3:
            NSLog(@"list button was pressed");
        default:
            break;
    }
}

- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index {
    switch (index) {
        case 0:
            NSLog(@"More button was pressed");
            break;
        case 1:
        {
            // Delete button was pressed
            NSIndexPath *cellIndexPath = [self.tableView indexPathForCell:cell];

            [_testArray removeObjectAtIndex:cellIndexPath.row];
            [self.tableView deleteRowsAtIndexPaths:@[cellIndexPath] 
                    withRowAnimation:UITableViewRowAnimationAutomatic];
            break;
        }
        default:
            break;
    }
}

(This is all code from the included example project)

Gotchas

Custom UITableViewCell content

• Accessing view of the cell object or managing the predefined content still works fine. So for example if you change the cell's imageView or backgroundView, SWTableViewCell will still work as expected
• Don't use accessory views in your cell, because they live above the contentView and will stay in place when the cell scrolls.
• 处理这个cell本身的view以及管理预先定义的内容还是可以正常工作的。所以，你修改了cell的 imageView 或者 backgroundView 还是能达到预期的效果的。
• 不要使用额外的view了，因为，他们加载在 contentView之上，当这个cell滑动时，他还停留在上面不动。

Seperator Insets

• If you have left utility button on iOS 7, I recommend changing your Table View's seperatorInset so the seperator stretches the length of the screen

   tableView.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0); 

• 如果你在iOS7上使用了左侧的按钮，我建议你修改 Table View 的分割插入模式属性，然后就会扩展cell的一部分大小了。