iOS 自定義tableView左滑刪除控件

這段時間忙炸了，好久沒有更新文章了。今天正好有時間，爲大家更新一篇文章。

大家在開發過程中一定使用過iOS原生的左滑刪除控件，方便且簡單。但是，某一天產品經理突然心血來潮，非要自定義這個控件，那感覺絕對的酸爽。今天我給大家講解一下我自定義的左滑刪除控件，其實沒有什麼難度，只是幾個細節需要大家注意。先看看效果圖：

首先我們先來完成cell的部分，原理很簡單：使用UIScrollView來完成整體的佈局。

#import "LYFTableViewCell.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface LYFTableViewCell() <UIScrollViewDelegate>

/// 標題的背景
@property (nonatomic, strong) UIView *backView;
/// 標題
@property (nonatomic, strong) UILabel *titleLabel;
/// 刪除按鈕
@property (nonatomic, strong) UIButton *deleteButton;

@end

@implementation LYFTableViewCell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        [self setupCell];
    }
    
    return self;
}

#pragma mark - 設置事件
-(void)setupCell {
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    /// 在cell上先添加滑動視圖
    [self.contentView addSubview:self.mainScrollView];
    
    /// 再在滑動視圖上添加背景視圖（就是cell主要顯示的內容）
    [self.mainScrollView addSubview:self.backView];
    [self.mainScrollView addSubview:self.deleteButton];
    [self.backView addSubview:self.titleLabel];
    
    self.deleteButton.frame = CGRectMake(kScreenWidth, 0, [self deleteButtonWdith], 40.f);
    self.mainScrollView.frame = CGRectMake(0, 0, kScreenWidth, 40);
    self.backView.frame = CGRectMake(0, 0, kScreenWidth, 40.f);
    self.titleLabel.frame = CGRectMake(10, 0, 200, 40);
}

#pragma mark - Set方法
-(void)setName:(NSString *)name {
    _name = name;
    
    self.titleLabel.text = [NSString stringWithFormat:@"這裏有個%@", self.name];
}

#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint movePoint = self.mainScrollView.contentOffset;
    if (movePoint.x < 0) {
        [self.mainScrollView setContentOffset:CGPointMake(0, 0)];
    }
    
    if (movePoint.x > [self deleteButtonWdith]) {
        self.deleteButton.frame = CGRectMake(kScreenWidth, 0, movePoint.x, 40.f);
    } else {
        self.deleteButton.frame = CGRectMake(kScreenWidth, 0, [self deleteButtonWdith], 40.f);
    }
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    CGPoint endPoint = self.mainScrollView.contentOffset;
    if (endPoint.x < self.deleteButtonWdith) {
        [self.mainScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    }
    
    /// 滑動事件
    if (self.scrollAction) {
        self.scrollAction();
    }
}

#pragma mark - 點擊事件
-(void)deleteAction:(UIButton *)button {
    if (self.deleteAction) {
        self.deleteAction(self.indexPath);
    }
}

#pragma mark - Get方法
-(CGFloat)deleteButtonWdith {
    return 70.0 * (kScreenWidth / 375.0);
}

-(UIView *)backView {
    if (!_backView) {
        _backView = [[UIView alloc] init];
        _backView.backgroundColor = [UIColor whiteColor];
    }
    
    return _backView;
}

-(UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
    }
    
    return _titleLabel;
}

-(UIScrollView *)mainScrollView {
    if (!_mainScrollView) {
        _mainScrollView = [[UIScrollView alloc] init];
        /// 設置滑動視圖的偏移量是：屏幕寬+刪除按鈕寬
        _mainScrollView.contentSize = CGSizeMake(self.deleteButtonWdith + kScreenWidth, 0);
        _mainScrollView.showsHorizontalScrollIndicator = NO;
        _mainScrollView.delegate = self;
        _mainScrollView.userInteractionEnabled = YES;
    }
    
    return _mainScrollView;
}

-(UIButton *)deleteButton {
    if (!_deleteButton) {
        _deleteButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_deleteButton setTitle:@"刪除" forState:UIControlStateNormal];
        _deleteButton.backgroundColor = [UIColor redColor];
        [_deleteButton addTarget:self action:@selector(deleteAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _deleteButton;
}

/// 判斷是否被打開了
-(BOOL)isOpen {
    return self.mainScrollView.contentOffset.x >= self.deleteButtonWdith;
}

大家可以看到，就是簡單的幾個控件之間的交互，在滑動的過程中傳遞滑動的事件，只要UITableView能接收到滑動事件，就可以繼續之後的邏輯了。

#import "LYFTableView.h"
#import "LYFTableViewCell.h"

@interface LYFTableView() <UITableViewDataSource, UITableViewDelegate>

/// 數據源
@property (nonatomic, strong) NSMutableArray<NSString *> *dataList;

@end

static NSString *tableViewCellId = @"LYFTableViewCell";

@implementation LYFTableView

-(instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style {
    if (self = [super initWithFrame:frame style:style]) {
        self.dataSource = self;
        self.delegate = self;
        
        self.rowHeight = 40.f;
        
        [self registerClass:[LYFTableViewCell class] forCellReuseIdentifier:tableViewCellId];
    }
    
    return self;
}

#pragma mark - UITableViewDataSource / UITableViewDelegate
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataList.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    LYFTableViewCell *cell = [[LYFTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:tableViewCellId];
    
    cell.name = self.dataList[indexPath.row];
    cell.indexPath = indexPath;
    typeof(self) __weak weakSelf = self;
    cell.deleteAction = ^(NSIndexPath *indexPath) {
        /// 刪除邏輯
        [weakSelf.dataList removeObjectAtIndex:indexPath.row];
        
        [weakSelf reloadData];
    };
    
    cell.scrollAction = ^{
        for (LYFTableViewCell *tableViewCell in weakSelf.visibleCells) {
            /// 當屏幕滑動時，關閉不是當前滑動的cell
            if (tableViewCell.isOpen == YES && tableViewCell != cell) {
                [tableViewCell.mainScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
            }
        }
    };
    
    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    for (LYFTableViewCell *tableViewCell in self.visibleCells) {
        /// 當屏幕滑動時，關閉被打開的cell
        if (tableViewCell.isOpen == YES) {
            [tableViewCell.mainScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
        }
    }
}

#pragma mark - Get方法
-(NSMutableArray<NSString *> *)dataList {
    if (!_dataList) {
        _dataList = [NSMutableArray arrayWithArray:@[@"中國人", @"日本人", @"美國人", @"英國人", @"德國人", @"越南人", @"印度人", @"西班牙人", @"法國人", @"意大利人"]];
    }
    
    return _dataList;
}

@end

這裏需要注意的就是，當有cell1被左滑打開時，再滑動cell2時，需要先關閉cell1。同理，當滑動整個UITableView時，需要把被打開的cell統統關閉。

代碼傳送門：https://github.com/Fdevelopmenter/LYFTableView-DeleteCell.git。
喜歡的同學點個贊啦。😘