android层叠式卡片横向轮播,Draggable Card-可拖动层叠卡片轮播的实现

今天分享一个层叠卡片的拖动效果，好，现在开始一步一步来看是怎么实现的，定的是三张图片。

1、第一步当然是创建三个图片，首先从最小的一张开始创建到顶部最大一张。来看一下效果图：

代码也很简单，实现一个for循环创建便可。

for (int i = 0; i < DEFAULT_NUMBER; i++) {

SwipeImageView *swipeV = [[SwipeImageView alloc] initWithFrame:CGRectMake(((kDeviceWidth - Width)/2 + 20*(DEFAULT_NUMBER-i)), ((kDeviceHeight - Height)/2 - 20*(DEFAULT_NUMBER-i)), Width - 20*(DEFAULT_NUMBER-i)*2, Height - 20*(DEFAULT_NUMBER-i)*2)];

swipeV.showImageV.backgroundColor = [UIColor randomColor];

swipeV.tag = i;

swipeV.alpha = (i+1)*0.3<=0.9?(i+1)*0.3+0.1:(i+1)*0.3;

[self.view addSubview:swipeV];

//用户只可以划动第一个，其余各个禁止划动

if (i == 2) {

swipeV.userInteractionEnabled = YES;

}

else

{

swipeV.userInteractionEnabled = NO;

}

[_viewArr addObject:swipeV];

}

效果如下：

2、为View添加下拉手势，下拉时将View放在视图框的下部分，从而从视图中消失；然后再放置在视图外的上部分。下面来看一下原理图：

嗯~，明白了原理就好办了，实现代码：

//手势动画

- (void) swipeDown:(UISwipeGestureRecognizer *)swipeG

{

[UIView animateWithDuration:0.5 animations:^{

//拖动后使view往下掉，从视图中消失

self.center = CGPointMake(kDeviceWidth/2, kDeviceHeight+150);

} completion:^(BOOL finished) {

//使view放在视图的顶部

self.center = CGPointMake(kDeviceWidth/2, -60);

if (self.block) {

self.block(self);

}

}];

}

3、最顶部的一张图片离开视图时，接下来需要放在最后一张后面，这一部分可以通过block来实现，当然还有其他的方法，这里就不举例了。来看一下代码是怎么实现的，需要调用sendSubviewToBack:方法。

swipeV.block = ^(SwipeImageView *theImageV)

{

//第一张放到最后面

[UIView animateWithDuration:0.5 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{

SwipeImageView *changeV = [[SwipeImageView alloc] init];

changeV = _viewArr[2];

changeV.frame = CGRectMake(((kDeviceWidth - Width)/2 + 60), ((kDeviceHeight - Height)/2 - 60), (Width - 20*(DEFAULT_NUMBER-0)*2), (Height - 20*(DEFAULT_NUMBER-0)*2));

changeV.viewFrame = CGRectMake(0, 0, (Width - 20*(DEFAULT_NUMBER-0)*2), (Height - 20*(DEFAULT_NUMBER-0)*2));

[self.view sendSubviewToBack:changeV];

[_viewArr removeLastObject];

changeV.tag = 0;

changeV.alpha = (0+1)*0.3;

changeV.userInteractionEnabled = NO;

[_viewArr insertObject:changeV atIndex:0];

} completion:^(BOOL finished) {

}];

};

4、接下来就需要将第二、三张图片往前推，使得能够不断轮播。

//往前推时改变frame

- (void) changeViewFrame:(NSInteger)index withEnabled:(BOOL)b

{

SwipeImageView *changeV = [[SwipeImageView alloc] init];

changeV = _viewArr[index];

changeV.frame = CGRectMake(((kDeviceWidth - Width)/2 + 20*(DEFAULT_NUMBER-index)), ((kDeviceHeight - Height)/2 - 20*(DEFAULT_NUMBER-index)), (Width - 20*(DEFAULT_NUMBER-index)*2), (Height - 20*(DEFAULT_NUMBER-index)*2));

changeV.viewFrame = CGRectMake(0, 0, (Width - 20*(DEFAULT_NUMBER-index)*2), (Height - 20*(DEFAULT_NUMBER-index)*2));

changeV.tag = index;

changeV.alpha = (index+1)*0.3<=0.9?(index+1)*0.3+0.1:(index+1)*0.3;

changeV.userInteractionEnabled = b;

[_viewArr replaceObjectAtIndex:index withObject:changeV];

}

5、来看一下最终的效果

如果觉得有帮助，我会不断分享，你们的支持是我分享的最大动力！