iOS自定義UITableView實現不同系統下的左滑刪除功能詳解

2020-07-26 02:23:59

字體：大中小

來源：轉載

供稿：網友

前言

在我們的app開發當中，經常會用到UITableView 的左滑刪除的功能，通常的話效果如下

但有時候系統現有的功能并不能完全滿足我們的開發需求，這樣就需要我們在其現有的功能基礎上自定義我們所需要的功能了。下圖是在項目中自定義的按鈕（只是修改了按鈕的frame而已）。

然后我就總結了一下根據不同的需求自定義不同的按鈕。

一、系統默認左滑刪除按鈕

如果你對左滑刪除按鈕的要求不高，僅僅只是實現UITableView上cell的左滑刪除功能，那在UITableView的代理方法中添加以下兩種方法便可實現需求：

//使用系統默認的刪除按鈕- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { if (editingStyle == UITableViewCellEditingStyleDelete){ }}//自定義系統默認的刪除按鈕文字- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath { return @"自定義按鈕”;}

效果如下所示：

系統自帶

雖然這樣能基本實現功能，但是我們發現右邊的按鈕和左邊的黃色區域的高度并不一樣。這是因為右邊按鈕是和UITableViewCell的高度一致，而左邊的黃色區域只是一張圖片而已，其高度設置和UITableViewCell的高度并不一致，才會導致這樣的布局出現。如果我們想要刪除按鈕和左邊圖片一樣的高度，那我們就需要自定義刪除按鈕的高度了。

二、自定義左滑刪除按鈕

如果我們想要實現不止一個自定義按鈕的功能，那我們就需要在UITableView代理方法- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {}中添加我們所需要的多個按鈕了。如下是在不同的cell上添加一個或兩個左滑按鈕：

//自定義多個左滑菜單選項- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewRowAction *deleteAction; deleteAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"刪除" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) { [tableView setEditing:NO animated:YES];//退出編輯模式，隱藏左滑菜單 }]; if (indexPath.row == 1) {//在不同的cell上添加不同的按鈕 UITableViewRowAction *shareAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"分享" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {  [tableView setEditing:NO animated:YES];//退出編輯模式，隱藏左滑菜單 }]; shareAction.backgroundColor = [UIColor blueColor]; return @[deleteAction,shareAction]; } return @[deleteAction];}

在上述代理方法中我們就可以實現在cell中添加一個或多個左滑按鈕了，根據點擊不同的按鈕實現不同的響應方法便可。其中[tableView setEditing:NO animated:YES];方法可以在點擊按鈕之后退出編輯模式并隱藏左滑菜單。但如果我們想要修改按鈕的其他屬性如標題、背景顏色怎么辦？點擊進入UITableViewRowAction類中，我們會發現以下屬性和方法：

@interface UITableViewRowAction : NSObject <NSCopying>+ (instancetype)rowActionWithStyle:(UITableViewRowActionStyle)style title:(nullable NSString *)title handler:(void (^)(UITableViewRowAction *action, NSIndexPath *indexPath))handler;@property (nonatomic, readonly) UITableViewRowActionStyle style;@property (nonatomic, copy, nullable) NSString *title;@property (nonatomic, copy, nullable) UIColor *backgroundColor; // default background color is dependent on style@property (nonatomic, copy, nullable) UIVisualEffect* backgroundEffect;@end

其中 @property (nonatomic, readonly) UITableViewRowActionStyle style;是指設置所添加按鈕父視圖的背景顏色以及按鈕字體顏色：

