ios 卡片切換效果

趙子龍發表於2018-01-16

說明

控制元件基於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
複製程式碼

原始碼下載點選檢視

更多文章點選檢視

[MAUI]模仿iOS多工切換卡片滑動的互動實現
2023-05-02
UIiOS
Flutter自定義實現神奇的卡片切換檢視
2019-04-02
Flutter
iOS 切換鍵盤
2020-04-04
iOS
JavaScript 圖片切換展示效果
2009-09-24
JavaScript
iOS 橫豎屏切換
2017-02-07
iOS
小程式標籤頁切換效果
2018-12-05
Android切換Activity的動畫效果
2017-06-26
Android動畫
iOS block種類和切換
2015-10-09
iOSBloC
用CSS實現Tab頁切換效果
2019-03-04
CSS
jQuery 圖片垂直切換效果詳解
2018-12-18
jQuery
純CSS彈出層，城市切換效果
2015-03-15
CSS
activity切換無動畫效果的實現
2015-11-09
動畫
雙輪播加切換動畫效果元件
2024-03-12
動畫元件
iOS AVPlayer之無縫切換播放(類似今日頭條視訊播放效果)
2017-12-21
iOS
iOS開發系列--檢視切換
2014-08-28
iOS
JavaScript 方向鍵切換表格tr行高亮效果
2019-01-09
JavaScript
javascript選擇項相互移動切換效果
2017-03-24
JavaScript
CSS滑鼠懸浮圖片模糊切換效果
2018-04-25
CSS
Win7 3D切換效果技巧
2016-06-30
Win73D
jquery另外一種類似tab切換效果
2013-10-16
jQuery
js點選實現多圖順序切換和迴圈切換效果程式碼
2017-04-12
JS
簡單實現一個全面屏切換效果
2018-09-18
vue2.0實現底部導航切換效果
2018-09-10
Vue
html兩種方法來實現tab切換效果
2020-12-21
HTML
成品直播原始碼，點選滑動切換效果
2022-02-23
原始碼
點選按鈕實現狀態切換效果
2017-04-18
點選按鈕實現圖片切換效果
2017-04-12
Vue實現內部元件輪播切換效果
2018-04-06
Vue元件
馬賽克效果的JS圖片切換程式碼
2016-07-11
JS
百葉窗式的幻燈片切換效果原理
2016-04-12
CSS神奇的卡片懸停互動效果
2022-05-22
CSS
Android 高仿騰訊新聞視訊切換效果
2019-04-30
Android
CSS實現頁面切換時的滑動效果
2021-02-25
CSS
滑鼠懸浮遮罩層動畫方式滑動切換效果
2017-04-19
遮罩動畫
滑鼠懸浮實現圖片動畫上下切換效果
2017-04-15
動畫
仿天貓App實現商品列表佈局切換效果
2016-07-20
APP
在多個遊戲檢視間切換實現效果
2015-03-09
遊戲
iOS學習筆記04 檢視切換
2018-06-02
iOS筆記

ios 卡片切換效果

說明

效果

程式碼實現

相關文章