Farlanki.

YALContextMenu

字数统计: 830阅读时长: 4 min
2016/06/06 Share

YALContextMenu

作为菜单使用的YALContextMenu其实是一个UITableView.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
- (void)showInView:(UIView *)superview withEdgeInsets:(UIEdgeInsets)edgeInsets animated:(BOOL)animated {

    if (self.animatingState!=Stable) {
        return;
    }
    
    for (UITableViewCell<YALContextMenuCell> *aCell in [self visibleCells]) {
        aCell.contentView.hidden = YES;
    }
    
    self.dismissalIndexpath = nil;
    
    [superview addSubViewiew:self withSidesConstrainsInsets:edgeInsets];
    
    if (animated) {
        self.animatingState = Showing;
        self.alpha = 0;
        
        [self setUserInteractionEnabled:NO];
        
        [UIView animateWithDuration:self.animationDuration animations:^{
            self.alpha = 1;
        } completion:^(BOOL finished) {
            [self show:YES visibleCellsAnimated:YES];
            [self setUserInteractionEnabled:YES];
        }];
        
    } else {
        [self show:YES visibleCellsAnimated:NO];
    }
}

- (void)addSubViewiew:(UIView *)view withSidesConstrainsInsets:(UIEdgeInsets)insets {
    NSParameterAssert(view);
    
    [view setTranslatesAutoresizingMaskIntoConstraints:NO];
    
    [self addSubview:view];
    
    [self addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                     attribute:NSLayoutAttributeTop
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:self
                                                     attribute:NSLayoutAttributeTop
                                                    multiplier:1.0
                                                      constant:insets.top]];
    
    [self addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                     attribute:NSLayoutAttributeLeading
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:self
                                                     attribute:NSLayoutAttributeLeading
                                                    multiplier:1.0
                                                      constant:insets.left]];
    
    [self addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                     attribute:NSLayoutAttributeBottom
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:self
                                                     attribute:NSLayoutAttributeBottom
                                                    multiplier:1.0
                                                      constant:insets.bottom]];
    
    [self addConstraint:[NSLayoutConstraint constraintWithItem:view
                                                     attribute:NSLayoutAttributeTrailing
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:self
                                                     attribute:NSLayoutAttributeTrailing
                                                    multiplier:1.0
                                                      constant:insets.right]];
}

在UIView的一个extension中添加了加入subview并且设置constraint的方法.
先显示UITableView的背景,再通过[self show:YES visibleCellsAnimated:YES];显示各个cell.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
- (void)show:(BOOL)show visibleCellsAnimated:(BOOL)animated {
    NSArray *visibleCellsIndexPahts = [self indexPathsForVisibleRows];
    NSInteger firstVisibleRowIndex = [(NSIndexPath *)visibleCellsIndexPahts.firstObject row];
    NSInteger lastVisibleRowIndex = [(NSIndexPath *)visibleCellsIndexPahts.lastObject row];
    
    if (visibleCellsIndexPahts.count == 0 || self.animatingIndex > lastVisibleRowIndex) {
        self.animatingIndex = 0;
        [self setUserInteractionEnabled:YES];
        [self reloadData];
        self.animatingState = Stable;
        return;
    }
    
    NSIndexPath *animatingIndexPath = [NSIndexPath indexPathForRow:self.animatingIndex inSection:0];
    UITableViewCell<YALContextMenuCell> *visibleCell = (UITableViewCell<YALContextMenuCell> *)[self cellForRowAtIndexPath:animatingIndexPath];
    if (visibleCell) {
        [self prepareCellForShowAnimation:visibleCell];
        [visibleCell contentView].hidden = NO;
        Direction direction;
        if (self.animatingIndex == firstVisibleRowIndex) {
            direction = self.menuItemsSide == Right ? right : left;
        } else {
            direction = self.menuItemsAppearanceDirection == FromBottomToTop ? bottom : top;
        }
        
        [self show:show cell:visibleCell animated:animated direction:direction clockwise:NO completion:^(BOOL completed) {
            // ignore flag 'completed', cause if user scroll out animating cell, it will be false and menu will be empty(
            self.animatingIndex++;
            [self show:show visibleCellsAnimated:animated];
            //loop
        }];
        
    } else {
        // user scroolled animatingCell, so animate from first visible again
        self.animatingIndex = firstVisibleRowIndex;
        [self show:show visibleCellsAnimated:animated];
    }
}

