首页 > 移动平台 > 详细

iOS 支付宝首页拖放按钮效果实现

时间:2015-06-22 23:31:05      阅读:577      评论:0      收藏:0      [点我收藏+]

1.实现原理:

将所有按钮放在viewcontroller的_buttonArray集合中,同时赋值给按钮中

增加长按手势的响应

当手势坐标进入其他按钮的frame时,调整集合中按钮位置;

当长按手势开始,放大按钮; 结束时还原按钮

2.附源码及注释[按钮调控没有动画]

@interface UIDragButton : UIButton {
    CGPoint _prePoint;                  // 移动过程中的上一个点
    BOOL    _isPress;                   // 是否按下:实现过程未用到
    CGPoint _framePoint;                // 未放大情况下frame的左上角坐标
    CGRect  _frameRect;                 // 未放大情况下frame值
}

@property (nonatomic, assign) NSMutableArray *buttonArray;  // button集合
@property (nonatomic, assign) NSInteger      indexOfArray;  // 当前按钮在集合中的下标

// 移动动画,实现过程未用到,暂不能用
- (void)moveTo:(CGRect)rect Animation:(BOOL)flag;
// 初始化一些样式,即长按手势
- (void)initStyle;

@end

.m

@implementation UIDragButton

/*
 * 样式初始化,即手势初始化
 **/
- (void)initStyle {
    self.backgroundColor = [UIColor whiteColor];
    self.layer.borderWidth = 0.3;
    self.layer.borderColor = [UIColor grayColor].CGColor;
    UILongPressGestureRecognizer * longPressGr = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressToDo:)];
    longPressGr.minimumPressDuration = 1.0;
    [self addGestureRecognizer:longPressGr];
}

#pragma mark - 按钮尺寸更改
// 放大
- (void)changeBig {
    self.transform = CGAffineTransformScale(self.transform,1.25,1.25);
    self.backgroundColor = [UIColor colorWithHexString:@"E0E0E0" alpha:1];
}

// 还原
- (void)changeBack {
    self.transform = CGAffineTransformScale(self.transform,0.8,0.8);
    // 按钮放大还原后会有偏移,所以要设置回正常位置,80和100是按钮尺寸
    self.frame = CGRectMake(_framePoint.x, _framePoint.y, 80, 100);
}

#pragma mark - 手势管理
/*
 * 手势响应,并判断状态
 **/
- (void)longPressToDo:(UILongPressGestureRecognizer *)press {
    if ([press state] == UIGestureRecognizerStateBegan) {
        [self beganTouch:press];
        [self changeBig]; // 放大
    }
    else if ([press state] == UIGestureRecognizerStateChanged) {
        [self movedTouch:press];
    }
    else if ([press state] == UIGestureRecognizerStateEnded){
        [self endedTouch:press];
    }
}

/*
 * 手势长按开始
 **/
- (void)beganTouch:(UILongPressGestureRecognizer *)press {
    _prePoint = [press locationInView:self];
    _frameRect = self.frame;
    _framePoint = self.frame.origin;
    // 该通知用于告诉controller点击的是第几个按钮,用于将该按钮放在最上层
    [[NSNotificationCenter defaultCenter] postNotificationName:@"buttonChanged" object:[NSNumber numberWithInteger:_indexOfArray]];
}

/*
 * 手势长按结束
 **/
- (void)endedTouch:(UILongPressGestureRecognizer *)press {
    _prePoint = [press locationInView:self];
    [self changeBack];
    self.backgroundColor = [UIColor whiteColor];
}

/*
 * 长按过程中移动
 **/
- (void)movedTouch:(UILongPressGestureRecognizer *)press {
    CGPoint now = [press locationInView:self];
    
    NSInteger x = now.x - _prePoint.x;
    NSInteger y = now.y - _prePoint.y;
    self.frame = CGRectMake(self.frame.origin.x+x, self.frame.origin.y+y, self.frame.size.width, self.frame.size.height);
    [self placeIsChanged:CGPointMake(self.frame.origin.x + _prePoint.x, self.frame.origin.y + _prePoint.y)];
}

#pragma mark - 按钮调整
/*
 * 判断当前按钮位置是否变化,并进行调整
 **/
