將近一年半沒有寫blog了连锯，最近項目排期不是很緊，整理一下以前遇到的問題，之前我們的項目要上一個消息中心黔寇，設(shè)計師看到京東的消息中心的cell側(cè)滑刪除比較好，就要求我們實現(xiàn)跟京東一模一樣的側(cè)滑刪除斩萌，這對于一年半之前我這樣的菜鳥來說缝裤，是一件比較頭疼的事情屏轰。不多說，現(xiàn)在整理一下憋飞，先看思路霎苗。
- 第一步我們要對cell進行處理，創(chuàng)建一個scrollView上去搀崭，以便可以滑動
- 其次放兩個View分別顯示內(nèi)容和顯示取消和刪除兩個按鈕叨粘，這里我使用代理方法實現(xiàn)監(jiān)控按鈕的點擊事件
- 解決cell原生和scrollView的手勢沖突
- 注意一點：當有cell處于編輯狀態(tài)時猾编，tableView是不可以滑動的瘤睹，這里跟原生的側(cè)滑刪除類似
現(xiàn)在看一下Demo代碼，這為了節(jié)省時間 cell我就用Xib拖了 Demo地址
- cell的.m文件
#import <UIKit/UIKit.h>
@protocol JDMessageCellDelegate;
@interface JDMessageCell : UITableViewCell
@property (nonatomic, assign) id<JDMessageCellDelegate> delegate;
//使用數(shù)據(jù)初始化cell 這里不一定是dictionary 也有可能是model
-(void)configCellWith:(NSDictionary *)dict;
// 判斷是否有cell處于編輯模式下
-(void)enableEditAction:(BOOL)canEdit;
//退出編輯模式
-(void)quitEditMode;
@end
- 看一下需要實現(xiàn)的代理方法
@protocol JDMessageCellDelegate <NSObject>
//cell 開始編輯模式
-(void)cellBeginEditMode:(JDMessageCell *)cell;
// cell 結(jié)束編輯模式
-(void)cellEndEditMode:(JDMessageCell *)cell;
//刪除這條記錄
-(void)deleteMessageInCell:(JDMessageCell *)cell;
@end
- 在.m文件中對聲明的方法和相對應(yīng)的屬性進行設(shè)置
#import "JDMessageCell.h"
@interface JDMessageCell ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *bgScrollView;
@property (weak, nonatomic) IBOutlet UIButton *cancelBtn;
@property (weak, nonatomic) IBOutlet UIButton *deleteBtn;
@property (weak, nonatomic) IBOutlet UIView *bgView;
@property (weak, nonatomic) IBOutlet UIView *leftView;
@property (weak, nonatomic) IBOutlet UILabel *leftTitleLabel;
@property (weak, nonatomic) IBOutlet UIImageView *leftImgView;
@property (weak, nonatomic) IBOutlet UIView *rightView;
@property (weak, nonatomic) IBOutlet UILabel *cancelLabel;
@property (weak, nonatomic) IBOutlet UILabel *deleteLabel;
@end
@implementation JDMessageCell
-(void)awakeFromNib {
[super awakeFromNib];
self.selectionStyle = UITableViewCellSelectionStyleNone;
//這些屬性都可以在Xib中設(shè)置 為了顯示設(shè)置了什么屬性寫了出來
_bgScrollView.userInteractionEnabled = NO;
_bgScrollView.bounces = NO;
_bgScrollView.pagingEnabled = YES;
_bgScrollView.delegate = self;
//解決cell原生側(cè)滑刪除沖突
[self.contentView addGestureRecognizer:_bgScrollView.panGestureRecognizer];
_bgScrollView.contentSize = CGSizeMake(_bgScrollView.frame.size.width * 2, _bgScrollView.frame.size.height);
//給cell的rightView空白區(qū)域添加個手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(quitEditCell:)];
tap.numberOfTapsRequired = 1;
[self.rightView addGestureRecognizer:tap];
}
-(void)configCellWith:(NSDictionary *)dict {
[_bgScrollView setContentOffset:CGPointZero animated:NO];
_bgScrollView.userInteractionEnabled = NO;
}
-(void)enableEditAction:(BOOL)canEdit {
if (canEdit) {
[self.contentView addGestureRecognizer:_bgScrollView.panGestureRecognizer];
}
else {
[self.contentView removeGestureRecognizer:_bgScrollView.panGestureRecognizer];
}
}
//退出編輯模式
-(void)quitEditMode{
[_bgScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
_bgScrollView.userInteractionEnabled = NO;
}
-(void)quitEditCell:(UITapGestureRecognizer *)gesture {
[self quitEditMode];
if (self.delegate && [self.delegate respondsToSelector:@selector(cellEndEditMode:)]) {
[self.delegate cellEndEditMode:self];
}
}
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat cellWidth = scrollView.frame.size.width;
if (scrollView.contentOffset.x >= cellWidth / 2.0) {
scrollView.userInteractionEnabled = YES;
//此時cell處于編輯狀態(tài)
if (self.delegate && [self.delegate respondsToSelector:@selector(cellBeginEditMode:)]) {
[self.delegate cellBeginEditMode:self];
}
}
else {
scrollView.userInteractionEnabled = NO;
//cell 退出編輯狀態(tài)
if (self.delegate && [self.delegate respondsToSelector:@selector(cellEndEditMode:)]) {
[self.delegate cellEndEditMode:self];
}
}
}
#pragma mark - Button Action
-(IBAction)cancelBtnAction:(id)sender {
[self quitEditMode];
if (self.delegate && [self.delegate respondsToSelector:@selector(cellEndEditMode:)]) {
[self.delegate cellEndEditMode:self];
}
}
-(IBAction)deleteBtnAction:(id)sender {
if (self.delegate && [self.delegate respondsToSelector:@selector(deleteMessageInCell:)]) {
[self.delegate deleteMessageInCell:self];
}
}
到這里cell的實現(xiàn)算是完成了答倡，下面就來看一下tableView的實現(xiàn)轰传，為了節(jié)省時間我就不單獨抽出來一個TableView了，直接在controller中開始寫了O(∩_∩)O哈哈~
- 我這里只是一個demo沒有要公開出去的屬性和方法瘪撇，所以.h文件沒有東西就不寫了
- 看一下.m文件吧 (我這里分組數(shù)和cell高度就寫死來演示了)
#import "ViewController.h"
#import "JDMessageCell.h"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, JDMessageCellDelegate> {
JDMessageCell *cellAtMode; //正在編輯的cell
}
@property (weak, nonatomic) IBOutlet UITableView *jdTableView;
@end
@implementation ViewController
-(void)viewDidLoad {
[super viewDidLoad];
//register cell
[_jdTableView registerNib:[UINib nibWithNibName:@"JDMessageCell" bundle:nil] forCellReuseIdentifier:@"JDMessageCell"];
}
#pragma mark -UITableViewDataSource
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 4;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 1;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
JDMessageCell *jdCell = [tableView dequeueReusableCellWithIdentifier:@"JDMessageCell"];
//這個方法一定要使用获茬，如果不使用請寫一個公開的方法調(diào)用一下
[jdCell configCellWith:[NSDictionary dictionary]];
jdCell.delegate = self;
return jdCell;
}
#pragma mark - UITableViewDelegate
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 201.0;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
//如果存在正在編輯的cell 點擊其他的cell時，退出編輯
if (cellAtMode) {
[cellAtMode quitEditMode];
[self enableTableViewEditAction:YES];
cellAtMode = nil;
NSLog(@"編輯退出");
}
else {
NSLog(@"點擊了%ld組", indexPath.section);
}
}
//這里是判斷tableView能不能滑動的倔既，當有cell處在編輯模式不能滑動
-(void)enableTableViewEditAction:(BOOL)enable {
self.jdTableView.scrollEnabled = enable;
for (NSInteger index = 0; index < self.jdTableView.numberOfSections; index++) {
JDMessageCell *salesCell = [self.jdTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:index]];
[salesCell enableEditAction:enable];
}
}
#pragma mark - JDMessageCellDelegate
//實現(xiàn)cell的代理方法
-(void)cellBeginEditMode:(JDMessageCell *)cell {
[self enableTableViewEditAction:NO];
[cell enableEditAction:YES];
cellAtMode = cell;
}
//結(jié)束編輯了
-(void)cellEndEditMode:(JDMessageCell *)cell {
[self enableTableViewEditAction:YES];
cellAtMode = nil;
}
-(void)deleteMessageInCell:(JDMessageCell *)cell {
NSInteger index = [self.jdTableView indexPathForCell:cell].section;
[self removeCellAtIndex:index];
}
#pragma mark - Helper Method
-(void)removeCellAtIndex:(NSInteger)index {
NSLog(@"刪除了第%ld組", index);
//這里要看tableView是plain 還是grouped ->我這里使用的是分組形式的
}
-(void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
寫到這里基本上就結(jié)束了恕曲，UI方面知識做了簡單的處理（比較難看 O(∩_∩)O哈哈~），相信結(jié)構(gòu)出來了渤涌，根據(jù)項目具體UI渲染不難吧佩谣。對于.m中的實現(xiàn)這里就不在細說了，代碼中有注釋实蓬，以上的代碼基本上滿足了項目中的需求茸俭，下面上幾張圖看一下
- cell 的.xib 文件層級結(jié)構(gòu)圖
Cell層級結(jié)構(gòu).jpeg
- 運行截屏
有一個cell正在編輯截圖.png
