iOS 弹性HeaderView 的ScrollView

ScrollView或者TableView在滚动到最顶端,继续向下滚动时,会显露出其"真实的样子",这种效果,在最顶端是图片的时候,尤其的影响体验.

当前越来越多的应用选择将顶部的图片(视图)弹性放大,从而遮掩超出内容的部分.

下面简单的将一下方法的实现:

在需要实现的VC中,声明以下属性:

</pre><span style="color:#009900;">.m</span></p><p><pre name="code" class="objc">@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIView *headerView;
@property (nonatomic)CGSize headerDefaultSize;                       //header的默认大小

在合适的时候给headerDefaultSize赋值

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    CGFloat diff = -self.scrollView.contentOffset.y;
    
    if (self.scrollView.contentOffset.y < 0) {
        CGFloat oldH = self.headerDefaultSize.height;
        CGFloat oldW = self.headerDefaultSize.width;
        
        CGFloat newH = oldH + diff;
        CGFloat newW = oldW *newH/oldH;
        
        self.headerView.frame  = CGRectMake(0, 0, newW, newH);
        self.headerView.center = CGPointMake(oldW/2.0f, (oldH-diff)/2.0f);
        
    }
}