博客> iOS Cell高亮(highlighted)和选中(selected)效果
iOS Cell高亮(highlighted)和选中(selected)效果
2019-08-24 11:29 评论:0 阅读:1252 断忆残缘
ios cell selected highlighted

前言

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

UITableViewUICollectionView是我们常用的控件。

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

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

正文

一. 阐释

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

二. 选中状态(selected)

1. 单选

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

signle.gif

2. 多选

有的小伙伴既然可以单选,那么多选么? 当然iOSAPI很人性化,设置多选只需一行代码,方法如下:

    // 设置允许多选
    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单选和全选效果再也不是什么难事了吧。

  • 通常使用 一般我们会在UITableViewDelegatedidSelect方法中设置反选中效果,代码和效果如下:
- (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填充,不过也有短处。
  • 苦恼: 这俩方法难以使我满意,同样也难以使产品满意。避免撕逼,只能继续琢磨。后来我在iOSAPI找到了灵感。
// 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 {

          }
      }
  }

本人不足之处欢迎大家指正,谢谢!

收藏
0
sina weixin mail 回到顶部