iOS-一句话仿秒拍、支付宝“更多”长按移动View，动态动画

作者: 东方诗空 | 来源:发表于2016-11-16 21:14 被阅读0次

iOS-一句话仿秒拍、支付宝“更多”长按移动View，动态动画

1113.gif

最近，项目里面有个需求就是仿秒拍、支付宝“更多”长按移动View，动态动画。查阅了一下资料也发现有好几种的实现方法，总结以后，其核心方法还是移动过程中获取坐标，通过计算得知需要从哪一个View 移动到哪一个View的位置。而后每次一移动不会改变不会回复原貌。

现把思路和demo封装过程分享给大家，互相学习，如你有更好的思路请评论交流，谢谢。

整体View 为 UIScrollView 布局自定义View JWDItemView.
先介绍JWDItemView

1、JWDItemView 类

JWDItemView.h

#import <UIKit/UIKit.h>

@protocol JWDItemViewDelegate <NSObject>

- (void)beginMoveAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//移动前
- (void)moveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//移动中
- (void)endMoveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//结束移动

- (void)didItemViewAction:(NSString *)tag ;

@end

@interface JWDItemView : UIView

@property (nonatomic, assign) CGPoint     viewPoint;
@property (nonatomic, strong) NSString    *tagid;
@property (nonatomic, strong) NSString    *title;//!< 标题
@property (nonatomic, strong) NSString    *imageName;//!< 图片

@property (nonatomic, assign) id<JWDItemViewDelegate>delegate;//!< <#value#>

- (id)initWithFrame:(CGRect)frame title:(NSString *)title imageName:(NSString *)imageName isAnimation:(BOOL)isAnimation;

@end

JWDItemView.m

#import "JWDItemView.h"

@interface JWDItemView ()

@property (nonatomic, strong)UILabel       *label;//!< <#value#>
@property (nonatomic, strong)UIImageView   *imageView;//!< <#value#>
@property (nonatomic, assign) BOOL         isAnimation;//!< <#value#>

@end

@implementation JWDItemView

- (id)initWithFrame:(CGRect)frame title:(NSString *)title imageName:(NSString *)imageName isAnimation:(BOOL)isAnimation{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        self.title = title;
        self.imageName = imageName;
        self.isAnimation = isAnimation;
        [self setupView];
    }
    return self;
}

- (void)setupView {

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height-50, self.frame.size.width, self.frame.size.height-50)];
    self.label = label;
    label.text = _title;
    label.userInteractionEnabled = YES;
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont systemFontOfSize:15];
    label.textColor = [UIColor grayColor];
    [self addSubview:label];
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50*0.5, 0, self.frame.size.width-50, self.frame.size.height-50)];
    self.imageView = imageView;
    imageView.image = [UIImage imageNamed:self.imageName];
    [self addSubview:imageView];
    
    
    //长按手势
    if (self.isAnimation) {
        UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(viewLongPressGesture:)];
        [self addGestureRecognizer:longGesture];
    }
    
    //轻拍手势
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewtapGesture:)];
    [self addGestureRecognizer:tapGesture];
}

- (void)viewLongPressGesture:(UILongPressGestureRecognizer *)gesture {

    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
                    
            if (self.delegate && [self.delegate respondsToSelector:@selector(beginMoveAction:gesture:)]) {
                [self.delegate beginMoveAction:self.tagid gesture:gesture];
            }
            break;
            
        case UIGestureRecognizerStateChanged:
            if ([self.delegate respondsToSelector:@selector(moveViewAction:gesture:)]) {
                
                [self.delegate moveViewAction:self.tagid gesture:gesture];
            }
            break;
            
        case UIGestureRecognizerStateEnded:
            if ([self.delegate respondsToSelector:@selector(endMoveViewAction:gesture:)]) {
                _label.textColor = [UIColor grayColor];
                [self.delegate endMoveViewAction:self.tagid gesture:gesture];
            }
            break;
            
        default:
            break;
    }
}

- (void)viewtapGesture:(UITapGestureRecognizer *)gesture{
    NSLog(@"点击了");

    if (self.delegate && [self.delegate respondsToSelector:@selector(didItemViewAction:)]) {
        [self.delegate didItemViewAction:self.tagid];
    }
    
}

@end

JWDItemView类，没有什么可说的，就是布局加代理传递点击，长按事件。下面看 JWDSudoKuView 类

2、JWDSudoKuView 类

JWDSudoKuView.h

#import <UIKit/UIKit.h>

@interface JWDSudoKuView : UIScrollView
- (id)initWithFrame:(CGRect)frame withItemTitleArray:(NSMutableArray *)itemTitleArray withItemTagArray:(NSMutableArray *)itemTagArray isAnimation:(BOOL)isAnimation;
@end

一句话实现仿秒拍、支付宝“更多”长按移动View，动态动画的接口。
其中参数 isAnimation 可以控制需要不需要动画。
对于一些坑爹的产品经理，经常改需求那就家常便饭。可能起初产品要求做成没有动画的那就 isAnimation=no. 有一天产品说我们要有动画，你看秒拍里面的动画，挺好的。好的，需要三天，其实两分钟搞定。哈哈！废话少说，看JWDSudoKuView.m

