美文网首页
iOS顶部实现下拉放大效果

iOS顶部实现下拉放大效果

作者: younger_times | 来源:发表于2017-10-18 11:06 被阅读130次

    在很多应用中都会发现首页顶部图片有下拉放大的效果。其实实现很简单。关键是scrollview的offsetcontentinset设置;

    1. offset设置

    固定图片的顶部位置y与增大height。

    #pragma mark -- UIScrollViewDelegate
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
        CGFloat y = scrollView.contentOffset.y;
        if (y < 0) {
            //获得原有需要放大的frame
            CGRect frame = self.marqueeScrollView.frame;
            
            //保持y不变
            frame.origin.y = y;
            
            //高度随增加而增加 (offsetY本身是负数,设置高度  负负得正嘛)
            frame.size.height =  -y;
            self.marqueeScrollView.frame = frame;
        }
    }
    
    

    2. contentinet设置

    放大视图的高度设置

    contentinet 设置是插入一段padding在scrollview中,你会发现,停止下拉后,offset的变动不在为0 ,而是你插入的padding值大小。
    (因为放大视图的的高度由offset决定,offset会归零。)

    核心代码

    #define marqueeHeight 150
    
     self.scrollView.delegate = self;
     //插入高度值
     self.scrollView.contentInset = UIEdgeInsetsMake(marqueeHeight, 0, 0, 0);
     [self.scrollView addSubview:self.marqueeScrollView];
     //修复在scrollViewDidScroll下拉时的问题,注释运行可见bug
     [self.scrollView setContentOffset:CGPointMake(0, -marqueeHeight) animated:YES];
    
    -(UIScrollView *)marqueeScrollView{
        if (!_marqueeScrollView) {
            _marqueeScrollView = [[UIScrollView alloc]init];
            //AutoFrame是我自己尺寸适配的代码。SCREEN_WIDTH为屏幕宽度宏定义
            _marqueeScrollView.frame = AutoFrame(0, -marqueeHeight, SCREEN_WIDTH, marqueeHeight);
            _marqueeScrollView.backgroundColor = [UIColor orangeColor];
        }
        return _marqueeScrollView;
    }
    
    

    抱歉,没demo.....上面都是核心的代码。marqueeScrollView 是我懒加载的视图层,你可以替换成ImgView试试。

    相关文章

      网友评论

          本文标题:iOS顶部实现下拉放大效果

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