iOS自定义View实现卡片滑动

2024-12-11 18:56:53

本文实例为大家分享了iOS自定义View实现卡片滑动效果的具体代码，供大家参考，具体内容如下

说明

控件基于UIView封装完成，采用UIPanGestureRecognizer监听自身的触摸事件，以此处理各种滑动动画操作。
内容之间可以循环切换，采用类似tableView加载机制，达到复用效果

效果

代码实现

#import <UIKit/UIKit.h>
@class SMSwipeView;

@protocol SMSwipeDelegate <NSObject>

@required
//获取显示数据内容
-(UITableViewCell*)SMSwipeGetView:(SMSwipeView*)swipe withIndex:(int)index;
//获取数据源总量
-(NSInteger)SMSwipeGetTotaleNum:(SMSwipeView*)swipe;
@end

@interface SMSwipeView : UIView

@property(nonatomic,weak)id<SMSwipeDelegate> delegate;

//层叠透明方式显示 默认NO
@property(nonatomic,assign)BOOL isStackCard;
//加载方法
-(void)reloadData;
//根据id获取缓存的cell
-(UITableViewCell*)dequeueReusableUIViewWithIdentifier:(NSString*)identifier;

@end

#import "SMSwipeView.h"

#define degreeTOradians(x) (M_PI * (x)/180)
//childView距离父View左右的距离
const int LEFT_RIGHT_MARGIN=10;
//当前view距离父view的顶部的值
const int TOP_MARGTIN=16;

@interface SMSwipeView()
//已经划动到边界外的一个view
@property(nonatomic,weak)UITableViewCell * viewRemove;
//放当前显示的子View的数组
@property(nonatomic,strong)NSMutableArray * cacheViews;
//view总共的数量
@property(nonatomic,assign)int totalNum;
//当前的下标
@property(nonatomic,assign)int nowIndex;
//触摸开始的坐标
@property(nonatomic,assign)CGPoint pointStart;
//上一次触摸的坐标
@property(nonatomic,assign)CGPoint pointLast;
//最后一次触摸的坐标
@property(nonatomic,assign)CGPoint pointEnd;
//正在显示的cell
@property(nonatomic,weak)UITableViewCell * nowCell;
//下一个cell
@property(nonatomic,weak)UITableViewCell * nextCell;
//第三个cell
@property(nonatomic,weak)UITableViewCell * thirdCell;
//自身的宽度
@property(nonatomic,assign)int w;
//自身的高度
@property(nonatomic,assign)int h;
//是否是第一次执行
@property(nonatomic,assign)BOOL isFirstLayoutSub;

@end

@implementation SMSwipeView

//从xib中加载该类
-(void)awakeFromNib{
 [super awakeFromNib];
 [self initSelf];
}
//直接用方法初始化
-(instancetype)initWithFrame:(CGRect)frame{
 self=[super initWithFrame:frame];
 [self initSelf];
 return self;
}

//进行一些自身的初始化和设置
-(void)initSelf{
 self.clipsToBounds=YES;
 self.cacheViews=[[NSMutableArray alloc]init];
 //手势识别
 UIPanGestureRecognizer * pan=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
 [self addGestureRecognizer:pan];
}

//布局subview的方法
-(void)layoutSubviews{
 if(!self.isFirstLayoutSub){
  self.isFirstLayoutSub=YES;
  self.w=self.bounds.size.width;
  self.h=self.bounds.size.height;
  [self reloadData];
 }
}

