您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页实现一个类似iOS9全局搜索的TableView Section

实现一个类似iOS9全局搜索的TableView Section

来源:伴沃教育

最终效果

先上图:

这个TableView的Section Header有什么特殊之处呢?
首先,它是半透明的,其次,当Cell滑动到Header下方的时候Cell的内容并不会因为Header是透明的而显示在Header的下方。
正常情况下应该是长这样的:

可以看见,的确有点丑,但是实现第一张图中的效果其实说难不难说简单也没那么简单,关键是要利用好一个东西:layer.mask

说说思路

假设Header的高度是20px,图中情况需要做特殊处理的Header一定位于UITableView的最顶部,我们所需要做的就是,根据当前UITableViewcontentOffSet以及Header的高度,计算出对应的Cell需要隐藏的部分,以此为依据为Cell创建一个大小与其一样大小的mask,其中需要隐藏的那部分设为透明,剩下的设为纯色,这个操作可以在scrollViewDidScroll的回调方法中进行

直接亮代码

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    UITableView* tableView = (UITableView*)scrollView;
    //遍历TableView中所有显示的cell
    for (UITableViewCell *cell in tableView.visibleCells) {
         //计算需要隐藏的高度:当前scrollView的contentOffset的y坐标+Header的高度-cell的y坐标
        CGFloat hiddenFrameHeight = scrollView.contentOffset.y + HEADERHEIGHT - cell.frame.origin.y;
        if (hiddenFrameHeight >= 0 && hiddenFrameHeight <= cell.frame.size.height) {
              //该方法用于对cell设置mask
            [cell maskCellFromTop:hiddenFrameHeight];
        }
    }
}

下面就是cell的操作了,这里因为跟cell的具体内容无关,可以使用category直接写扩展

- (void)maskCellFromTop:(CGFloat)margin {
    if (margin > 0) {
        self.layer.mask = [self visibilityMaskWithLocation:margin/self.frame.size.height];
        self.layer.masksToBounds = YES;
    } else {
        self.layer.mask = nil;
    }
}

- (CAGradientLayer *)visibilityMaskWithLocation:(CGFloat)location {
    CAGradientLayer *mask = [CAGradientLayer layer];
    mask.frame = self.bounds;
    //上半部分是透明,下半部分非透明
    mask.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:1 alpha:0] CGColor], (id)[[UIColor colorWithWhite:1 alpha:1] CGColor], nil];
    mask.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:location], [NSNumber numberWithFloat:location], nil];
    return mask;
}

贴效果图

另外还有一些细节
1.分割线不属于cell,所以要实现这个效果,分割线需要直接在cell里加而不是使用系统自带的
2.在cell初始化或者复用的时候记得重置mask的状态

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务