美文网首页
iOS-高仿QQ空间视频列表关闭效果

iOS-高仿QQ空间视频列表关闭效果

作者: 音乐壁纸 | 来源:发表于2018-03-10 20:25 被阅读132次

    iOS高仿QQ空间视频列表关闭效果,只要你稍微懂点控件的运用,保证你能看懂!(Demo在底部)

    效果图

    iOS高仿QQ动态视频列表关闭.gif

    在编写这个效果的时候遇到很多问题,如下(效果图和Demo在底部)

    • UIScrollView在拖动的时候是无法改变自身Frame的
    • 在UIScrollView中添加UIPanGes手势,上下拖动时会和手势发生冲突,就算实现同时响应手势的代理,也达不到想要的效果(博主开始就是这样做的)
    • 在UITableView的代理中,根据UIScrollView的contentOffset.y设置当前UIScrollView的Y坐标会发现效果有了,但不是我们想要的

    开始实现(文章中A代表第一个控制器,B代表第二个控制器,也就是做关闭效果的)

    1.创建两个控制器,这里不多说。创建的内容根据需求实现

    2.在B控制器中创建一个UIImageView,Frame铺满全屏,然后获取到上一个控制器,并截图上个控制器View,把截屏的图片设置给创建的UIImageView

    /** 获取上一个控制器 */
    - (UIViewController *)getPresentedViewController
    {
        UIViewController *appRootVC = [UIApplication sharedApplication].keyWindow.rootViewController;
        UIViewController *topVC = appRootVC;
        if (topVC.presentedViewController) {
            topVC = topVC.presentedViewController;
        }
        return topVC;
    }
    
    /** 截屏 */
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, [UIScreen mainScreen].scale);
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        [self.layer renderInContext:ctx];
        UIImage *snapshot = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return snapshot;
    

    3.在B控制器中创建一个TableView,并实现<UITableViewDelegate,UITableViewDataSource>

    4.写出正在滚动的代理方法

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    

    5.在方法中判断是否手动滑动,如果不是则直接return,反之改变UITableView的背景颜色透明度

    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = offsetY/200;
    scrollView.backgroundColor = [UIColor colorWithRed:0/255.f green:0/255.f blue:0/255.f alpha:1 - -alpha];
    

    6.在停止拖动的代理中判断滚动的范围(这里我们用的是120),如果达到多少就返回,反之保持原状不返回,为什么用"-scrollView.contentOffset.y",读者打印出来自然就明白了

    /** 取消拖动的时候 */
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
        if(-scrollView.contentOffset.y<120){
            [self showMenuController];
        }
        else{
            scrollView.backgroundColor = [UIColor clearColor];
            [self dismissMenuController];
        }
    }
    
    /** 显示当前控制器 */
    - (void)showMenuController{
        [UIView animateWithDuration:0.3 animations:^{
            self.tableView.frame = CGRectMake(0, 0, CGRectGetWidth(self.tableView.frame), CGRectGetHeight(self.tableView.frame));
        }];
    }
    
    /** 退出当前控制器 */
    - (void)dismissMenuController{
        [UIView animateWithDuration:0.3 animations:^{
            CGRect tempFrame = self.tableView.frame;
            tempFrame.origin.y = self.tableView.bounds.size.height;
            self.tableView.frame = tempFrame;
        } completion:^(BOOL finished) {
            [self dismissViewControllerAnimated:NO completion:nil];
        }];
    }
    

    好了,直到这里效果就出来了。实现原理就是根据contentoffset.y改变背景透明度,前提是UIImageView必须在UITableView的底部

    期待你

    若你觉得我的文章对你有帮助,欢迎到关于我对我打赏

    如果你又更好的实现思路,欢迎评论留言一起讨论

    插入一条小广告,作者近期开通了一个公众号,里面有很多搞(DOU)笑(BI)、有内涵的视频和爆笑图,每天都在更新哦,公众号名称:(呼呼段子手)或扫描下方二维码,欢迎添加关注哦。如果Demo中有不明白的地方也可以在公众号直接发消息给我哦!

    qrcode_for_gh_688ee2beeffb_344.jpg

    Demo地址

    相关文章

      网友评论

          本文标题:iOS-高仿QQ空间视频列表关闭效果

          本文链接:https://www.haomeiwen.com/subject/ghvbfftx.html