//重新加载数据方法，会再首次执行layoutSubviews的时候调用
-(void)reloadData{
 if (!self.delegate||![self.delegate respondsToSelector:@selector(SMSwipeGetView:withIndex:)]||![self.delegate respondsToSelector:@selector(SMSwipeGetTotaleNum:)]) {
  return;
 }
 self.totalNum=(int)[self.delegate SMSwipeGetTotaleNum:self];
 self.viewRemove=nil;
 UITableViewCell * nowCell=[self.delegate SMSwipeGetView:self withIndex:self.nowIndex];

 UITableViewCell * nextCell=[self.delegate SMSwipeGetView:self withIndex:self.nowIndex+1<self.totalNum?self.nowIndex+1:0];

 UITableViewCell * thirdCell=[self.delegate SMSwipeGetView:self withIndex:self.nowIndex+2<self.totalNum?self.nowIndex+2:self.nowIndex+2-self.totalNum];

 if (self.isStackCard) {
  [thirdCell setAlpha:0.3f];
  [nextCell setAlpha:0.5f];
  [nowCell setAlpha:1];
 }

 [thirdCell removeFromSuperview];
 thirdCell.layer.anchorPoint=CGPointMake(1, 1);
 thirdCell.frame=CGRectMake(LEFT_RIGHT_MARGIN*2, 0, self.w-2*2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);
 [self addSubview:thirdCell];
 self.thirdCell=thirdCell;

 [nextCell removeFromSuperview];
 nextCell.layer.anchorPoint=CGPointMake(1, 1);
 nextCell.frame=CGRectMake(LEFT_RIGHT_MARGIN, TOP_MARGTIN/2*1, self.w-2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);

 [self addSubview:nextCell];
 self.nextCell=nextCell;

 [nowCell removeFromSuperview];
 nowCell.layer.anchorPoint=CGPointMake(1, 1);
 nowCell.frame=CGRectMake(0, TOP_MARGTIN, self.w, self.h-TOP_MARGTIN);
 [self addSubview:nowCell];
 self.nowCell=nowCell;

}

#pragma mark swipe触摸的相关手势处理
-(void)swipe:(UISwipeGestureRecognizer*)sender{
 NSLog(@"swipe");
}

-(void)pan:(UIPanGestureRecognizer*)sender{
 CGPoint translation = [sender translationInView: self];
 //CGPoint speed=[sender velocityInView:self];//获取速度
 if (sender.state==UIGestureRecognizerStateBegan) {
  //NSLog(@"begin");
  self.pointStart=translation;
  self.pointLast=translation;
 }

 if (sender.state==UIGestureRecognizerStateChanged) {
  //NSLog(@"change");
  //  CGFloat xMove=translation.x-self.pointLast.x;
  //  CGFloat yMove=translation.y-self.pointLast.y;
  //  self.pointLast=translation;
  //
  //  CGPoint center=self.nowCell.center;
  //  self.nowCell.center=CGPointMake(center.x+xMove, center.y+yMove);

  CGFloat xTotalMove=translation.x-self.pointStart.x;
  //  if (xTotalMove<0) {
  //   self.nowCell.transform = CGAffineTransformMakeRotation(degreeTOradians(90*xTotalMove/self.w));
  //   self.nextCell.transform= CGAffineTransformMakeRotation(degreeTOradians(90*xTotalMove/self.w/2));
  //  }else{
  //   self.nowCell.transform = CGAffineTransformMakeRotation(degreeTOradians(0));
  //   self.nextCell.transform= CGAffineTransformMakeRotation(degreeTOradians(0));
  //  }

 }

 if (sender.state==UIGestureRecognizerStateEnded) {
  //NSLog(@"end");
  CGFloat xTotalMove=translation.x-self.pointStart.x;
  if (xTotalMove<0) {
   [self swipeEnd];
  }else{
   [self swipeGoBack];
  }

 }
 // NSLog(@"%@%f%@%f",@"x:",speed.x,@"y:",speed.y);
 //NSLog(@"%@%f%@%f",@"x:",translation.x,@"y:",translation.y);
}

/**
 * @author StoneMover, 16-12-29 14:12:33
 *
 * @brief 获取为显示的cell,复用机制
 *
 * @param identifier id标志
 *
 * @return 返回的cell,如果缓存中没有则返回空
 */
-(UITableViewCell*)dequeueReusableUIViewWithIdentifier:(NSString *)identifier{

 for (UITableViewCell * cell in self.cacheViews) {
  if ([identifier isEqualToString:cell.reuseIdentifier]) {
   [self.cacheViews removeObject:cell];
   return cell;
  }
 }

 return nil;
}

