选中时，将滑动视图添加到表格单元格 [英] Adding a sliding view to a table cell when selected

问题描述

我有一个动态表视图，其中包含从db填充的单元格。
选择单元格后，用户应该可以选择其他几个选项。
我知道如何在选择单元格时推送另一个视图但我不喜欢这种方法。
例如，如果相同的单元格可以翻转并显示选项（然后翻转）可能会滑动，这可能会更好。
或者整个单元格可以从屏幕上滑出来显示选项，或者另一个视图可以从单元格向下滑动然后再向上滑动。

I have a dynamic table view with cells populating from a db. When a cell is selected the user should have the possibility to choose few other options. I know how to push another view when the cell is selected but I don't like this approach graphically. It could be better if, for example, the same cell could flip over and show the options (then flip back) maybe with a swipe. Or the entire cell could slide off the screen revealing the options, or another view could slide down from the cell and then slide back up.

其中哪一个解决方案是最容易做到的？
有人能指出我正确的方向吗？我当然不需要代码，我在这里学习，我只需要知道要看什么。
到现在为止，我已经阅读了关于UITableViewCell的子类化的内容，但老实说，我还没有得到它。
任何输入都将非常感激。

Which of these solutions is the easiest to do? Can anyone point me to the right direction? I don't need the code of course, I'm here to learn and I just need to know what to look at. Until now, I've read something about subclassing the UITableViewCell, but, honestly, I haven't got it yet. Any input will be greatly appreciated.

推荐答案

您将使用带有前景和背景视图的UITableViewCell子类， UIPanGestureRecognizer。这个识别器会触发滑动并处理前景视图的移动。

You would use a UITableViewCell subclass with a foreground and a background view and a UIPanGestureRecognizer. this recognizer will trigger the swipe and handles the moving of the foreground view.

说，你会在这里找到一个实现：https://github.com/spilliams/sparrowlike

that said, you'll find a implementation here: https://github.com/spilliams/sparrowlike

重要位：

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    // Configure the cell...
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [panGestureRecognizer setDelegate:self];
    [cell addGestureRecognizer:panGestureRecognizer];

    return cell;
}

#pragma mark - Gesture recognizer delegate
- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)panGestureRecognizer
{
    CustomCell *cell = (CustomCell *)[panGestureRecognizer view];
    CGPoint translation = [panGestureRecognizer translationInView:[cell superview] ];
    return (fabs(translation.x) / fabs(translation.y) > 1) ? YES : NO;
}

#pragma mark - Gesture handlers

-(void)handlePan:(UIPanGestureRecognizer *)panGestureRecognizer
{
    float threshold = (PAN_OPEN_X+PAN_CLOSED_X)/2.0;
    float vX = 0.0;
    float compare;
    NSIndexPath *indexPath = [self.tableView indexPathForCell:(CustomCell *)[panGestureRecognizer view] ];
    UIView *view = ((CustomCell *)panGestureRecognizer.view).frontView;

    switch ([panGestureRecognizer state]) {
        case UIGestureRecognizerStateBegan:
            if (self.openCellIndexPath.section != indexPath.section || self.openCellIndexPath.row != indexPath.row) {
                [self snapView:((CustomCell *)[self.tableView cellForRowAtIndexPath:self.openCellIndexPath]).frontView toX:PAN_CLOSED_X animated:YES];
                [self setOpenCellIndexPath:nil];
                [self setOpenCellLastTX:0];
            }
            break;
        case UIGestureRecognizerStateEnded:
            vX = (FAST_ANIMATION_DURATION/2.0)*[panGestureRecognizer velocityInView:self.view].x;
            compare = view.transform.tx + vX;
            if (compare > threshold) {
                [self snapView:view toX:PAN_CLOSED_X animated:YES];
                [self setOpenCellIndexPath:nil];
                [self setOpenCellLastTX:0];
            } else {
                [self snapView:view toX:PAN_OPEN_X animated:YES];
                [self setOpenCellIndexPath:[self.tableView indexPathForCell:(CustomCell *)panGestureRecognizer.view] ];
                [self setOpenCellLastTX:view.transform.tx];
            }
            break;
        case UIGestureRecognizerStateChanged:
            compare = self.openCellLastTX+[panGestureRecognizer translationInView:self.view].x;
            if (compare > PAN_CLOSED_X)
                compare = PAN_CLOSED_X;
            else if (compare < PAN_OPEN_X)
                compare = PAN_OPEN_X;
            [view setTransform:CGAffineTransformMakeTranslation(compare, 0)];
            break;
        default:
            break;
    }
}
-(void)snapView:(UIView *)view toX:(float)x animated:(BOOL)animated
{
    if (animated) {
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        [UIView setAnimationDuration:FAST_ANIMATION_DURATION];
    }

    [view setTransform:CGAffineTransformMakeTranslation(x, 0)];

    if (animated) {
        [UIView commitAnimations];
    }
}

这篇关于选中时，将滑动视图添加到表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！