美文网首页
UIScrollView悬停子控件

UIScrollView悬停子控件

作者: Coder007 | 来源:发表于2017-01-22 18:10 被阅读282次

    UIScrollView中的子控件在滑动的过程中悬停

    • 在日常开发中,有一种场景,在UIScrollView中顶部是一个图片,下面是一个工具条,下面是其他的一些数据,当向上滑动到工具条的top触及顶部的时候,工具条将会悬停,也就是下面这种情况


      悬停.gif
    • 思路:
      • 在scrollViewDidScroll:方法中
      • 当向上滚动的时候,如果向上的偏移量到达工具条的时候,将工具条的父控件修改成控制器的view,同时设置工具条的y
      • 当向下滚动的时候,当向上的偏移量小于顶部图片的高度的时候,将工具条的父控件修改成UIScrollView,还原y值
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        // toolView悬停
        CGFloat imageH = self.imageView.frame.size.height;
        CGFloat offsetY = scrollView.contentOffset.y;
        if(offsetY >= imageH){
            // 将toolView添加到控制器view中,设置Y值为0
            CGRect toolF = self.toolView.frame;
            toolF.origin.y = 0;
            self.toolView.frame = toolF;
            [self.view addSubview:self.toolView];
        }else{
            // 将toolView添加到scrollView中,还原frame
            self.toolView.frame = self.toolViewF;
            [self.scrollView addSubview:self.toolView];
        }
    }
    

    UIScrollView下拉放大顶部图片

    • 在开发中也可能遇到这样的需求:当UIScrollView向下滚动的时候,顶部的图片放大,这种需求一般出现的"我的"界面,如同下面这样
    下拉.gif
    • 思路:
      • 这个其实很简单,当UIScrollView的contentOffset的y值小于0 的时候
      • 设置顶部UIImageView的形变属性,这个时候就需要设置一个形变的比例,这个可以根据自己的需求
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGFloat offsetY = scrollView.contentOffset.y;
        // 下拉放大顶部图片
        if(offsetY < 0){
            // 放大比例可以根据需要随便写
            CGFloat scale = 1 - (offsetY / 70);
            self.imageView.transform = CGAffineTransformMakeScale(scale, scale);
        }
    }
    
    Demo地址:github地址

    相关文章

      网友评论

          本文标题:UIScrollView悬停子控件

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