JWDSudoKuView.m

#import "JWDSudoKuView.h"
#import "JWDItemView.h"

#define KScreenWidth    [[UIScreen mainScreen] bounds].size.width
#define KScreenHeight   [[UIScreen mainScreen] bounds].size.height

#define KNum            3  //列数
#define kMarginWidth    (self.frame.size.width/KNum)

@interface JWDSudoKuView ()<JWDItemViewDelegate>

@property(nonatomic, strong)NSMutableArray *itemTagArray;//!< 单个View 的tag
@property(nonatomic, strong)NSMutableArray *itemTitleArray;//!<
@property(nonatomic, strong)NSMutableArray *itemViewArray;//!< <#value#>
@property(nonatomic, strong)UIScrollView   *scrollView;//!< <#value#>
@property(nonatomic, assign)CGPoint        itempoint;//!< <#value#>
@property(nonatomic, assign)JWDItemView    *itemView;//!< <#value#>

@property (nonatomic, assign) BOOL isAnimation;//!< <#value#>

@end

布局

- (id)initWithFrame:(CGRect)frame withItemTitleArray:(NSMutableArray *)itemTitleArray withItemTagArray:(NSMutableArray *)itemTagArray isAnimation:(BOOL)isAnimation{
    self = [super initWithFrame:frame];
    if (self) {
        self.itemTitleArray = itemTitleArray;
        self.itemTagArray = itemTagArray;
        self.isAnimation = isAnimation;
        [self setupView];
    }
    return self;
}

- (void)setupView {

    self.backgroundColor = [UIColor colorWithWhite:0.900 alpha:1.0];
    self.scrollEnabled = YES;
    
    
    self.itemViewArray = [NSMutableArray array];
    
    CGFloat widthx, heighty;
    widthx = 0;
    heighty = 10;
    for (int i = 0; i < self.itemTitleArray.count; i++) {
        
        NSString *title = self.itemTitleArray[i][@"title"];
        NSString *imageName =  self.itemTitleArray[i][@"imageName"];
        
        JWDItemView *itemView = [[JWDItemView alloc] initWithFrame:CGRectMake(widthx, heighty, kMarginWidth-1, kMarginWidth-1) title:title imageName:imageName isAnimation:self.isAnimation];
        itemView.delegate = self;
        [self addSubview:itemView];
        
        widthx = widthx + kMarginWidth;
        if (widthx == KScreenWidth) {
            widthx = 0;
            heighty+=kMarginWidth;
        }
        itemView.tagid = self.itemTagArray[i];
        itemView.viewPoint = itemView.center;
        [self.itemViewArray addObject:itemView];
        
    }
    self.scrollView.contentSize = CGSizeMake(KScreenWidth, heighty);

}

上面代码没话可说，下面重点说几个代理方法

- (void)didItemViewAction:(NSString *)tag {
    NSLog(@"只是点击了");
}

- (void)beginMoveAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture{
    
    CGPoint beginPoint = [gesture locationInView:self.scrollView];
    
    JWDItemView *itemView;
    for (int i = 0; i<self.itemViewArray.count; i++) {
        itemView = self.itemViewArray[i];
        if (tag == itemView.tagid) {
            break;
        }
    }
    [self.scrollView bringSubviewToFront:itemView];
    self.itempoint = itemView.viewPoint;
    itemView.transform = CGAffineTransformMakeScale(1.1, 1.1);
    
    self.itemView = itemView;
    
}

方法：

- (void)beginMoveAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;

在长按起初，获取需要的itemView.viewPoint，保存后面修改使用，并且缩放 itemView.transform = CGAffineTransformMakeScale(1.1, 1.1);

哎，还是把清晰的注释放上吧，就单独拿出来说了。
直接看吧！不卖关子了！

