UITableView/UICollectionView使用技巧

前言

知识是无穷无尽，技术需要积累，记录一点一滴，让成长的时间轴上变得充实一些。
今天就讲讲UITableView/UICollectionView的一些使用技巧。结合自己项目情况进行展开。

Header/Footer高度、悬停设置

高度设置

有时候我们需要设置 TableView 的头部和尾部的间距，如果 TableView 的 Style 是 UITableViewStylePlain 的话，头部尾部的高度只需要在代理里面设置高度就行。

但如果是 UITableViewStyleGrouped 类型，这个时候 TableView 是的头部以及尾部高度的设置需要麻烦一些。因为单纯在代理里面设置高度是无效的。
实现代码如下：

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 0.01f;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 1)];
    view.backgroundColor = [UIColor clearColor];
    return view;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 10;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 1)];
    view.backgroundColor = [UIColor clearColor];
    return view;
}

通过上面的代码我们就可以正确的设置高度，同时需要注意的是，UITableViewStyleGrouped时，不能设置 TableView 的tableFooterView、tableHeaderView，不然高度设置会无效。

悬停

TableView的悬停功能只有在 Style 是 UITableViewStylePlain 的时候才有。如果有这么一种需求，就是需要有Header悬停，同时每个section之间需要有间隔。
效果如下：

TableView悬停方式一

方式一(全部悬停)：

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return kHeaderHeight+9;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    BillListModel *model = _sectionArr[section];
    
    UIView *header = ({
        UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, KScreenWidth, kHeaderHeight+9)];
        bgView.backgroundColor = [UIColorTools colorWithTheme:UIColorThemeAppBgColor];
        
        UILabel *titleLab = [[UILabel alloc] initWithFrame:CGRectMake(0, 9, KScreenWidth, kHeaderHeight)];
        titleLab.backgroundColor = [UIColorTools colorWithTheme:UIColorThemeWhite];
        titleLab.textColor = [UIColorTools colorWithTheme:UIColorThemeBlack];
        titleLab.text = model.time;
        [bgView addSubview:titleLab];
        
        UIImageView *lineHBottom = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, titleLab.mj_max_y - 0.5, KScreenWidth, 0.5)];
        lineHBottom.backgroundColor = [UIColorTools colorWithTheme:UIColorThemeSeparatorColor];
        [bgView addSubview:lineHBottom];
        
        bgView;
    });
    return header;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView  {
    if (scrollView == _tableView) {
        UITableView *tableview = (UITableView *)scrollView;
        CGFloat sectionHeaderHeight = kHeaderHeight;
        CGFloat sectionFooterHeight = 9;
        CGFloat offsetY = tableview.contentOffset.y;
        if (offsetY >= 0 && offsetY <= sectionFooterHeight) {
            tableview.contentInset = UIEdgeInsetsMake(-offsetY, 0, -sectionHeaderHeight, 0);
        } else if (offsetY >= sectionFooterHeight && offsetY <= tableview.contentSize.height - tableview.frame.size.height - sectionHeaderHeight) {
            tableview.contentInset = UIEdgeInsetsMake(-sectionFooterHeight, 0, 0, 0);
        } else if (offsetY >= 0 && tableview.contentSize.height >= tableview.contentSize.height) {
            tableview.contentInset = UIEdgeInsetsMake(-sectionFooterHeight, 0, 0, 0);
        }
    }
}

TableView悬停方式二

方式二(部分悬停)：


- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if (section == 0) {
        return 10.f;
    } else if (section == 2) {
        return 0;
    }
    return kHeight4_7(35);
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 10.f;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *headerView = [UIView new];
    headerView.backgroundColor = [UIColorTools colorWithTheme:UIColorThemeWhite];
    if (section == 0) {
        headerView.backgroundColor = [UIColor clearColor];
    }
    return headerView;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    UIView *footerView = [[UIView alloc] init];
    footerView.backgroundColor = [UIColor clearColor];
    return footerView;
}

CollectionView的悬停功能只有在 Style 是 UITableViewStylePlain 的时候才有。如果有这么一种需求，就是需要有Header悬停，同时每个section之间需要有间隔。
效果如下：

CollectionView悬停

滚动监听

UIScrollView 减速

可能通过decelerationRate的属性来设置，它的值域是（0.0，1.0）,当decelerationRate设置为0.1时，当手指touch up时就会很慢的停下来。

