草庐IT

ios 自定义View 卡片滑动切换效果

早起的年轻人 2023-03-28 原文

说明

控件基于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 源码下载 点击查看

更多文章 点击查看

自定ViewspanclasshljsiOS开发iOS教程iOS移动开发

有关ios 自定义View 卡片滑动切换效果的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h

  6. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  7. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  8. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  9. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  10. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

随机推荐