//滑动到下一个界面
-(void)swipeEnd{
 [UIView animateWithDuration:0.3 animations:^{
  self.nextCell.transform= CGAffineTransformMakeRotation(degreeTOradians(0));
 }];

 //self.nowCell.transform= CGAffineTransformMakeRotation(degreeTOradians(0));
 CGPoint center=self.nowCell.center;
 [UIView animateWithDuration:0.3 animations:^{
  self.nowCell.center=CGPointMake(center.x-self.w, center.y);
  self.nowCell.transform= CGAffineTransformMakeRotation(degreeTOradians(0));
  //  [self.nowCell setAlpha:0.0];
 } completion:^(BOOL finished) {
  self.nowIndex++;
  self.nowIndex=self.nowIndex<self.totalNum?self.nowIndex:0;
  if (self.viewRemove&&[self isNeedAddToCache:self.viewRemove]) {
   [self.cacheViews addObject:self.viewRemove];
   [self.viewRemove removeFromSuperview];
  }
  self.viewRemove=self.nowCell;
  //self.viewRemove.layer.anchorPoint=CGPointMake(0, 0);
  //self.viewRemove.transform=CGAffineTransformMakeRotation(degreeTOradians(-35));

  self.nowCell=self.nextCell;
  self.nextCell=self.thirdCell;

  UITableViewCell * thirdCell=[self.delegate SMSwipeGetView:self withIndex:self.nowIndex+2<self.totalNum?(int)self.nowIndex+2:(int)self.nowIndex+2-(int)self.totalNum];

  [thirdCell removeFromSuperview];

  thirdCell.layer.anchorPoint=CGPointMake(1, 1);
  thirdCell.frame=CGRectMake(LEFT_RIGHT_MARGIN*2, 0, self.w-2*2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);
  self.thirdCell=thirdCell;

  if (self.isStackCard) {
   [self.thirdCell setAlpha:0.3f];
   [self.nextCell setAlpha:0.5f];
   [self.nowCell setAlpha:1];
  }

  [self insertSubview:thirdCell belowSubview:self.nextCell];

  [UIView animateWithDuration:0.2 animations:^{
   self.nowCell.frame=CGRectMake(0, TOP_MARGTIN, self.w, self.h-TOP_MARGTIN);
   self.nextCell.frame=CGRectMake(LEFT_RIGHT_MARGIN, TOP_MARGTIN/2*1, self.w-2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);
  }];
 }];
}

//滑动到上一个界面
-(void)swipeGoBack{

 if (!self.viewRemove) {
  NSLog(@"!viewRemove");
  return;
 }

 if (self.nowIndex==0) {
  NSLog(@"!viewRemove+index");
  return;
 }

 CGPoint center=self.viewRemove.center;

 self.nowIndex--;

 // if ([self isNeedAddToCache:self.thirdCell]) {
 //  [self.cacheViews addObject:self.thirdCell];
 // }
 [self.thirdCell removeFromSuperview];

 self.thirdCell=self.nextCell;
 self.nextCell=self.nowCell;
 self.nowCell=self.viewRemove;

 if (self.nowIndex==0) {
  self.viewRemove=nil;

 }else{
  UITableViewCell * cell=[self.delegate SMSwipeGetView:self withIndex:(int)self.nowIndex-1];
  [cell removeFromSuperview];
  [self insertSubview:cell aboveSubview:self.nowCell];
  cell.layer.anchorPoint=CGPointMake(1, 1);
  cell.frame=self.viewRemove.frame;
  self.viewRemove=cell;
 }

 [UIView animateWithDuration:.5 animations:^{
  self.nowCell.center=CGPointMake(center.x+self.w, center.y);
  self.nowCell.transform= CGAffineTransformMakeRotation(degreeTOradians(0));
  self.nextCell.frame=CGRectMake(LEFT_RIGHT_MARGIN, TOP_MARGTIN/2*1, self.w-2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);
  self.thirdCell.frame=CGRectMake(LEFT_RIGHT_MARGIN*2, 0, self.w-2*2*LEFT_RIGHT_MARGIN, self.h-TOP_MARGTIN);
 }];
}

//是否需要加入到缓存中去
-(BOOL)isNeedAddToCache:(UITableViewCell*)cell{
 for (UITableViewCell * cellIn in self.cacheViews) {
  if ([cellIn.reuseIdentifier isEqualToString:cell.reuseIdentifier]) {

   return NO;
  }
 }
 return YES;
}

@end

源码下载点击查看

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

IOS仿今日头条滑动导航栏

之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG
Android仿IOS ViewPager滑动进度条

