1. 程式人生 > >iOS UITableView的多選

iOS UITableView的多選

package lin 的人 right show 獲取 fan 技術 ews

一些列表經常需要編輯多選的功能,而UITableview自帶多選刪除的功能,使用起來方便,不需要自己去做數據存儲和選中狀態轉換,可以減少不少開發時間。下面就來介紹下UITableView多選的使用。
效果 :

技術分享圖片
UITableViewCellEditingStyle

編輯狀態UITableViewCellEditingStyle有三種模式:

  • UITableViewCellEditingStyleDelete
  • UITableViewCellEditingStyleInsert
  • UITableViewCellEditingStyleNone

多選框的風格, 只需要風格同時包含UITableViewCellEditingStyleDelete和UITableViewCellEditingStyleInsert就可以了

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert;
}

然後設置UITableview的Editing狀態,就可開啟tableview的多選功能。

使用自帶的編輯狀態去做多選功能的好處

  • 不用去記錄數據源中選中的數組,通過indexPathsForSelectedRows
    方法就可以獲取到選中的cell,做刪除操作時也會方便很多.
  • 進入退出編輯狀態方便,還有自帶的動畫。ps:自定義cell時,子視圖應加載在cell的contentView上。
  • 在要求不高的情況下,自帶的圖標就能滿足需求。
技術分享圖片
接下來先說說全選和全不選的操作,以下都是在單section情況下
  • 做全選也簡單,遍歷一遍數據源 然後選中每一條。
[self.listData enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:idx inSection:0] animated:NO scrollPosition:UITableViewScrollPositionNone];
        }];
  • 全不選,reload就可以變為全不選狀態了,如果不想reload這樣簡單粗暴的,也可以取出當前選中的indexpath數組,遍歷反選也可以。
        [self.tableView reloadData];
        /** 遍歷反選
        [[self.tableView indexPathsForSelectedRows] enumerateObjectsUsingBlock:^(NSIndexPath * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [self.tableView deselectRowAtIndexPath:obj animated:NO];
        }];
         */
  • 多section情況類似,在刪除操作的時候註意點,刪除到section的cell到最後一個時 需要刪除整個section。
編輯操作,下面以刪除為例
NSMutableIndexSet *insets = [[NSMutableIndexSet alloc] init];
        [[self.tableView indexPathsForSelectedRows] enumerateObjectsUsingBlock:^(NSIndexPath * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [insets addIndex:obj.row];
        }];
        [self.listData removeObjectsAtIndexes:insets];
        [self.tableView deleteRowsAtIndexPaths:[self.tableView indexPathsForSelectedRows] withRowAnimation:UITableViewRowAnimationFade];
        
        /** 數據清空情況下取消編輯狀態*/
        if (self.listData.count == 0) {
            self.navigationItem.rightBarButtonItem.title = @"編輯";
            [self.tableView setEditing:NO animated:YES];
            [self showEitingView:NO];
            /** 帶MJ刷新控件重置狀態
            [self.tableView.footer resetNoMoreData];
            [self.tableView reloadData];
             */
        }
Cell點擊效果的問題,有的人會覺得那個藍色的背景很難看,想去掉,可以在自定義的cell裏面:
self.multipleSelectionBackgroundView = [UIView new];

還可以修改有點擊選中圖標的顏色,其他默認圖片的顏色也會因此而修改,

self.tintColor = [UIColor redColor];

效果:


技術分享圖片

如果不想使用默認圖標的話,也可以在自定義:

-(void)layoutSubviews
{
    for (UIControl *control in self.subviews){
        if ([control isMemberOfClass:NSClassFromString(@"UITableViewCellEditControl")]){
            for (UIView *v in control.subviews)
            {
                if ([v isKindOfClass: [UIImageView class]]) {
                    UIImageView *img=(UIImageView *)v;
                    if (self.selected) {
                        img.image=[UIImage imageNamed:@"xuanzhong_icon"];
                    }else
                    {
                        img.image=[UIImage imageNamed:@"weixuanzhong_icon"];
                    }
                }
            }
        }
    }
    [super layoutSubviews];
}


//適配第一次圖片為空的情況
- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
    [super setEditing:editing animated:animated];
    for (UIControl *control in self.subviews){
        if ([control isMemberOfClass:NSClassFromString(@"UITableViewCellEditControl")]){
            for (UIView *v in control.subviews)
            {
                if ([v isKindOfClass: [UIImageView class]]) {
                    UIImageView *img=(UIImageView *)v;
                    if (!self.selected) {
                        img.image=[UIImage imageNamed:@"weixuanzhong_icon"];
                    }
                }
            }
        }
    }
    
}

效果:


技術分享圖片

demo地址:https://github.com/yxsufaniOS/TableViewMutableSelectDemo


鏈接:https://www.jianshu.com/p/a6e4cb42dd03

iOS UITableView的多選