iOS-一句话仿秒拍、支付宝“更多”长按移动View，动态动画
1113.gif
最近，项目里面有个需求就是仿秒拍、支付宝“更多”长按移动View，动态动画。查阅了一下资料也发现有好几种的实现方法，总结以后，其核心方法还是移动过程中获取坐标，通过计算得知需要从哪一个View 移动到 哪一个View的位置。而后每次一移动不会改变不会回复原貌。
现把思路和demo封装过程分享给大家，互相学习，如你有更好的思路请评论交流，谢谢。
整体View 为 UIScrollView 布局自定义View JWDItemView.
先介绍JWDItemView
1、JWDItemView 类
JWDItemView.h
#import
@protocol JWDItemViewDelegate
- (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) iddelegate;//!< <#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
@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 ()
@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方法：
- (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=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 结语
好了，这就写就是核心代码，其实还想做的方便一点，就是动态改变数据源，这样后台就可以动态对接接口，即时在线上也可以控制相应的个数，也可以根据不同的用户制定个性化数据，这个就留给大家，我后期会更新代码。
完结，感谢阅读，不想说客套话，但还是说一点。如果你有更好的封装思想，请你不吝赐教，因为分享真他妈的是一件快乐的事，原谅我爆粗口，还在分享的喜悦中，有点兴奋。
等着急了把，上地址，喜欢就点个star
demo地址
另外一种思路 利用 UICollectionView 实现 http://ios.jobbole.com/90805/