typedef NS_ENUM(NSInteger, UITableViewRowActionStyle) { UITableViewRowActionStyleDefault = 0,//紅底白字 UITableViewRowActionStyleDestructive = UITableViewRowActionStyleDefault, UITableViewRowActionStyleNormal//灰底白字} NS_ENUM_AVAILABLE_IOS(8_0) __TVOS_PROHIBITED;

而@property (nonatomic, copy, nullable) UIVisualEffect* backgroundEffect;提供了一個背景模糊效果，有興趣的可以自行研究一下。

上述的方法和屬性只能滿足我們的部分需求，如果我們想要改變按鈕的大小或者設置帶圖片的按鈕怎么辦？那就需要我們在視圖中找到我們所要修改的按鈕，并設置它的各種屬性。由于在iOS8-10和iOS11下自定義按鈕處在不同的視圖層次中，所以需要我們先了解UITableView上的視圖層次。下圖為對比：

左iOS10/右iOS11(Xcode9中)

從對比圖中可以看出：

(1).iOS10下視圖層次為：UITableView -> UITableViewCell -> UITableViewCellDeleteConfirmationView -> _UITableViewCellActionButton，我們所需自定義的按鈕視圖UITableViewCellDeleteConfirmationView（左圖中紅框處）是UITableViewCell的子視圖。

(2).iOS11下視圖層次為：在Xcode 8中編譯為: UITableView -> UITableViewWrapperView -> UISwipeActionPullView -> UISwipeActionStandardButton；

在Xcode 9中編譯為: UITableView -> UISwipeActionPullView -> UISwipeActionStandardButton。（iOS11中用Xcode 8和Xcode 9中編譯有略微的差別），我們所需自定義的按鈕視圖UISwipeActionPullView（右圖中紅框處）是UITableView的子視圖。

由于不同系統下的視圖層次不一樣，因此我們在項目中需要根據不同的代碼去同時適配iOS8-10和iOS11。
在iOS8-10中( 以下均在Xcode 9中編譯)：

在該系統下由于我們所需自定義的按鈕視圖UITableViewCellDeleteConfirmationView是UITableViewCell的子視圖，所以我們在自定義UITableViewCell子類中遍歷它的subviews即可。代碼如下：

- (void)layoutSubviews { /**自定義設置iOS8-10系統下的左滑刪除按鈕大小*/ for (UIView * subView in self.subviews) { if ([subView isKindOfClass:NSClassFromString(@"UITableViewCellDeleteConfirmationView")]) {  subView.backgroundColor = [UIColor clearColor];//去掉默認紅色背景  //設置按鈕frame  CGRect cRect = subView.frame;  cRect.origin.y = self.contentView.frame.origin.y + 10;  cRect.size.height = self.contentView.frame.size.height - 20;  subView.frame = cRect;  //自定義按鈕的文字大小  if (subView.subviews.count == 1 && self.indexPath.section == 0) {//表示有一個按鈕  UIButton * deleteButton = subView.subviews[0];  deleteButton.titleLabel.font = [UIFont systemFontOfSize:20];  }  //自定義按鈕的圖片  if (subView.subviews.count == 1 && self.indexPath.section == 1) {//表示有一個按鈕  UIButton * deleteButton = subView.subviews[0];  [deleteButton setImage:[UIImage imageNamed:@"login_btn_message"] forState:UIControlStateNormal];  [deleteButton setTitle:@"" forState:UIControlStateNormal];  }  //自定義按鈕的文字圖片  if (subView.subviews.count >= 2 && self.indexPath.section == 0) {//表示有兩個按鈕  UIButton * deleteButton = subView.subviews[1];  UIButton * shareButton = subView.subviews[0];  [deleteButton setTitle:@"" forState:UIControlStateNormal];  [shareButton setTitle:@"" forState:UIControlStateNormal];  [self setUpDeleteButton:deleteButton];  [self setUpShareButton:shareButton];  } } }}

在iOS11中：

在該系統下由于我們所需自定義的按鈕視圖UISwipeActionPullView是UITableView的子視圖，所以我們可以在控制器中自定義UITableView子類中遍歷它的subviews即可（以下方法是寫在UITableView的代理方法- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath中的，該代理方法每次會在開始左滑按鈕前調用）。代碼如下：

/**自定義設置iOS11系統下的左滑刪除按鈕大小*///開始編輯左滑刪除- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath { NSInteger section = indexPath.section; if (@available(iOS 11.0, *)) {  for (UIView * subView in self.customTableView.subviews) {   if ([subView isKindOfClass:NSClassFromString(@"UISwipeActionPullView")]) {    subView.backgroundColor = [UIColor clearColor];//如果自定義只有一個按鈕就要去掉按鈕默認紅色背景    //設置按鈕frame    for (UIView * sonView in subView.subviews) {     if ([sonView isKindOfClass:NSClassFromString(@"UISwipeActionStandardButton")]) {      CGRect cRect = sonView.frame;      cRect.origin.y = sonView.frame.origin.y + 10;      cRect.size.height = sonView.frame.size.height - 20;      sonView.frame = cRect;     }    }    //自定義按鈕的文字大小    if (subView.subviews.count == 1 && section == 0) {//表示有一個按鈕     UIButton * deleteButton = subView.subviews[0];     deleteButton.titleLabel.font = [UIFont systemFontOfSize:20];    }    //自定義按鈕的圖片    if (subView.subviews.count == 1 && section == 1) {//表示有一個按鈕     UIButton * deleteButton = subView.subviews[0];     [deleteButton setImage:[UIImage imageNamed:@"login_btn_message"] forState:UIControlStateNormal];;    }    //自定義按鈕的文字圖片    if (subView.subviews.count >= 2 && section == 0) {//表示有兩個按鈕     UIButton * deleteButton = subView.subviews[1];     UIButton * shareButton = subView.subviews[0];     [self setUpDeleteButton:deleteButton];     [self setUpShareButton:shareButton];    }   }  } }}

如果我們想在左滑刪除結束后實現一些功能，我們可以在UITableView中實現以下代理方法：

//結束編輯左滑刪除- (void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(NSIndexPath *)indexPath {}如果我們想分別設置UITableViewCell是否需要實現左滑功能，可以在下面代理方法中實現：//判斷是否顯示左滑刪除- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return YES;}

在不同系統下分別添加以上代碼即可實現我們所需要的自定義左滑刪除按鈕，效果圖如下：