今天愚人節,小伙們,愚人節快樂! 實現一個小功能,滑動菜單,顯示隱藏的功能菜單, 先上圖: 這裡嘗試用了下使用三個方式來實現了這個功能: 1、使用自定義UITableViewCell + UISwipeGestureRecognizer + 代理 實現; 2、使用自定義UITableViewCell ...
今天愚人節,小伙們,愚人節快樂!
實現一個小功能,滑動菜單,顯示隱藏的功能菜單, 先上圖:
這裡嘗試用了下使用三個方式來實現了這個功能:
1、使用自定義UITableViewCell + UISwipeGestureRecognizer + 代理 實現;
2、使用自定義UITableViewCell + UIPanGestureRecognizer + 代理 實現;
3、使用自定義UITableViewCell + UISwipeGestureRecognizer + block 實現。
註意點: 使用UIPanGestureRecognizer手勢實現左滑的時候,由於拖拽手勢的方向隨意性,導致與UITableViewController的下拉刷新手勢衝突了!
感覺還是用UISwipeGestureRecognizer清掃手勢實現好點!
部分代碼:
1、使用UISwipeGestureRecognizer + Delegate
自定義UITableViewCell部分代碼:
1 // 2 // TanTableViewCell.h 3 // Tan_SwipeTableViewCell 4 // 5 // Created by PX_Mac on 16/3/25. 6 // Copyright © 2016年 PX_Mac. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 @class MemberModel; 11 @class TanTableViewCell; 12 13 @protocol TanTableViewCellDelegate <NSObject> 14 15 @optional 16 - (void)deleteMember: (TanTableViewCell *)cell; //協議方法:刪除會員 17 - (void)closeOtherCellLeftSwipe; //關閉其他單元格的左滑 18 19 @end 20 21 @interface TanTableViewCell : UITableViewCell 22 23 //靜態構造方法 24 + (instancetype)cellWithTableView: (UITableView *)tableView; 25 26 @property (nonatomic, strong) MemberModel *model; //模型屬性 27 @property (nonatomic, weak) id<TanTableViewCellDelegate> delegate; //代理 28 29 - (void)setData: (MemberModel *)model; //設置要顯示的數據 30 - (void)closeSwipe; //關閉滑動,恢複原樣(用於在滑動當前單元格時,把其他已經左滑的單元格關閉) 31 32 @endView Code
@implementation TanTableViewCell + (instancetype)cellWithTableView:(UITableView *)tableView{ static NSString *reuseIdentity = @"tanCell"; TanTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentity]; if (cell == nil){ cell = [[TanTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentity]; } return cell; } - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]){ [self initSubControls]; //初始化子控制項 } return self; } //初始化子控制項 - (void)initSubControls{ /*....... */ //3、給容器containerView綁定左右滑動清掃手勢 UISwipeGestureRecognizer *leftSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)]; leftSwipe.direction = UISwipeGestureRecognizerDirectionLeft; //設置向左清掃 [self.containerView addGestureRecognizer:leftSwipe]; UISwipeGestureRecognizer *rightSwipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)]; rightSwipe.direction = UISwipeGestureRecognizerDirectionRight;//設置向右清掃 [self.containerView addGestureRecognizer:rightSwipe]; self.selectionStyle = UITableViewCellSelectionStyleNone; //設置單元格選中樣式 [self.contentView bringSubviewToFront:self.containerView]; //設置containerView顯示在最上層 } //左滑動和右滑動手勢 - (void)swipe: (UISwipeGestureRecognizer *)sender { if (sender.direction == UISwipeGestureRecognizerDirectionLeft){ if (self.isOpenLeft) return; //已經打開左滑,不再執行 //開始左滑: 先調用代理關閉其他cell的左滑 if ([self.delegate respondsToSelector:@selector(closeOtherCellLeftSwipe)]) [self.delegate closeOtherCellLeftSwipe]; [UIView animateWithDuration:0.5 animations:^{ sender.view.center = CGPointMake(0, CELLHEIGHT * 0.5); }]; self.isOpenLeft = YES; } else if (sender.direction == UISwipeGestureRecognizerDirectionRight){ [self closeSwipe]; //關閉左滑 } } //關閉左滑,恢複原狀 - (void)closeSwipe{ if (!self.isOpenLeft) return; //還未打開左滑,不需要執行右滑 [UIView animateWithDuration:0.5 animations:^{ self.containerView.center = CGPointMake(SCREENWIDTH * 0.5, CELLHEIGHT * 0.5); }]; self.isOpenLeft = NO; } //..... @endView Code
控制器部分代碼:
#pragma mark - UITableViewDataSource - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return self.dataArr.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ TanTableViewCell *cell = [TanTableViewCell cellWithTableView:tableView]; cell.delegate = self; MemberModel *model = [self.dataArr objectAtIndex:indexPath.row]; [cell setData:model]; return cell; } #pragma mark - cell代理方法 //刪除單元格 - (void)deleteMember:(TanTableViewCell *)cell{ NSIndexPath *path = [self.tableView indexPathForCell:cell]; //獲取cell所在位置 //刪除數組中數據 [self.dataArr removeObjectAtIndex:path.row]; //刪除單元格 [self.tableView deleteRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationLeft]; } //關閉其他cell的左滑 - (void)closeOtherCellLeftSwipe{ //迴圈顯示的cell for (TanTableViewCell *item in self.tableView.visibleCells) { [item closeSwipe]; } }View Code
2、UIPanGestureRecognizer + 代理
自定義UITableViewCell部分代碼:
1 //初始化子控制項 2 - (void)initSubControls{ 3 /* ...... */ 4 5 //3、給容器containerView綁定拖動手勢 6 UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)]; 7 [self.containerView addGestureRecognizer:panGes]; 8 self.panGes = panGes; 9 10 self.selectionStyle = UITableViewCellSelectionStyleNone; //設置單元格選中樣式 11 [self.contentView bringSubviewToFront:self.containerView]; //設置containerView顯示在最上層 12 } 13 14 15 //拖動手勢(拖拽手勢和UITableView的下拉刷新手勢有衝突,造成下拉刷新不能使用) 16 - (void)pan: (UIPanGestureRecognizer *)sender 17 { 18 //動畫結束時修正位置 19 if (sender.state == UIGestureRecognizerStateEnded){ 20 21 //關閉其他cell的左拖拽 22 if ([self.delegate respondsToSelector:@selector(closeOtherCellLeftPan:)]) 23 [self.delegate closeOtherCellLeftPan: self]; 24 25 if (sender.view.frame.origin.x < -SCREENWIDTH * 0.25){ 26 sender.view.transform = CGAffineTransformMakeTranslation(-SCREENWIDTH * 0.5, 0); 27 [sender setTranslation:CGPointZero inView:sender.view]; //必須歸0 28 } 29 else{ 30 [self closeLeftPan]; 31 } 32 } 33 34 CGPoint point = [sender translationInView:self.contentView]; 35 36 CGFloat tx = sender.view.transform.tx; 37 38 if (tx < - SCREENWIDTH * 0.5 || tx > 0) return; 39 40 //形變 41 sender.view.transform = CGAffineTransformTranslate(sender.view.transform, point.x, 0); 42 [sender setTranslation:CGPointZero inView:sender.view]; //必須歸0 43 } 44 45 //關閉左拖拽 46 - (void)closeLeftPan{ 47 self.panGes.view.transform = CGAffineTransformMakeTranslation(0, 0); 48 [self.panGes setTranslation:CGPointZero inView:self.panGes.view]; //必須歸0 49 }View Code
3、UISwipeGestureRecognizer + block
自定義UITableViewCell部分代碼:
1 // 2 // TanTableViewCell.h 3 // Tan_SwipeTableViewCell 4 // 5 // Created by PX_Mac on 16/3/25. 6 // Copyright © 2016年 PX_Mac. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 @class MemberModel; 11 12 @interface TanTableViewCell : UITableViewCell 13 14 //靜態構造方法 15 + (instancetype)cellWithTableView: (UITableView *)tableView; 16 17 @property (nonatomic, strong) MemberModel *model; //模型屬性 18 - (void)setData: (MemberModel *)model; //設置要顯示的數據 19 20 @property (nonatomic, copy) void (^deleteMember)(); //刪除會員block回調方法 21 @property (nonatomic, copy) void (^closeOtherCellSwipe)(); //關閉其他cell的左滑 22 23 - (void)closeLeftSwipe; //關閉左滑 24 25 @endView Code
1 //左滑動和右滑動手勢 2 - (void)swipe: (UISwipeGestureRecognizer *)sender 3 { 4 if (sender.direction == UISwipeGestureRecognizerDirectionLeft){ 5 if (self.isOpenLeft) return; //已經打開左滑,不再執行 6 7 //開始左滑: 先調用block關閉其他可能左滑的cell 8 if (self.closeOtherCellSwipe) 9 self.closeOtherCellSwipe(); 10 11 [UIView animateWithDuration:0.5 animations:^{ 12 sender.view.center = CGPointMake(0, CELLHEIGHT * 0.5); 13 }]; 14 self.isOpenLeft = YES; 15 } 16 else if (sender.direction == UISwipeGestureRecognizerDirectionRight){ 17 [self closeLeftSwipe]; //關閉左滑 18 } 19 } 20 21 //關閉左滑,恢複原狀 22 - (void)closeLeftSwipe{ 23 if (!self.isOpenLeft) return; //還未打開左滑,不需要執行右滑 24 25 [UIView animateWithDuration:0.5 animations:^{ 26 self.containerView.center = CGPointMake(SCREENWIDTH * 0.5, CELLHEIGHT * 0.5); 27 }]; 28 self.isOpenLeft = NO; 29 }View Code
控制器部分代碼:
1 #pragma mark - 代理方法 2 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ 3 return self.dataArr.count; 4 } 5 6 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 7 TanTableViewCell *cell = [TanTableViewCell cellWithTableView:tableView]; 8 9 MemberModel *model = [self.dataArr objectAtIndex:indexPath.row]; 10 [cell setData:model]; //設置數據 11 12 __weak typeof(self) tempSelf = self; 13 __weak typeof(cell) tempCell = cell; 14 15 //設置刪除cell回調block 16 cell.deleteMember = ^{ 17 NSIndexPath *tempIndex = [tempSelf.tablView indexPathForCell:tempCell]; 18 [tempSelf.dataArr removeObject:tempCell.model]; 19 [tempSelf.tablView deleteRowsAtIndexPaths:@[tempIndex] withRowAnimation:UITableViewRowAnimationLeft]; 20 }; 21 22 //設置當cell左滑時,關閉其他cell的左滑 23 cell.closeOtherCellSwipe = ^{ 24 for (TanTableViewCell *item in tempSelf.tablView.visibleCells) { 25 if (item != tempCell) [item closeLeftSwipe]; 26 } 27 }; 28 29 return cell; 30 }View Code
DEMO下載:
github地址:https://github.com/xiaotanit/Tan_UITableViewCellLeftSwipe
csdn地址:http://download.csdn.net/detail/tandaxia/9479428
原文鏈接:http://www.cnblogs.com/tandaxia/p/5346659.html