UIScrollView 如何判断停止滑动

这里停止滑动的意思要明确一下，有两种:

1、第一种是指手指停止ScrollView。

当手指停止滑动时，iOS会调UIScrollView的delegate

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

如果decelerate还为NO时，它最终停下，否则它还没最终停下

2、第二种是指ScrollView停止滑动，指的滚动条完全停止下来。

当decelerate = true时，iOS才会调UIScrollView的delegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

那UIScrollView真正停止滑动，应该怎么判断呢？
解决方法如下：

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if(!decelerate) {   
        //OK,真正停止了，do something
    }
}
//然后
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    //OK,真正停止了,do something
}

UIScrollView左右滑动到某个位置时，禁止继续向左或者向右滑动

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffsetX = scrollView.contentOffset.x;
    if (contentOffsetX<=0 || contentOffsetX>=kScreenWidth) {
        //当滑动到最左边或者最右边时，禁止继续滑动
        scrollView.scrollEnabled = NO;
    } else {
        scrollView.scrollEnabled = YES;
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    scrollView.scrollEnabled = YES;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    scrollView.scrollEnabled = YES;

}

消息传递

当手指触摸后，scrollView会暂时拦截触摸事件，使用一个计时器，假如在计时器到点后，没有发生手指移动事件，那么，scrollView发送tracking events到被点击的subView。
假如在计时器到点前，发生了移动事件，那么scrollView取消tracking自己发生滚动。

子类可以重载touchesShouldBegin:withEvent:inContentView:决定自己是否接收touch事件。
当pagingEnabled值为YES，会自动滚动到subView的边界，默认是NO。

touchesShouldCancelInContentView:开始发送tracking messages消息给subView的时候
调用这个方法，决定是否发送tracking messages消息到subview，假如返回NO，则发送，YES则不发送。

假如canCancelContentTouches属性是NO，则不调用这个方法来影响如何处理滚动手势。

修改tableView中headerView的位置(类似美团外卖首页)

实现原理就是监听滚动情况，重设scrollView.contentInset即可
效果如下：

修改headerView的位置

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffsety = scrollView.contentOffset.y;
    _contentOffSet_y = contentOffsety;
    //这个header其实是section的header到顶部的距离
    CGFloat header = kBannerHight+[HSFuntionCell cellHeight]+kFooterViewHeight-64;
    
    NSLog(@"=======%lf=====%lf", contentOffsety, header);
    
    if (contentOffsety<=header&&contentOffsety>=0) {
        //当视图滑动的距离小于header时
        scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
        
        self.headerView.layer.borderColor = [UIColorTools colorWithTheme:UIColorThemeWhite].CGColor;
        
    } else if (contentOffsety>header) {
        //当视图滑动的距离大于header时，这里就可以设置section的header的位置，设置的时候要考虑到导航栏的透明对滚动视图的影响
        scrollView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
        
        self.headerView.layer.borderColor = [UIColorTools colorWithTheme:UIColorThemeSeparatorColor].CGColor;
    }
    self.headerView.borderWhich = DDViewBorderTop;
    //设置导航条透明度
    [self setNavigationColor:contentOffsety];
}

顶部拉伸效果(头像拉伸)

实现思路：自定义一个ViewA，作为TableView的headerView，然后监听TableView的滚动，将回调传递给ViewA即可。

效果如下：

顶部拉伸效果

下面是自定义MOActivityTopView

.h文件

@interface MOActivityTopView : UIView

@property (nonatomic, strong) MOActivityModel *model;

- (void)didScroll:(CGFloat)contentOffSetY;

@end

.m文件

#import "MOActivityTopView.h"

#define kViewHeight     (kScreenWidth*340/750.)
#define kTopHeight      (kScreenWidth*240/750.)
#define kBottomHeight   (kScreenWidth*100/750.)

@interface MOActivityTopView ()

/// 背景图
@property (nonatomic, strong) UIImageView *backgroundImgV;
/// 毛玻璃
@property (nonatomic, strong) UIVisualEffectView *visualEffectView;
/// 活動圖
@property (nonatomic, strong) UIImageView *activityImgV;
/// 活動名稱
@property (nonatomic, strong) UILabel *activityLab;

@end

@implementation MOActivityTopView