最近做项目,碰到如下的需求:ViewPager分页,如果是6页(包括6页)就用圆点,如果是6页以上就用进度条来切换.前面一种交互方法最常见,用小圆点来表示当前选中的页面,这些小圆点称为导航点,很多App都是这种实现方式.当用户第一次安装或升级应用时,都会利用导航页面告诉用户当前版本的主要亮点,一般情况下当行页面有三部分组成,背景图片,导航文字和滑动的原点,即下面的效果: 这里就不作详细的讲解,大家可以参考我以前写过的博客: ViewPager实现图片轮翻效果今天来实现ViewPager进度条切
iOS 页面滑动与标题切换颜色渐变的联动效果实例

话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心代码封装顶部的PageTitleView 封装构造函数封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了 frame就可以直接设置子控件的位置和尺寸 isScrollEnable:是否可以滚动.某些地方该控件是可以滚动的. titles:显示的所有标题 // MARK:- 构造函数 init(frame: CGRect, isScrollEnable : Bool, titles
模仿iOS版微信的滑动View效果

前言最近经常交替使用Android和iOS手机.对于两个系统,从我们常用的列表来看,Android一般的列表菜单是通过长按出来的,而iOS是通过滑动出现的.比如我们常用的微信,对于Android版本,长按某个聊天好友,会弹出标为未读,置顶聊天,删除聊天选项:对于iOS的版本,右滑,会显示出标为未读,删除选项 ---------------------------------我是分割线--------------------------------- 1. 滑动View 1.1 内容展示
ios scrollview嵌套tableview同向滑动的示例

我讨论的问题是嵌套同向滑动,能避免尽量避免.最好用一个tableview实现.一个tableview不够用了再嵌套,适用复杂场景. 首先我说下不适用的,免得大家浪费时间. 1.不适用上下拉刷新加载更多的页面. 2.不适用点击cell获取点击事件的页面,可以加入button点击获取事件. 官方文档说尽量不要进行两个竖直或两个水平方向滑动的视图嵌套.因为这个时候机器不知道用户要让哪个滑动,但在我们这个神奇的国度,项目中经常出现这样的需求,产品经理总爱这样做,andriod那边是比较容易实现的,ios
iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法

1.发现问题今天一早来公司,一个同事举着他的6p对我们说:"你看看这是嘛啊...怎么划不动啊..."我一看,果然,滑两下TableView,大概加载2页多就卡飞了...顿时想以是他机子太老了,物理内存不够用balabala等等原因回怼时...人家后面又说了一句:"你看人家今日头条怎么滑都没事~". 好吧,我看看好吧. 虽然是在iPhone X上录的,但上下滑动卡顿依旧非常明显 2.排除问题没错,我和你想的一样,十有八九应该是那几个老问题导致的: Cell高度计算
iOS滑动解锁、滑动获取验证码效果的实现代码

最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1
iOS基于UIScrollView实现滑动引导页

上代码前,我们先来看下实现的效果图: WelcomeViewController.h #import <UIKit/UIKit.h> @interface WelcomeViewController : UIViewController @end WelcomeViewController.m #import "WelcomeViewController.h" #define IMAGECOUNT 3 @interface WelcomeViewController ()
iOS使用pageViewController实现多视图滑动切换

本文实例为大家分享了pageViewController实现多视图(控制器)滑动切换的具体代码,供大家参考,具体内容如下先看一下效果动画类似的界面做过不少,在几个APP中都有用到过,再次之前不了解uipageViewController 曾经的思路有两个现在想想都觉得繁琐. 之前的思路1:使用嵌套,collectionview嵌套,每个item中添加内容之前的思路2:使用scrollview 在上面创建一个一个的controller 实现左右滑动这两个思路无疑是可以实现的,并且可以实现每
iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例

一.好多App都有上下滑动UIScrollview隐藏或者显示导航栏,在这里我说说我觉得有用的几种方法: 1.iOS8之后系统有一个属性hidesBarsOnSwipe Objective-C代码如下 self.navigationController.hidesBarsOnSwipe = YES; swift代码如下 self.navigationController?.hidesBarsOnSwipe = true 当使用以上代码时,可以达到效果 2.使用UIScrollViewDelega

iOS自定义View实现卡片滑动

相关推荐

随机推荐