- (void)moveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture {
    
    // 1 获取一定前的 View tagid
    NSInteger fromtagid = [self.itemView.tagid integerValue];

    // 2 计算坐标转换
    // 2.1 实时获取 View 在superview 中的新坐标
    CGPoint newPoint = [gesture locationInView:self.scrollView];
    
    // newPoint.x - self.itemView.frame.origin.x 相减后正好满足 手机屏幕坐标系的 移动方向 但是这是 x 的移动 要转换成 center.x的移动，才能符合过半就移动
    //移动后的X坐标
    CGFloat moveX = newPoint.x - self.itemView.frame.origin.x;
    //移动后的Y坐标
    CGFloat moveY = newPoint.y - self.itemView.frame.origin.y;
    
    // View 随手移动的 center.x
    self.itemView.center = CGPointMake(self.itemView.center.x + moveX-kMarginWidth/2, self.itemView.center.y + moveY-kMarginWidth/2);
    
    // 2.2 获取目标位置
    /**
     知道View 要取得 center.x 那么接下来就是 如何获取 目标View 的 tagid
     有两中情况，1 center.x 还在移动的 首次View中 不做移动排列  2 center.x 超出首次移动的 View中 这时候才去计算 需要达到的目标 tagid
     判断给定的点是否被一个CGRect包含,可以用CGRectContainsPoint函数
     
     */
    NSInteger totagid = [self moveViewOfCenterPoint:self.itemView.center selectItemView:self.itemView itemViewArray:self.itemViewArray];
    
    // 上面已经知道了  fromtagid 和 totagid
    // 3 更改 View在数组中的位置
    // 4 所选中的View有两种情况，在移动过程中向前移动 和 向后移动
    // 4.1 向前移动
    if (totagid<fromtagid-100 && totagid>=0) {
        
        JWDItemView *toView = self.itemViewArray[totagid];
        self.itemView.center = toView.center;
        NSInteger beginIndex = fromtagid-100;
        
        // 记住 self.itemView.center 动画移动完毕后 需要修改数据源
        self.itempoint = toView.viewPoint;
        
        // 遍历执行动画
        for (NSInteger i=beginIndex; i>totagid; i--) {
            
            JWDItemView *itemView1 = self.itemViewArray[i];
            JWDItemView *itemView2 = self.itemViewArray[i-1];
    
            [UIView animateWithDuration:1 animations:^{
                
                itemView2.center = itemView1.viewPoint;
            }];
        }
        
        // 动画完毕后 修改 移动 View 在数组的 索引
        [self.itemViewArray removeObject:self.itemView];
        [self.itemViewArray insertObject:self.itemView atIndex:totagid];
        
        [self updteAllItemView];
    }
    // 4.2 向后移动
    if (totagid>fromtagid-100 && totagid<self.itemTagArray.count) {
        
        JWDItemView *toView = self.itemViewArray[totagid];
        self.itemView.center = toView.center;
        NSInteger beginIndex = fromtagid-100;
        // 记住 self.itemView.center 动画移动完毕后 需要修改数据源
        self.itempoint = toView.viewPoint;
        
        // 遍历执行动画
        for (NSInteger i=beginIndex; i<totagid; i++) {
            JWDItemView *itemView1 = self.itemViewArray[i];
            JWDItemView *itemView2 = self.itemViewArray[i+1];
            [UIView animateWithDuration:1 animations:^{
                
                itemView2.center = itemView1.viewPoint;
            }];
        }
        
        // 动画完毕后 修改 移动 View 在数组的 索引
        [self.itemViewArray removeObject:self.itemView];
        [self.itemViewArray insertObject:self.itemView atIndex:totagid];
        [self updteAllItemView];
        
    }
}
- (void)endMoveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture{
    CGPoint endPoint = [gesture locationInView:self.scrollView];
    
    // 移动结束 收回放大的 View
    self.itemView.center = self.itempoint;
    self.itemView.transform = CGAffineTransformIdentity;
    
}
// 获取目标位置
/**
 知道View 要取得 center.x 那么接下来就是 如何获取 目标View 的 tagid
 有两中情况，
 1 center.x 还在移动的 首次View中 不做移动排列
 2 center.x 超出首次移动的 View中 这时候才去计算 需要达到的目标 tagid
 判断给定的点是否被一个CGRect包含,可以用CGRectContainsPoint函数

 */
- (NSInteger)moveViewOfCenterPoint:(CGPoint)point selectItemView:(UIView *)selectItemView  itemViewArray:(NSMutableArray *)itemViewArray {
    
    for (NSInteger i = 0 ; i<itemViewArray.count; i++) {
        UIView *view = itemViewArray[i];
        if (selectItemView != view) {
            if (CGRectContainsPoint(view.frame, point)) {
                return i;
            }
        }
    }
    return -100;
}

-(void)updteAllItemView {
    
    // 修改 选中 View 的 tagid
    for (NSInteger i=0; i<self.itemViewArray.count; i++) {
        JWDItemView *itemView = self.itemViewArray[i];
        itemView.tagid = self.itemTagArray[i];
        itemView.viewPoint = itemView.center;
    }
}

结语

好了，这就写就是核心代码，其实还想做的方便一点，就是动态改变数据源，这样后台就可以动态对接接口，即时在线上也可以控制相应的个数，也可以根据不同的用户制定个性化数据，这个就留给大家，我后期会更新代码。

完结，感谢阅读，不想说客套话，但还是说一点。如果你有更好的封装思想，请你不吝赐教，因为分享真他妈的是一件快乐的事，原谅我爆粗口，还在分享的喜悦中，有点兴奋。

等着急了把，上地址，喜欢就点个star

demo地址

另外一种思路利用 UICollectionView 实现 http://ios.jobbole.com/90805/

iOS-一句话仿秒拍、支付宝“更多”长按移动View，动态动画

iOS-一句话仿秒拍、支付宝“更多”长按移动View，动态动画

1、JWDItemView 类

2、JWDSudoKuView 类

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS 开发