这段时间忙炸了，好久没有更新文章了。今天正好有时间，为大家更新一篇文章。
大家在开发过程中一定使用过iOS原生的左滑删除控件，方便且简单。但是，某一天产品经理突然心血来潮，非要自定义这个控件，那感觉绝对的酸爽。今天我给大家讲解一下我自定义的左滑删除控件，其实没有什么难度，只是几个细节需要大家注意。先看看效果图：
左滑删除.gif
首先我们先来完成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。
喜欢的同学点个赞啦。😘
