tableview中下拉放大的一个实现方案(iOS)

RgywGmT3Pk.gif

思路:
如果将imageView作为headerView,将不能随意调整图片的大小,位置,我们不希望图片全部显示,但headerView会限制显示的位置,大小。所以我们采取将imageView添加到tableview顶部的方案。
修改图片大小如果采用计算修改宽高的方式会稍显复杂,这里采用的方案为修改imageView的内容模式contentMode为UIViewContentModeScaleAspectFill(保持图片宽高比并填充),并在监听滚动代理方法中scrollViewDidScroll直接修改imageView的高度,将向下偏移的距离增加到图片高度中,由于修改了内容模式所以图片能保持宽高比放大

步骤1
创建一个imageView并添加到tableView顶部,设置好tableView内边距和imageView的frame

// 设置内边距(让cell往下移动一段距离)
self.tableView.contentInset = UIEdgeInsetsMake(TopViewH * 0.5, 0, 0, 0);
UIImageView *topView = [[UIImageView alloc] init];
topView.image = [UIImage imageNamed:@"tupian"];
topView.frame = CGRectMake(0, -TopViewH, 320, TopViewH);
[self.tableView insertSubview:topView atIndex:0];
self.topView = topView;

步骤2
修改imageView的内容模式contentMode为UIViewContentModeScaleAspectFill
topView.contentMode = UIViewContentModeScaleAspectFill;


- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 向下拽了多少距离
    CGFloat down = -(TopViewH * 0.5) - scrollView.contentOffset.y;
    if (down < 0) return;
    
    步骤3
    将向下偏移的距离增加到图片高度中,图片能保持宽高比放大
    CGRect frame = self.topView.frame;
    // 5决定图片变大的速度,值越大,速度越快
    frame.size.height = TopViewH + down * 5;
    self.topView.frame = frame;
}```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容