最近尝试模仿实现B站的竖屏视频的拖动效果,实现的最终效果图如下：
（视频有最大尺寸和最小尺寸限制，通过滑动UITableView来动态更改视频的高度）
github上Demo地址
相应的实现文件名称为:PullAndScrollViewController
项目开始前需要注意的点
在做这个项目时遇到了一些坑，在这里分享一下
使用Masonry.h进行view的初始化布局，之后在viewDidLayoutSubViews或者按钮的实现方法中改变view的frame，主要是改变高度
会发现，不论怎么写，界面上view的大小都不发生变化
但是使用RacObserve监听view的frame属性，就会发现，其实view的frame已经发生了变化
但是在界面上表现不出来
甚至在更改frame的大小后加上强制刷新的代码，界面上的表现依旧没什么反应
//强制刷新代码
[self.view setNeedsLayout];
[self.view layoutifNeeded];
后来发现，如果初始使用masonry布局进行约束，那么之后更改的话，同样需要使用masonry布局约束进行更改，这样可以很好的达到效果
如果前面布局使用frame直接布局，那么后面不论是更改frame还是通过masonry更改约束都能实现相应的效果
具体的原因我还没有确定，通过查询资料发现：
参考链接：https://www.sohu.com/a/195141167_163917
该文章中有提到：
意思就是masonry布局的并不能马上获取到frame的高度大小，autolayout转化为frame需要一定的时间，或许是因为使用masonry布局的，后续使用frame直接更改会出现一些问题
之后，去查看了masonry在github上的库，在其中的issue中看到了相同的提问
可惜，并没有进行解答
等后面找到相应的解答之后再更新在这里
项目中TestViewController就是为了验证这个问题所写的测试文件，其中使用#import <ReactiveObjC/ReactiveObjC.h>来对myView的frame属性进行监听
有兴趣的可以看看
具体的实现步骤
具体的实现文件为pullAndScrollViewConroller
在.h中定义相关的属性
@property (nonatomic, strong) UIView *myView;
@property (nonatomic, assign) CGFloat maxViewHeight;//最大高度
@property (nonatomic, assign) CGFloat minViewHeight;//最小高度
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, assign) CGPoint scrollBeginDraggingOffset;
之后在.m中实现初始的基本的界面以及懒加载
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.navigationController.navigationBar.translucent = NO;
self.title = @"pull scrollView Demo 使用frame来改变";
//初始化高度
self.minViewHeight = 200;
self.maxViewHeight = 400;
[self.view addSubview:self.myView];
[self.view addSubview:self.tableView];
//这个方法主要为了查看过程中一些属性的变化，在使用时可以将其注释掉
[self addObserve];
}
- (void)addObserve {
typeof(self) __weak weakSelf = self;
[RACObserve(self.myView, frame) subscribeNext:^(id _Nullable x) {
typeof(weakSelf) __strong self = weakSelf;
NSLog(@"--------------");
NSLog(@"height高度发生了变化%f",self.myView.frame.size.height);
}];
[RACObserve(self, scrollBeginDraggingOffset) subscribeNext:^(id _Nullable x) {
typeof(weakSelf) __strong self = weakSelf;
NSLog(@"1111111111111111");
NSLog(@"scrollBeginDraggingOffSet发生了变化%f",self.scrollBeginDraggingOffset.y);
}];
[RACObserve(self.tableView, contentOffset) subscribeNext:^(id _Nullable x) {
typeof(weakSelf) __strong self = weakSelf;
NSLog(@"222222222222222");
NSLog(@"contentOffsetY发生了变化%f",self.tableView.contentOffset.y);
}];
}
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
self.tableView.frame = CGRectMake(0, CGRectGetMaxY(self.myView.frame), self.view.bounds.size.height, self.view.bounds.size.height - CGRectGetMaxY(self.myView.frame));
}
相应的懒加载为
#pragma mark - lazy load
- (UIView *)myView {
if (_myView) {
return _myView;
}
_myView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 400)];
_myView.backgroundColor = [UIColor yellowColor];
return _myView;
}
- (UITableView *)tableView {
if (_tableView) {
return _tableView;
}
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 400, self.view.bounds.size.width, 200) style:UITableViewStylePlain];
_tableView.backgroundColor = [UIColor clearColor];
_tableView.showsVerticalScrollIndicator = YES;
_tableView.delegate = self;
_tableView.dataSource = self;
[_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"UITableViewCell"];
return _tableView;
}
实现UITableView的delegate/datasource协议
#pragma mark - UITableViewDelegate/DataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 100;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
cell.textLabel.text = [NSString stringWithFormat:@"第%ld个cell",(long)indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deselectRowAtIndexPath:indexPath animated:YES];
NSLog(@"点击了第%ld个cell",(long)indexPath.row);
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 44;
}
这样基金的界面就已经写好了，运行后的效果为：
此时滑动的话，上方黄色的UIView不会更换大小
为了达到我们最初的效果，我们的思路是在滑动的时候根据UITableView的contentOffset.y的大小与视频高度的比较判断来设置UITableView的偏移量
以此达到我们的效果
在viewDidLayoutSubViews中，我们设置了UITableView的顶部与myView的底部紧挨着
UITableView的滑动调用的就是UIScrollViewDelegate，前面有一篇文章专门写了UIScrollViewDelegate中各个协议方法的调用顺序。
ScrollView滑动协议方法探究
主要的就是在ScrollViewDidScroll协议方法中进行相应的逻辑处理
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//获取UITableView的偏移量
CGFloat offsetY = scrollView.contentOffset.y;
//计算UITableView的最大偏移量
CGFloat maxOffsetY = scrollView.contentSize.height -
scrollView.contentInset.top - scrollView.contentInset.bottom -
scrollView.frame.size.height;
if (offsetY > 0) {
NSLog(@"向上滑动offsetY为正值,值的大小为%f",offsetY);
} else {
NSLog(@"向下滑动offsetY为负值,值的大小为%f",offsetY);
}
CGFloat height = self.myView.bounds.size.height;
CGFloat currentHeight = self.myView.bounds.size.height;
//根据当前view的高度判断，是否处在maxViewHeight和minViewHeight之间，如果处在之间，需要修改view的高度，不需要改变UITableView的contentOffset
//下面的逻辑就是处在最大高度和最小高度之间，偏移多少，就修改高度多少，这样UITableView就不需要改变contentOffsetY
if (offsetY > 0) {
//表示向上滑动
if (currentHeight > self.minViewHeight) {
height = height - offsetY;
}
} else {
//表示向下滑动
if (currentHeight < self.maxViewHeight) {
height = height - offsetY;
}
}
//判断height在减去offsetY之后的高度是否还处于maxViewHeight和minViewHeight之间
if (height < self.minViewHeight) {
height = self.minViewHeight;
} else if (height > self.maxViewHeight) {
height = self.maxViewHeight;
}
//当height的高度不等于currentHeight时，说明view的height发生了变化，需要修改view的frame的大小，UITableView的不需要再添加代码修改，UITableView的frame修改我们一直放在了viewDidLoadLayoutSubViews中
if (height != currentHeight) {
self.myView.frame = CGRectMake(0, CGRectGetMinY(self.myView.frame), CGRectGetWidth(self.view.frame), height);
[self.view setNeedsLayout];
}
}
这样的话，相应的逻辑基本上就实现了，但是运行之后，看到效果并不如我们所想的那样
这样运行的效果图为：
从图中可以看出，view的高度变化总是快速变化，和我们预期的想法不一致
后面使用RACObserve监听UITableView的contentOffset属性
[RACObserve(self.tableView, contentOffset) subscribeNext:^(id _Nullable x) {
typeof(weakSelf) __strong self = weakSelf;
NSLog(@"222222222222222");
NSLog(@"contentOffsetY发生了变化%f",self.tableView.contentOffset.y);
}];
经过调试发现了逻辑上的漏洞
首先需要明确一点，对于UITableView，如果改变它的frame的位置，比如向上移动100，它的contentOffsyY会保持原状，不会发生变化
但是如果通过滑动来改变位置的话，contentOffsetY会发生一些变化
这部分可以通过自己编写例子验证，在Test2ViewController中我进行的这个验证
因为只要滑动，contentOffsetY就会有变化
上面的逻辑漏洞也就不难发现，在
if (height != currentHeight) {
self.myView.frame = CGRectMake(0, CGRectGetMinY(self.myView.frame), CGRectGetWidth(self.view.frame), height);
[self.view setNeedsLayout];
}
这里，我们修改myView的frame之后，viewDidLayoutSubViews中会跟着修改UITableView的frame，这个过程中按照我们的设想，contentOffsetY不应该发生变化，甚至在滑动的过程中，修改的都是view的height高度，不应该改变contentOffstY
所以，最直接的就是记录下最初滑动前UITableView的contentOffsetY，之后在改变myView的frame之后，立马使用setContentOffset设置UITableView的偏移量和滑动前相同即可
记录滑动前的偏移量，我们可以在- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView这个方法中国呢记录
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
NSLog(@"scrollViewWillBeginDragging...");
CGPoint p = scrollView.contentOffset;
CGFloat maxOffsetY = scrollView.contentSize.height - scrollView.contentInset.bottom - scrollView.contentInset.top - scrollView.frame.size.height;
if (p.y >= maxOffsetY) {
p.y = maxOffsetY;
}
self.scrollBeginDraggingOffset = p;
}
之后，scrollViewDidSCroll中的逻辑需要添加以下代码
CGFloat originOffsetY = MAX(0, self.scrollBeginDraggingOffset.y);
offsetY = MIN(offsetY, maxOffsetY) - originOffsetY;
其他的相同
if (height != currentHeight) {
self.myView.frame = CGRectMake(0, CGRectGetMinY(self.myView.frame), CGRectGetWidth(self.view.frame), height);
//加一句这个代码
[scrollView setContentOffset:CGPointMake(0, originOffsetY)];
[self.view setNeedsLayout];
}
这样运行后，最终的效果图
和我们预期的结果一致
总结
github上Demo地址
相应的实现文件名称为:PullAndScrollViewController
