1. 程式人生 > 程式設計 >iOS自定義View實現卡片滑動

iOS自定義View實現卡片滑動

本文例項為大家分享了iOS自定義View實現卡片滑動效果的具體程式碼,供大家參考,具體內容如下

說明

控制元件基於UIView封裝完成,採用UIPanGestureRecognizer監聽自身的觸控事件,以此處理各種滑動動畫操作。
內容之間可以迴圈切換,採用類似tableView載入機制,達到複用效果

效果

iOS自定義View實現卡片滑動

程式碼實現

#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,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",translation.x,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,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,self.h-TOP_MARGTIN);
   self.nextCell.frame=CGRectMake(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,self.h-TOP_MARGTIN);
  self.thirdCell.frame=CGRectMake(LEFT_RIGHT_MARGIN*2,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

原始碼下載 點選檢視

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。