UITableViewCell的高亮和选中以及自绘分割线

UITableView是一个比较复杂的控件,不过再负责也是由一些基础的UIView组成的,它继承自UIScrollView,并由很多重用的cell组成。当然为了效率UITableView还做了很多优化的措施,比如cell的重用等。

  今天我们就一起来看看UITableView的最重要的组成部分UITableViewCell的一些细节以及分割线的问题。

一、UITableViewCell的高亮和选中

  当我们打开一个tableView的页面,上面布满了一个个cell,tableview允许我们通过datasource为这些cell提供数据,通过delegate来控制点击cell时候如何响应。查看UITableViewCell的帮助文档我们可以看到它有两个属性highLighted、selected。这两者之间到底又怎么样的联系呢?当我们点击cell的时候都发生了什么呢?要达到这个目的,很简单我们只要自定义一个cell继承自UITableViewCell,然后重载它的以下两个方法:

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated;

- (void)setSelected:(BOOL)selected animated:(BOOL)animated;

  这两个方法一个是设置cell的高亮状态,另一个是设置cell的选中状态,我们只需要在这两个方法里面打印信息就可以看出点击cell时这些状态是怎么变化的了。下面直接上代码:

测试的程序很简单,直接重载了这两个方法,打印设置的选中和高亮的状态。当我们点击任何一个cell的时候,输出如下:

  我们可以看出,当我们点击cell的时候,其实是先设置cell的高亮状态为YES,然后松手的时候再将cell的高亮状态设置为NO,接着才是设置cell的选中状态为YES,最后才会去调用delegate中的tableview:didSelectRowAtIndexPath:方法。

  此处我们delegate的tableview:didSelectRowAtIndexPath:方法中只是做了打印(没有遵照设计规范,在该方法中取消选中),这个时候已经有一个cell处于选中状态时,我们再去点击另外一个cell时,输出如下:

  通过截图我们可以看出,前两布还是和第一次点击cell时类似,但是紧接着是首先设置前一个cell为非选中状态,然后在设置当前点击的cell为选中状态,最后再调用delegate的方法。为什么会先取消上一个cell的选中状态呢?因为tableView默认是不支持多选的,我们可以通过设置allowsMultipleSelection为YES来设置支持多选。

  总结上面两种情况,我们发现cell的高亮状态是不能持久的,即tap的时候会变成高亮,松手的时候就会自动设置为非高亮状态。而cell的选中状态则是可以持久的,我们不去触发它改变状态,则选中状态就不会改变。

  说了这么多,这两个状态在实际应用有什么作用呢?让我们思考一个简单的情形,通常cell非选中且非高亮状态时候cell上的字体是黑色的,但是高亮或者选中状态时我们可能希望改变字体的颜色为白色或者其他颜色,这个时候就可以通过重载这两个方法来实现,下面是代码片段:

复制代码
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
    NSLog(@"set cell %d Selected: %d", indexPath.row, selected);
    if (selected) {
        _contentLbl.textColor = [UIColor whiteColor];
    }
    else {
        _contentLbl.textColor = [UIColor blackColor];
    }
}

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
{
    [super setHighlighted:highlighted animated:animated];
    
    NSLog(@"set cell %d highlighted: %d", indexPath.row, highlighted);
    if (highlighted) {
        _contentLbl.textColor = [UIColor whiteColor];
    }
    else {
        _contentLbl.textColor = [UIColor blackColor];
    }
}
复制代码

  下面是运行效果,左边是正常情况下,右边是选中状态下:

      

二、UITableView的分割线

  tableview自带了分割线,而且还非常人性化的提供了设置风格和分割线的颜色,但是自带的分割线有个缺点就是即使你的cell只有两三个,分割线也会充满全屏,如下图所示:

  可是实际应用中我们有时并不想让没有cell的地方也有分割线,这个时候我们就需要自己动手丰衣足食了。通常有两种做法:1、通过addSubview的添加一条分割线;2、自绘分割线。大部分人估计都会addSubview的方式,下面我们就讨论一下第二种通过自绘实现分割线。

  首先设置tableView的separatorStyle为UITableViewCellSelectionStyleNone,即禁用tableview自带的分割线,然后在重载cell的drawRect方法,通过Quartz 2D技术直接进行绘制,思路如下,首先绘制整个cell的背景色,然后在cell的最下面绘制分割线,代码片段如下:

复制代码
// 自绘分割线
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillRect(context, rect);
    
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0xE2/255.0f green:0xE2/255.0f blue:0xE2/255.0f alpha:1].CGColor);
    CGContextStrokeRect(context, CGRectMake(0, rect.size.height - 1, rect.size.width, 1));
}
复制代码

  这样绘制分割线也不用担心效率问题,因为只会在cell从隐藏变成显示是调用一次,最上面的那两个运行截图都是通过自绘方式实现的。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值