在动画的completion block中再次调用这个方法,直到所有cell被显示.
注意这里调用了[self prepareCellForShowAnimation:visibleCell]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (void)prepareCellForShowAnimation:(UITableViewCell<YALContextMenuCell> *)cell {
    
    [self resetAnimatedIconForCell:cell];
    
    Direction direction;
    BOOL clockwise;
    if ([self indexPathForCell:cell].row == 0) {
        direction = self.menuItemsSide == Right ? right : left;
        clockwise = self.menuItemsSide == Right ? NO : YES;
    } else {
        direction = self.menuItemsAppearanceDirection == FromBottomToTop ? bottom : top;
        clockwise = self.menuItemsAppearanceDirection == FromBottomToTop ? YES : NO;
    }
    
    [self show:NO cell:cell animated:NO direction:direction clockwise:clockwise completion:nil];
}

这个方法是通过设置clockwise,先将各个cell翻转到动画翻转的反方向,之后进行一次动画翻转的时候就能让cell回复正常.除此之外还重设了icon.layer的锚点,transform.

准备工作完成后,调用

1
2
3
4
5
6
[self show:show cell:visibleCell animated:animated direction:direction clockwise:NO completion:^(BOOL completed) {
            // ignore flag 'completed', cause if user scroll out animating cell, it will be false and menu will be empty(
            self.animatingIndex++;
            [self show:show visibleCellsAnimated:animated];
            //loop
        }];

具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
- (void)show:(BOOL)show
        cell:(UITableViewCell<YALContextMenuCell> *)cell
    animated:(BOOL)animated
   direction:(Direction)direction
   clockwise:(BOOL)clockwise
  completion:(completionBlock)completed {
    
    UIView *icon = [cell animatedIcon];
    UIView *content = [cell animatedContent];
    
    
    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0/200; //Add the perspective
    
    CGFloat rotation = 90;
    if (clockwise) {
        rotation = -rotation;
    }

    if (show) {
        rotation = 0;
    }
    
    switch (direction) {
        case left: {
            [self setAnchorPoint:CGPointMake(0, 0.5) forView:icon];
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, DEGREES_TO_RADIANS(rotation), 0.0f, 1.0f, 0.0f);
            break;
        }
        case right: {
            [self setAnchorPoint:CGPointMake(1, 0.5) forView:icon];
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, DEGREES_TO_RADIANS(rotation), 0.0f, 1.0f, 0.0f);
            break;
        }
        case top: {
            [self setAnchorPoint:CGPointMake(0.5, 0.0) forView:icon];
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, DEGREES_TO_RADIANS(rotation), 1.0f, 0.0f, 0.0f);
            break;
        }
        case bottom: {
            [self setAnchorPoint:CGPointMake(0.5, 1) forView:icon];
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, DEGREES_TO_RADIANS(rotation), 1.0f, 0.0f, 0.0f);
            break;
        }
            
        default:
            break;
    }
    
    if (animated) {
        [UIView animateWithDuration:self.animationDuration animations:^{
             icon.layer.transform = rotationAndPerspectiveTransform;
             content.alpha = show;
         } completion:^(BOOL finished) {
             if (completed) {
                 completed(finished);
             }
         }];
        
    } else {
        icon.layer.transform = rotationAndPerspectiveTransform;
        content.alpha = show;
        if (completed) {
            completed(YES);
        }
    }
}

使用了CATransform3DIdentity对icon.layer进行转换.

CATALOG
Total : 85
2021
2020
2019
2018
2017
2016
2015
2014