- (void)placeIsChanged:(CGPoint)point {
    for (NSInteger i = 0; i < [self.buttonArray count]; i++) {
        if ([self pointIn:point rect:((UIButton *)[_buttonArray objectAtIndex:i]).frame]
            && _indexOfArray != i) {
            [self adjustButtons:i];
        }
    }
}

/*
 * 判断点是否在rect内
 **/
- (BOOL)pointIn:(CGPoint)point rect:(CGRect)rect {
    if (point.x > rect.origin.x && point.y > rect.origin.y && point.x < rect.origin.x+rect.size.width && point.y < rect.origin.y+rect.size.height) {
        return YES;
    }
    return NO;
}

/*
 * 调整按钮位置
 **/
- (void)adjustButtons:(NSInteger)index {
    CGRect rect = ((UIButton *)[_buttonArray objectAtIndex:index]).frame;
    NSInteger i = 0;
    // 将靠前的按钮移动到靠后的位置
    if (_indexOfArray < index) {
        // 将上一个按钮的位置赋值给当前按钮
        for (i = index; i > _indexOfArray+1; i--) {
            //[((UIDragButton *)[_buttonArray objectAtIndex:i]) moveTo:((UIDragButton *)[_buttonArray objectAtIndex:i-1]).frame Animation:YES];
            ((UIDragButton *)[_buttonArray objectAtIndex:i]).frame = ((UIDragButton *)[_buttonArray objectAtIndex:i-1]).frame;
        }
        ((UIDragButton *)[_buttonArray objectAtIndex:i]).frame = _frameRect;
        _frameRect = rect;
        
        // 调整顺序  保证数组中按钮的frame按顺序排列
        for (i = _indexOfArray; i < index; i++) {
            [_buttonArray exchangeObjectAtIndex:i withObjectAtIndex:i+1];
            ((UIDragButton *)[_buttonArray objectAtIndex:i]).indexOfArray = i;
        }
        ((UIDragButton *)[_buttonArray objectAtIndex:index]).indexOfArray = index;
    }
    else { // 将靠后的按钮移动到前边
        // 将上一个按钮的位置赋值给当前按钮
        for (i = index; i < _indexOfArray-1; i++) {
            ((UIDragButton *)[_buttonArray objectAtIndex:i]).frame = ((UIDragButton *)[_buttonArray objectAtIndex:i+1]).frame;
        }
        ((UIDragButton *)[_buttonArray objectAtIndex:i]).frame = _frameRect;
        _frameRect = rect;
        
        // 调整顺序  保证数组中按钮的frame按顺序排列
        for (i = _indexOfArray; i > index; i--) {
            [_buttonArray exchangeObjectAtIndex:i withObjectAtIndex:i-1];
            ((UIDragButton *)[_buttonArray objectAtIndex:i]).indexOfArray = i;
        }
        ((UIDragButton *)[_buttonArray objectAtIndex:index]).indexOfArray = index;
    }
    _framePoint = _frameRect.origin;
}

#pragma mark - 按钮移动动画
- (void)moveTo:(CGRect)rect Animation:(BOOL)flag {
    if (flag) {
        // 计算偏移并移动
        float x = rect.origin.x - self.frame.origin.x;
        float y = rect.origin.y - self.frame.origin.y;
        [self.layer addAnimation:[self moveX:0.1 X:[NSNumber numberWithFloat:x]] forKey:nil];
        [self.layer addAnimation:[self moveY:0.1 Y:[NSNumber numberWithFloat:y]] forKey:nil];
    }
    else {
        self.frame = rect;
    }
}

- (CABasicAnimation *)moveX:(float)time X:(NSNumber *)x  // 横向移动
{
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    animation.toValue=x;
    animation.duration=time;                    // 动画持续时间
    animation.removedOnCompletion=NO;
    animation.fillMode=kCAFillModeForwards;
    return animation;
}

- (CABasicAnimation *)moveY:(float)time Y:(NSNumber *)y  // 纵向移动
{
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    animation.toValue=y;
    animation.duration=time;
    animation.removedOnCompletion=NO;
    animation.fillMode=kCAFillModeForwards;
    return animation;
}

@end


iOS 支付宝首页拖放按钮效果实现

原文:http://my.oschina.net/littleDog/blog/469527

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!