ios 卡片横向滑动内容切换效果

效果图.gif

简介

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

思路设计

整体设计
  1. 继承UIView创建一个容器SMSwipeView，用来放当前显示的cell。
  2. 在SMSwipeView中实现滑动事件的监听，以此来处理相应的动画效果，以及cell的移除、缓存、载入操作。
  3. 创建一个Delegate，用来获取需要显示的数据量，以及获取显示cell的对象。
循环设计

当前下标index假如为0

  1. 获取当前的三个要显示的cell，便是0、1、2三个cell，叠加显示在当前容器之中。
  2. 滑动到下一个界面情况：index++变为1，那么index=0的cell则显示在左侧不可见的区域，加载index=3的cell，如果此时超出范围则加载index=0的cell。
  3. 手势需要返回到上一页的时候，就移除叠加最底层的cell，并载入上上一个cell，如果当前的index=0，则上一个cell应该为最后一个。
图片.png

代码实现

SMSwipeView.h

//定义协议
@protocol SMSwipeDelegate <NSObject>
@required
//获取显示数据内容
-(UITableViewCell*)SMSwipeGetView:(SMSwipeView*)swipe withIndex:(int)index;
//获取数据源总量
-(NSInteger)SMSwipeGetTotaleNum:(SMSwipeView*)swipe;
@end

@interface SMSwipeView : BaseView
@property(nonatomic,weak)id<SMSwipeDelegate> delegate;
-(void)reloadData;//加载方法
-(UITableViewCell*)dequeueReusableUIViewWithIdentifier:(NSString*)identifier;//根据id获取缓存的cell
@end

SMSwipeView.m

//
//  SMSwipeView.m
//  Base
//
//  Created by whbt_mac on 15/12/28.
//  Copyright © 2015年 StoneMover. All rights reserved.
//
//  淘宝滑动特效效果
#import "SMSwipeView.h"

#define degreeTOradians(x) (M_PI * (x)/180)

const int LEFT_RIGHT_MARGIN=10;//childView距离父View左右的距离
const int TOP_MARGTIN=16;//当前view距离父view的顶部的值

@interface SMSwipeView()

@property(nonatomic,weak)UITableViewCell * viewRemove;//已经划动到边界外的一个view

@property(nonatomic,strong)NSMutableArray * cacheViews;//放当前显示的子View的数组

@property(nonatomic,assign)int totalNum;//view总共的数量

@property(nonatomic,assign)int nowIndex;//当前的下标

@property(nonatomic,assign)CGPoint pointStart;//触摸开始的坐标

@property(nonatomic,assign)CGPoint pointLast;//上一次触摸的坐标

@property(nonatomic,assign)CGPoint pointEnd;//最后一次触摸的坐标

@property(nonatomic,weak)UITableViewCell * nowCell;//正在显示的cell

@property(nonatomic,weak)UITableViewCell * nextCell;//下一个cell

@property(nonatomic,weak)UITableViewCell * thirdCell;//第三个cell

@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];
    
    [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;
        [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

代码地址

https://github.com/StoneMover/alldemo/tree/master/swipe

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4赞 60
  • 拜读刘慈欣科幻小说《三体》
    书名：三体 作者：刘慈欣 评论：刘慈欣本为一名工程师，后成为科幻小说作家。他以过硬的物理学功底，描述了三体星人入侵...
    lixb阅读 952评论 5赞 1
  • 人生的经历
    “就在今天中午我在饭桌上跟我奶奶说”，我在过两三天去顺昌，她说：“可以，但是有个条件要我下学期好好读书！”我答应她...
    或者说是阅读 235评论 0赞 1
  • 你每天上班选择的那班公交是最快捷的吗？（更逼近真相的思考）
    待完善 亲身的数据采集和对比显示，你以为vs真相，方法告知。 再挖一步让“懒”变得更有理有据，做精明的生活家！！征...
    念即起行阅读 201评论 0赞 0
  • 郑希高
    “像个孙子一样，我坚持了四年，容易吗？” 郑希高坐在三爻村小杨烤肉店最里面靠窗的位置一口气干掉了三瓶啤酒，“谁他妈...
    轻读漫写阅读 266评论 0赞 1