iOS之卡片模式设计和实现

最新推荐文章于 2019-05-21 19:39:16 发布

logW

最新推荐文章于 2019-05-21 19:39:16 发布

阅读量2.6k

点赞数 1

分类专栏： iOS笔记文章标签： iOS-卡片效果

本文链接：https://blog.csdn.net/wenSirZhong/article/details/53334238

版权

本文介绍了如何在iOS中实现卡片翻页效果，包括静态三张卡片递进叠加、手势滑动时卡片的动态切换。通过使用UIScrollView并实现其代理方法，结合手势滑动和视图叠加，详细阐述了代码实现过程，提供了完整的项目代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

卡片效果花样很多，每个人都有自己的想法来实现更好的动态效果，从而达到更好的用户体验；以下就是写出的卡片翻页效果要求：
（1）.静态的页面有三张卡片递进叠加；
（2）.当手势向下滑动卡片时，当前卡片向下滑出，上一层卡片递进滑到上一层；
（3）.当手势向上滑卡片时，当前卡片向上一层滑入底层视图，底部滑出卡片进入当前页（不为第一张卡片时）。

代码实现过程

1.手势滑动部分：通过添加UIScrollView类实现，只在UIScrollView视图上添加一个卡片视图，用于可视化滑动效果，并且通过协议UIScrollViewDelegate的代理方法捕获滑动事件

(1)设置UIScrollView控件

//设置滑动视图的页数
_mainScrollView.contentSize = _cardDataArray.count>1 ? CGSizeMake(width, viewSize.height*_cardDataArray.count):CGSizeMake(width, viewSize.height*_cardDataArray.count+1);

//这里需要注意一点，数组里的第一个卡片数据，应该放在UIScrollView类的最后一页
_mainScrollView.contentOffset = CGPointMake(0, (_cardDataArray.count-1)* viewSize.height);

(2)添加卡片视图到UIScrollView类，第一张卡片放在最后一页，向下滑弹出第二页，类推…

//坐标（第一张卡片放在最后一页）
CGPoint point = CGPointMake(0, (_cardDataArray.count-1)*viewSize.height);

//实例化CardView
CardView *card = [[NSBundle mainBundle] loadNibNamed:@"CardView" owner:self options:nil].firstObject;
card.frame=CGRectMake(point.x, point.y, viewSize.width, viewSize.height-58);
card.backgroundColor = [UIColor whiteColor];
card.layer.masksToBounds = YES;
card.layer.cornerRadius = 5.0;//设置圆角
[card loadCardViewWithDictionary:_cardDataArray[0]];

//添加点击事件（用于判定选中卡片事件）
UITapGestureRecogni