iOS开发实现类似B站竖屏视频的拖动效果

时间:2021-7-21 作者:qvyue

最近尝试模仿实现B站的竖屏视频的拖动效果,实现的最终效果图如下:

iOS开发实现类似B站竖屏视频的拖动效果
最终效果图.gif

(视频有最大尺寸和最小尺寸限制,通过滑动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
该文章中有提到:

首先你要知道autolayout和frame的关系,autolayout最终也是转成frame,masonry是建立在autolayout之上的。你没获取到正确的值,那是因为约束还没布局完成。相当于就是我们给一定的约束,系统内部自己去根据约束条件转成对应的frame,而这需要一个过程。想要拿到正确的frame最好的就是让autolayout完成之后,什么时候完成呢?那就是在layoutsubviews for view or didlayoutsubviews for controller 里获取,当然在控制器的viewdidappear里也拿得到,但是正确做法和最佳做法还是在控制器里的viewdidlayout里获取最好~因为autolayout会根据约束,不停的去改变frame,这方法里最后拿到的frame就是最终姿势.

意思就是masonry布局的并不能马上获取到frame的高度大小,autolayout转化为frame需要一定的时间,或许是因为使用masonry布局的,后续使用frame直接更改会出现一些问题

之后,去查看了masonry在github上的库,在其中的issue中看到了相同的提问

iOS开发实现类似B站竖屏视频的拖动效果
image.png

可惜,并没有进行解答
等后面找到相应的解答之后再更新在这里

项目中TestViewController就是为了验证这个问题所写的测试文件,其中使用#import 来对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;
}

这样基金的界面就已经写好了,运行后的效果为:

iOS开发实现类似B站竖屏视频的拖动效果
image.png

此时滑动的话,上方黄色的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 = 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];
    }
}

这样的话,相应的逻辑基本上就实现了,但是运行之后,看到效果并不如我们所想的那样
这样运行的效果图为:

iOS开发实现类似B站竖屏视频的拖动效果
初步效果图.gif

从图中可以看出,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];
    }

这样运行后,最终的效果图

iOS开发实现类似B站竖屏视频的拖动效果
动态改变视频大小.gif

和我们预期的结果一致

总结

github上Demo地址
相应的实现文件名称为:PullAndScrollViewController

iOS开发实现类似B站竖屏视频的拖动效果
动态改变视频大小.gif
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。