- (instancetype)init {
    if (self = [super initWithFrame:CGRectMake(0, 0, kScreenWidth, kViewHeight)]) {
        [self setUp];
    }
    return self;
}

#pragma mark - Getter
-(UIImageView *)backgroundImgV {
    if (_backgroundImgV == nil) {
        _backgroundImgV = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.dd_w, kTopHeight)];
        [_backgroundImgV setContentMode:UIViewContentModeScaleAspectFill];
        [_backgroundImgV setClipsToBounds:YES];
    }
    return _backgroundImgV;
}

- (void)setUp {
    [self addSubview:self.backgroundImgV];
    
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    
    _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //    _visualEffectView.alpha = 0.8;
    
    _visualEffectView.frame = self.backgroundImgV.frame;
    [self addSubview:_visualEffectView];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, self.backgroundImgV.dd_max_y, kScreenWidth, kBottomHeight)];
    bgView.backgroundColor = [UIColorTools colorWithTheme:UIColorThemeWhite];
    [self addSubview:bgView];
    
    CGFloat height = (kScreenWidth*160/750.);
    CGFloat width = height/(16/21.);
    _activityImgV = [[UIImageView alloc] initWithFrame:CGRectMake(15, bgView.dd_h-7-height, width, height)];
    [bgView addSubview:_activityImgV];
    
    _activityLab = [[UILabel alloc] initWithFrame:CGRectMake(_activityImgV.dd_max_x+8, 0, kScreenWidth-_activityImgV.dd_max_x-8-15, kBottomHeight)];
    _activityLab.textColor = [UIColorTools colorWithTheme:UIColorThemeBlack];
    _activityLab.numberOfLines = 2;
//    _activityLab.adjustsFontSizeToFitWidth = YES;
    [bgView addSubview:_activityLab];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    _activityImgV.clipsToBounds = YES;
    _activityImgV.layer.masksToBounds = YES;
    _activityImgV.layer.borderWidth = 1.5;
    _activityImgV.layer.borderColor = [UIColorTools colorWithTheme:UIColorThemeWhite].CGColor;
    _activityImgV.layer.cornerRadius = kViewCornerRadius;
}

- (void)setModel:(MOActivityModel *)model {
    _model = model;
    [_activityImgV sd_setImageWithURL:kMOImageUrlSet(model.ActivityURL) placeholderImage:[UIImage placeholderImage_activity]];
    [_backgroundImgV sd_setImageWithURL:kMOImageUrlSet(model.ActivityURL) placeholderImage:kImageSet(@"Icon-noti")];
    _activityLab.text = model.ActivityName;
}

- (void)didScroll:(CGFloat)contentOffSetY {
    //图片高度
    CGFloat imageHeight = self.dd_h;
    //图片宽度
    CGFloat imageWidth = kScreenWidth;
    //图片上下偏移量
    CGFloat imageOffsetY = contentOffSetY;
    
//    NSLog(@"图片上下偏移量 imageOffsetY:%f ->",imageOffsetY);
    
    //下拉
    if (imageOffsetY < 0) {
        CGFloat totalOffset = imageHeight + ABS(imageOffsetY);
        CGFloat f = totalOffset / imageHeight;
        self.backgroundImgV.frame = CGRectMake(-(imageWidth * f - imageWidth) * 0.5, imageOffsetY, imageWidth * f, totalOffset);
    }
    
//    //上拉
//    if (imageOffsetY > 0) {
//        CGFloat totalOffset = imageHeight - ABS(imageOffsetY);
//        CGFloat f = totalOffset / imageHeight;
//        [self.backgroundImgV setFrame:CGRectMake(-(imageWidth * f - imageWidth) * 0.5, imageOffsetY, imageWidth * f, totalOffset)];
//    }
    _visualEffectView.frame = self.backgroundImgV.frame;
}

@end

监听滚动

- (UIView *)topHeaderView {
    if (!_topHeaderView) {
        _topHeaderView = [[MOActivityTopView alloc] init];
        _topHeaderView.model = _model;
    }
    return _topHeaderView;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffSetY = scrollView.contentOffset.y;
    [self.topHeaderView didScroll:contentOffSetY];
}

再一次感谢您花费时间阅读这篇文章！

微博： @Danny_吕昌辉
博客： SuperDanny

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342