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

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/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,277评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,689评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,624评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,356评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,402评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,292评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,135评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,992评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,429评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,492评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,092评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2赞 354

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,104评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,102评论 4赞 62
  • Android 错误页面
    Android开发中，错误页面，空页面非常的常见，例如当数据请求为空时要显示空页面，当数据请求失败时要显示错误页面...
    4e70992f13e7阅读 1,688评论 0赞 3
  • 一路走来，能留在你记忆里的老师有几个？
    时光如水，无时无刻不在冲刷生命的河床，回首往事，能记起的，都是特别的。 我能记起的老师有三个：刘老师、王老师和张老...
    暮香阅读 229评论 0赞 0
  • 【0713晨读感悟】自我介绍
    要给人留下深刻的印象，除了形象上要多加打点，一个好的自我介绍也是必不可少。 “良好的人际关系始于不断的自我介绍。”...
    羽扇纶巾_Q酱阅读 513评论 0赞 1