IT虾米网

iOS tableView下拉图片放大

lxf 2018年06月23日 手机开发 1087 0

其实这个效果,本质上就是在你tableView下拉 造成offset时候, 保持你顶部图片的y坐标点还停留在下拉时屏幕的顶点(offset), 而图片的长度变为原始的height长度-(offset ) 就达到了下拉放大的效果。

 直接上代码了:

                      1. 首先创建一个UIView作为headerView

            _topView = [[UIView alloc]initWithFrame:CGRectMake(, , MCAPPWidth, 80)];

            _tableView.tableHeaderView = _topView;

           2.其次创建一个UIImageView放那张图片 

            _topImageView = [[UIImageView alloc]initWithFrame:CGRectMake(, , MCAPPWidth, 80)];

            _topImageView.contentMode = UIViewContentModeScaleAspectFill;

            _topImageView.layer.masksToBounds = YES;

            [_topImageView sd_setImageWithURL:[NSURL URLWithString:nil] placeholderImage:[UIImage imageNamed:@"mian_bg"]];

            [_topView addSubview:_topImageView];


           3.最后引入scrollView的代理方法 监听frame的变化

            

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    if (_tableView == scrollView) {

     CGFloat yOffset = _tableView.contentOffset.y;

    //下拉图片放大

    if (yOffset < ) {

        _topView.frame = CGRectMake(, yOffset, MCAPPWidth, 80 * Height - yOffset);

        _topImageView.frame = CGRectMake(, yOffset, MCAPPWidth, 80 * Height - yOffset);

        NSLog(@"%.2f", _topImageView.y);

    }

    else {

        _topView.frame = CGRectMake(, , MCAPPWidth, 80 * Height - yOffset);

        _topImageView.y = yOffset * 0.65;

        _topImageView.height = 80 * Height - yOffset * 0.65;

    }

   }

}

我这里上拉 图片做的是相对位移 如果只需要下拉变大效果 上拉回原样 需要把else 里的 后两句代码注释掉, 换成_topImageView.y = _topView.y值保持一样即可。 我这里的.y是自己封装的方法直接copy会出错哦。
评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!