美文网首页iOS Blog牛叉的demo学无止境
UITableViewCell系列之(一)让你的cell支持二次

UITableViewCell系列之(一)让你的cell支持二次

作者: VV木公子 | 来源:发表于2016-07-24 00:02 被阅读890次

    关于UITableViewCell一些别具一个的样式和用法。很早就想系统的写一篇文章,文章中囊括开发中UITableViewcell的一些花样用法和奇葩用法。结果还是以简短的方式分享出来,因为没有太多时间思考文章的脉络和条理。这只是一个开头,关于UITableViewCell的一些特殊的用法,我还会继续在这个系列中更新。
    如果你觉得按照步骤一步一步读下去浪费时间,喜欢直接看代码请点击

    如下图,先来看看我所说的可编辑的cell的效果:

    enableEditCell.gif

    开发中,有时候需要对tableView的某一行的内容(通常是文本)进行二次编辑。每个开发者采用的方式不同,有的开发者直接以modal/push的方式present出一个控制器,把tableViewCell上的内容传递到被modal/push的控制器的UITextView上,在UITextView上进行二次编辑,编辑完成再把数据逆传回来,重新显示到tableView上。另外一种方法是直接在当前控制器(的界面)上以动画(甚至是没有动画)的形式弹出一个UITextView,在UITextView上修改文本内容,修改完成后再隐藏/移除UITextView,把内容重新显示到tableView上。做的好的同学,可能还不忘弹出UITextView的时给tableView添加一个蒙版或者模糊效果以突出重点,提高用户的体验度。以上的两种方式算是中规中矩。

    今天,我提供了一种全新、直观的方式来达到同样的效果。思路如下:
    注意:以下操作全部是在didSelectRowAtIndexPath:方法中进行的

    1. 获取点击的那一行cell在tableView坐标系上的frame,并转换为view坐标系上的frame,此处称为frame1
    2. 根据frame1获取点击的那一行cell
    3. 在cell上添加一个和label同样尺寸、同样坐标的UITextView,以让UITextView正好遮盖住label
    4. 把cell上的内容显示到UITextView上。
    5. 在UITextView上编辑文本,编辑完成后再跟新数据,刷新tableView。

    代码如下:

    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        [self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([WSEnableEditCell class]) bundle:nil] forCellReuseIdentifier:@"enableEditCell"];
        
        // self-sizing
        self.tableView.estimatedRowHeight = 200.f;
        self.tableView.rowHeight = UITableViewAutomaticDimension;
    }
    
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        
        return self.contentTexts.count;;
    }
    
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        WSEnableEditCell *cell = [tableView dequeueReusableCellWithIdentifier:@"enableEditCell"];
        
        [cell setContent:self.contentTexts[indexPath.row]];
        cell.selected = NO;
        return cell;
    }
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
        NSLog(@"选中:%ld行",indexPath.row);
        
        // 0.0. 如果,当前正处在编辑状态,那么再次点击cell就保存内容、结束编辑(退出键盘)
        //      否则,进入编辑状态
        if ([self endEditForIndexPath:indexPath]) return;
        
        // 0.1. 保存点击的那一行
        editingIndexPath = indexPath;
        // 1.1. 获取点击的那一行在view上的frame
        CGRect rectInView = [self getCellRectInView:self.view forIndexPath:indexPath];
        // 1.2. 根据frame获取cell
        WSEnableEditCell *cell = [self getCellInTableView:tableView ForRect:rectInView];
        // 1.3. 把textView添加到cell上
        [self addTextView:self.textView toCell:cell];
        
    }
    
    // 0. 如果,当前正处在编辑状态,那么再次点击cell就保存内容、结束编辑(退出键盘);否则,进入编辑状态
    - (BOOL)endEditForIndexPath:(NSIndexPath *)indexPath {
        
        isEditing = !isEditing;
        if (!isEditing) {
            
            if (![indexPath isEqual:editingIndexPath]) indexPath = editingIndexPath;
            
            [self.view endEditing:YES];
            [self.tableView setScrollEnabled:YES];
            self.contentTexts[indexPath.row] = self.textView.text;
            // [cell setContent:self.textView.text];
            [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
            [self.textView removeFromSuperview];
            
            [self.tableView setScrollEnabled:YES];
            return YES;
        } else {
            [self.tableView setScrollEnabled:NO];
            return NO;
        }
    }
    
    // 1.获取cell 在 屏幕上的 frame
    - (CGRect)getCellRectInView:(UIView *)view forIndexPath:(NSIndexPath *)indexPath {
        CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:indexPath];
        CGRect rect = [self.tableView convertRect:rectInTableView toView:view];
        return rect;
    }
    
    // 2.获取显示的所有cell,遍历数组中每个cell的frame,找到点击的那个cell
    - (WSEnableEditCell *)getCellInTableView:(UITableView *)tableView ForRect:(CGRect)rect {
        NSArray *visibleCells = [tableView visibleCells];
        for (WSEnableEditCell *cell in visibleCells) {
            CGRect frame = [tableView convertRect:cell.frame toView:self.view];
            if (CGRectEqualToRect(frame, rect)) {
                return cell;
            }
        }
        return nil;
    }
    
    // 3.给cell添加UITextView
    - (void)addTextView:(UITextView *)textView toCell:(WSEnableEditCell *)cell {
        textView.frame = cell.ContentLabel.frame;
        textView.text = cell.ContentLabel.text;
        [cell.contentView addSubview:textView];
        [textView becomeFirstResponder];
    }
    
    

    demo地址点这里

    文/VV木公子(简书作者)
    如果你对本文感兴趣,请点击喜欢。如果对本系列感兴趣,请关注本人,日后将会更新更多关于UITableViewCell的文章。

    PS:如非特别说明,所有文章均为原创作品,著作权归作者所有,转载转载请联系作者获得授权,并注明出处,所有打赏均归本人所有!

    相关文章

      网友评论

      • 简书lu:- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
        NSLog(@"选中:%ld行",indexPath.row);
        // 0.0. 如果,当前正处在编辑状态,那么再次点击cell就保存内容、结束编辑(退出键盘)
        // 否则,进入编辑状态
        if ([self endEditForIndexPath:indexPath]) return;

        // 0.1. 保存点击的那一行
        editingIndexPath = indexPath;

        /*
        // 1.1. 获取点击的那一行在view上的frame
        CGRect rectInView = [self getCellRectInView:self.view forIndexPath:indexPath];
        // 1.2. 根据frame获取cell
        WSEnableEditCell *cell = [self getCellInTableView:tableView ForRect:rectInView];

        */
        WSEnableEditCell *cell = [tableView cellForRowAtIndexPath:indexPath];
        // 1.3. 把textView添加到cell上
        [self addTextView:self.textView toCell:cell];

        }
        这样貌似简单点,是我有什么没考虑到?
      • 简书lu:获取显示的所有cell,遍历数组中每个cell的frame,找到点击的那个cell
        这一步为什么不用 WSEnableEditCell *cell = [tableView cellForRowAtIndexPath:indexPath];
      • 幻海灬情仇:有没有oc的,swift还不会啊
      • 幻海灬情仇:demo没有下载的地方啊

      本文标题:UITableViewCell系列之(一)让你的cell支持二次

      本文链接:https://www.haomeiwen.com/subject/nkmwjttx.html