iOS Cell高亮(highlighted)和选中(selec

前言

初衷：最近闲适，讲讲关于Cell，也希望刚入门的iOS小伙伴少走写弯路吧！

UITableView和UICollectionView是我们常用的控件。

但是，就关于如何设置高亮状态和选中状态，网上的解决方案虽多，但是令我满意的却是寥寥无几。

在我尝试各种方案后，终于在官方API中找到了解决方案。

正文

一. 阐释

• 高亮状态(highlighted)：简单来说，也就是手按在Cell上不松开的效果即为高亮状态。
• 选中状态(selected)：在iOS官方API中，当用户点击一个Cell松开后，UITableView会默认为你选中了一个Cell。

二. 选中状态(selected)

1. 单选

默认状态下，当你单击一个Cell，它就会变成灰色，这个表明你已经选中了这个Cell，选中效果如下：

signle.gif

2. 多选

有的小伙伴既然可以单选，那么多选么？
当然iOS的API很人性化，设置多选只需一行代码，方法如下：

    // 设置允许多选
    self.tableView.allowsMultipleSelection = YES;

多选效果如下：

multiple.gif

3. 获取单选和多选的选中项

// 获取单选选中项
NSIndexPath *indexPath = self.tableView.indexPathForSelectedRow;
// 获取全选选中项
NSArray *indexPaths = self.tableView.indexPathsForSelectedRows;

4. 设置Cell选中和反选中

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
// 设置某项变为选中
[self.tableView selectRowAtIndexPath:indexPath animated:YES
                      scrollPosition:UITableViewScrollPositionNone];
// 设置某项变为未选中
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];

• 小技巧
  我想有了“2”、“3”、“4”知识作为基础，想做出一个Cell单选和全选效果再也不是什么难事了吧。

• 通常使用
  一般我们会在UITableViewDelegate的didSelect方法中设置反选中效果，代码和效果如下：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // 在手指离开的那一刻进行反选中
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

deSelect.gif

当然这个效果的确在一段时间内帮我解决了不少问题吧，知道我遇见了“她”，她让我在度陷入“懵逼”的状态。接下来我我们就来见识见识这个让我懵逼的“她”。

• 特殊情况：当我们自定义了Cell，并且在Cell中添加了修改backgroundColor属性的UIView时，效果如下图所示：

background.png backgroundColor.gif

• 问题：OMG，发生了什么，UIView的背景颜色怎么没有了。其实这个问题也困惑了我很长时间，我也曾经去stackoverflow上问过，然而没有找到比较好的答案。

• 暂时方案：

  1. 禁用选中效果，代码如下：

// 禁用SelectionStyle
self.selectionStyle = UITableViewCellSelectionStyleNone;

2. UIColor -> UIImage，使用UIImage填充，不过也有短处。

• 苦恼： 这俩方法难以使我满意，同样也难以使产品满意。避免撕逼，只能继续琢磨。后来我在iOS的API找到了灵感。

// animate between regular and selected state
- (void)setSelected:(BOOL)selected animated:(BOOL)animated;   
// animate between regular and highlighted state                  
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated;

• 目前新方案： 效果可以与官方默认效果媲美。

UITableViewCell方法
建议：最好增加延迟消失的动画，让高亮效果更加突现出来。否则短暂点击无法显示出高亮效果，原因是高亮与非高亮状态切换太快无法显示其效果。

// 禁用SelectionStyle
self.selectionStyle = UITableViewCellSelectionStyleNone;

// 配置cell高亮状态
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    [super setHighlighted:highlighted animated:animated];
    if (highlighted) {
        self.contentView.backgroundColor = [UIColor colorWithHexString:@"0xcccccc"];
    } else {
        // 增加延迟消失动画效果，提升用户体验
        [UIView animateWithDuration:0.1 delay:0.1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.contentView.backgroundColor = [UIColor whiteColor];
        } completion:nil];
    }
}

// 配置cell选中状态
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
    if (selected) {
        self.contentView.backgroundColor = [UIColor colorWithHexString:@"0xececec"];
    } else {
        self.contentView.backgroundColor = [UIColor whiteColor];
    }
}

UICollectionViewCell方法
由于UICollectionViewCell没有像UITableViewCell中那样的方法，所以重写setter方法即可，具体代码如下:

Objective-C版代码
// 设置高亮效果
- (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    if (highlighted) {
        self.backgroundColor = HexRGB(0xececec);
    } else {
        [UIView animateWithDuration:0.1 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{
            self.backgroundColor = [UIColor whiteColor];
        } completion:nil];
    }
}

// 设置选中选中
-(void)setSelected:(BOOL)selected {
    if (selected) {
        self.backgroundColor = HexRGB(0xececec);
    } else {
        self.backgroundColor = [UIColor whiteColor];
    }
}

Swift版代码
  // 设置高亮效果
  override var isHighlighted: Bool {
      willSet {
          if newValue {
              
          } else {
              
          }
      }
  }

  // 设置选中选中
  override var isSelected: Bool {
      willSet {
          if newValue {
              
          } else {
              
          }
      }
  }

本人不足之处欢迎大家指正，谢谢！