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

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

1113.gif

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

現(xiàn)把思路和demo封裝過程分享給大家，互相學(xué)習(xí)，如你有更好的思路請?jiān)u論交流，謝謝。

整體View 為 UIScrollView 布局自定義View JWDItemView.
先介紹JWDItemView

1、JWDItemView 類

JWDItemView.h

#import <UIKit/UIKit.h>

@protocol JWDItemViewDelegate <NSObject>

- (void)beginMoveAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//移動(dòng)前
- (void)moveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//移動(dòng)中
- (void)endMoveViewAction:(NSString *)tag gesture:(UILongPressGestureRecognizer *)gesture;//結(jié)束移動(dòng)

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

@end

@interface JWDItemView : UIView

@property (nonatomic, assign) CGPoint     viewPoint;
@property (nonatomic, strong) NSString    *tagid;
@property (nonatomic, strong) NSString    *title;//!< 標(biāo)題
@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(@"點(diǎn)擊了");

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

@end

JWDItemView類，沒有什么可說的，就是布局加代理傳遞點(diǎn)擊，長按事件。下面看 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

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

}

上面代碼沒話可說，下面重點(diǎn)說幾個(gè)代理方法

- (void)didItemViewAction:(NSString *)tag {
    NSLog(@"只是點(diǎn)擊了");
}

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

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

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

    // 2 計(jì)算坐標(biāo)轉(zhuǎn)換
    // 2.1 實(shí)時(shí)獲取 View 在superview 中的新坐標(biāo)
    CGPoint newPoint = [gesture locationInView:self.scrollView];
    
    // newPoint.x - self.itemView.frame.origin.x 相減后正好滿足 手機(jī)屏幕坐標(biāo)系的 移動(dòng)方向 但是這是 x 的移動(dòng) 要轉(zhuǎn)換成 center.x的移動(dòng)，才能符合過半就移動(dòng)
    //移動(dòng)后的X坐標(biāo)
    CGFloat moveX = newPoint.x - self.itemView.frame.origin.x;
    //移動(dòng)后的Y坐標(biāo)
    CGFloat moveY = newPoint.y - self.itemView.frame.origin.y;
    
    // View 隨手移動(dòng)的 center.x
    self.itemView.center = CGPointMake(self.itemView.center.x + moveX-kMarginWidth/2, self.itemView.center.y + moveY-kMarginWidth/2);
    
    // 2.2 獲取目標(biāo)位置
    /**
     知道View 要取得 center.x 那么接下來就是 如何獲取 目標(biāo)View 的 tagid
     有兩中情況，1 center.x 還在移動(dòng)的 首次View中 不做移動(dòng)排列  2 center.x 超出首次移動(dòng)的 View中 這時(shí)候才去計(jì)算 需要達(dá)到的目標(biāo) tagid
     判斷給定的點(diǎn)是否被一個(gè)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有兩種情況，在移動(dòng)過程中向前移動(dòng) 和 向后移動(dòng)
    // 4.1 向前移動(dòng)
    if (totagid<fromtagid-100 && totagid>=0) {
        
        JWDItemView *toView = self.itemViewArray[totagid];
        self.itemView.center = toView.center;
        NSInteger beginIndex = fromtagid-100;
        
        // 記住 self.itemView.center 動(dòng)畫移動(dòng)完畢后 需要修改數(shù)據(jù)源
        self.itempoint = toView.viewPoint;
        
        // 遍歷執(zhí)行動(dòng)畫
        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;
            }];
        }
        
        // 動(dòng)畫完畢后 修改 移動(dòng) View 在數(shù)組的 索引
        [self.itemViewArray removeObject:self.itemView];
        [self.itemViewArray insertObject:self.itemView atIndex:totagid];
        
        [self updteAllItemView];
    }
    // 4.2 向后移動(dòng)
    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 動(dòng)畫移動(dòng)完畢后 需要修改數(shù)據(jù)源
        self.itempoint = toView.viewPoint;
        
        // 遍歷執(zhí)行動(dòng)畫
        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;
            }];
        }
        
        // 動(dòng)畫完畢后 修改 移動(dòng) 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];
    
    // 移動(dòng)結(jié)束 收回放大的 View
    self.itemView.center = self.itempoint;
    self.itemView.transform = CGAffineTransformIdentity;
    
}
// 獲取目標(biāo)位置
/**
 知道View 要取得 center.x 那么接下來就是 如何獲取 目標(biāo)View 的 tagid
 有兩中情況，
 1 center.x 還在移動(dòng)的 首次View中 不做移動(dòng)排列
 2 center.x 超出首次移動(dòng)的 View中 這時(shí)候才去計(jì)算 需要達(dá)到的目標(biāo) tagid
 判斷給定的點(diǎn)是否被一個(gè)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é)語

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

完結(jié)，感謝閱讀，不想說客套話，但還是說一點(diǎn)。如果你有更好的封裝思想，請你不吝賜教，因?yàn)榉窒碚嫠麐尩氖且患鞓返氖拢徫冶挚?，還在分享的喜悅中，有點(diǎn)興奮。

等著急了把，上地址，喜歡就點(diǎn)個(gè)star

demo地址

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

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

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

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

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