iOS-一句話仿秒拍、支付寶“更多”長按移動View，動態(tài)動畫

iOS-一句話仿秒拍、支付寶“更多”長按移動View，動態(tài)動畫

1113.gif

最近，項目里面有個需求就是仿秒拍、支付寶“更多”長按移動View，動態(tài)動畫。查閱了一下資料也發(fā)現(xiàn)有好幾種的實現(xiàn)方法，總結(jié)以后，其核心方法還是移動過程中獲取坐標，通過計算得知需要從哪一個View 移動到 哪一個View的位置。而后每次一移動不會改變不會回復原貌。

現(xiàn)把思路和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;//結(jié)束移動

- (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

一句話實現(xiàn)仿秒拍、支付寶“更多”長按移動View，動態(tài)動畫的接口。
其中參數(shù) isAnimation 可以控制需要不需要動畫。
對于一些坑爹的產(chǎn)品經(jīng)理，經(jīng)常改需求那就家常便飯。可能起初產(chǎn)品要求做成沒有動畫的那就 isAnimation=no. 有一天產(chǎn)品說我們要有動畫，你看秒拍里面的動畫，挺好的。好的，需要三天，其實兩分鐘搞定。哈哈！廢話少說，看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  //列數(shù)
#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);

哎，還是把清晰的注釋放上吧，就單獨拿出來說了。
直接看吧！不賣關(guān)子了！

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

    // 2 計算坐標轉(zhuǎn)換
    // 2.1 實時獲取 View 在superview 中的新坐標
    CGPoint newPoint = [gesture locationInView:self.scrollView];
    
    // newPoint.x - self.itemView.frame.origin.x 相減后正好滿足 手機屏幕坐標系的 移動方向 但是這是 x 的移動 要轉(zhuǎn)換成 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函數(shù)
     
     */
    NSInteger totagid = [self moveViewOfCenterPoint:self.itemView.center selectItemView:self.itemView itemViewArray:self.itemViewArray];
    
    // 上面已經(jīng)知道了  fromtagid 和 totagid
    // 3 更改 View在數(shù)組中的位置
    // 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 動畫移動完畢后 需要修改數(shù)據(jù)源
        self.itempoint = toView.viewPoint;
        
        // 遍歷執(zhí)行動畫
        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 在數(shù)組的 索引
        [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 動畫移動完畢后 需要修改數(shù)據(jù)源
        self.itempoint = toView.viewPoint;
        
        // 遍歷執(zhí)行動畫
        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 在數(shù)組的 索引
        [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];
    
    // 移動結(jié)束 收回放大的 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函數(shù)

 */
- (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;
    }
}

結(jié)語

好了，這就寫就是核心代碼，其實還想做的方便一點，就是動態(tài)改變數(shù)據(jù)源，這樣后臺就可以動態(tài)對接接口，即時在線上也可以控制相應(yīng)的個數(shù)，也可以根據(jù)不同的用戶制定個性化數(shù)據(jù)，這個就留給大家，我后期會更新代碼。

完結(jié)，感謝閱讀，不想說客套話，但還是說一點。如果你有更好的封裝思想，請你不吝賜教，因為分享真他媽的是一件快樂的事，原諒我爆粗口，還在分享的喜悅中，有點興奮。

等著急了把，上地址，喜歡就點個star

demo地址

另外一種思路 利用 UICollectionView 實現(xiàn) http://ios.jobbole.com/90805/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,022評論 4贊 61
  • Android開發(fā)中，錯誤頁面，空頁面非常的常見，例如當數(shù)據(jù)請求為空時要顯示空頁面，當數(shù)據(jù)請求失敗時要顯示錯誤頁面...
    4e70992f13e7閱讀 2,068評論 0贊 3
  • 時光如水，無時無刻不在沖刷生命的河床，回首往事，能記起的，都是特別的。 我能記起的老師有三個：劉老師、王老師和張老...
    暮香閱讀 272評論 0贊 0
  • 要給人留下深刻的印象，除了形象上要多加打點，一個好的自我介紹也是必不可少。 “良好的人際關(guān)系始于不斷的自我介紹?！?..
    羽扇綸巾_Q醬閱讀 553評論 0贊 1

友情鏈接更多精彩內(nèi)容