iOS 自定義tableView左滑刪除控件

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

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


左滑刪除.gif

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

#import "LYFTableViewCell.h"

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

@interface LYFTableViewCell() <UIScrollViewDelegate>

/// 標(biāo)題的背景
@property (nonatomic, strong) UIView *backView;
/// 標(biāo)題
@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 - 設(shè)置事件
-(void)setupCell {
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    /// 在cell上先添加滑動(dòng)視圖
    [self.contentView addSubview:self.mainScrollView];
    
    /// 再在滑動(dòng)視圖上添加背景視圖（就是cell主要顯示的內(nèi)容）
    [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:@"這里有個(gè)%@", 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];
    }
    
    /// 滑動(dòng)事件
    if (self.scrollAction) {
        self.scrollAction();
    }
}

#pragma mark - 點(diǎn)擊事件
-(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];
        /// 設(shè)置滑動(dòng)視圖的偏移量是：屏幕寬+刪除按鈕寬
        _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;
}

大家可以看到，就是簡單的幾個(gè)控件之間的交互，在滑動(dòng)的過程中傳遞滑動(dòng)的事件，只要UITableView能接收到滑動(dòng)事件，就可以繼續(xù)之后的邏輯了。

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

@interface LYFTableView() <UITableViewDataSource, UITableViewDelegate>

/// 數(shù)據(jù)源
@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) {
            /// 當(dāng)屏幕滑動(dòng)時(shí)，關(guān)閉不是當(dāng)前滑動(dòng)的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) {
        /// 當(dāng)屏幕滑動(dòng)時(shí)，關(guān)閉被打開的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

這里需要注意的就是，當(dāng)有cell1被左滑打開時(shí)，再滑動(dòng)cell2時(shí)，需要先關(guān)閉cell1。同理，當(dāng)滑動(dòng)整個(gè)UITableView時(shí)，需要把被打開的cell統(tǒng)統(tǒng)關(guān)閉。

代碼傳送門：https://github.com/Fdevelopmenter/LYFTableView-DeleteCell.git。
喜歡的同學(xué)點(diǎn)個(gè)贊啦。??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,171評論 3贊 119
  • 帶給我無限樂趣和喜悅的身心萬人迷課程昨天結(jié)營了，就像一位同學(xué)說的，結(jié)營不代表結(jié)束。十二天里學(xué)習(xí)了很多的聲音的技...
    靜墨琴書閱讀 290評論 0贊 0
  • 觀棋 對奕方城戰(zhàn)事酣，無關(guān)勝負(fù)起硝煙。 江山容易失謀略，放縱精神一笑詮。 寄王沛君老師南歸 未曾謀面字如歸，幾聚因...
    姜彥偉閱讀 474評論 0贊 1
  • 曾國藩有言"人之氣質(zhì)，由于天生，很難改變，唯讀書則可以變其氣質(zhì)。古之精于相法者，并言讀書可以變換骨相"。曾...
    追夢的朵兒閱讀 1,166評論 0贊 2

友情鏈接更多精彩內(nèi)容