Twitterヘッダのようなビヨーンな拡大縮小を可能にする動的に高さ可変なテーブルヘッダライブラリ

Published on 2014年5月20日火曜日 Leave your thoughts »

	Tweet

※変な...

Twitterのヘッダ画像のような効果が作れる。

※githubよりリンクを拝借

導入は簡単でインスタンスを１個作っていくつかのメソッドを呼ぶだけ。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _stretchableTableHeaderView = [HFStretchableTableHeaderView new];
    [_stretchableTableHeaderView stretchHeaderForTableView:self.tableView withView:_stretchView];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [_stretchableTableHeaderView scrollViewDidScroll:scrollView];
}

- (void)viewDidLayoutSubviews
{
    [_stretchableTableHeaderView resizeView];
}

ソースコードも正味20-30行と短い。内容は見てもらうとしてUITableViewのスクロールに合わせてビューのサイズを替えているだけ。ちょっとしたアイディアでうまく実現できてる。

サンプルのStoryboard

サンプルではやっていないが、scrollViewdidiScroll: で画像を拡大すれば Twitterヘッダそっくりな動きになるのでは。

ちょっとやってみた。
HFStretchableTableHeaderView.m のscrollViewDidScrollにUIView.transformを入れてみる。

- (void)scrollViewDidScroll:(UIScrollView*)scrollView
{
    CGRect f = _view.frame;
    f.size.width = _tableView.frame.size.width;
    _view.frame = f;
    
    if(scrollView.contentOffset.y < 0) {
        CGFloat offsetY = (scrollView.contentOffset.y + scrollView.contentInset.top) * -1;
        initialFrame.origin.y = offsetY * -1;
        initialFrame.size.height = defaultViewHeight + offsetY;
        _view.frame = initialFrame;
        // 追加 >>>
        if (offsetY >= 0.0) {
            CGFloat scale = 1.0 + offsetY/defaultViewHeight;
            _view.transform = CGAffineTransformMakeScale(scale, scale);
        }
        // <<< 追加
    }
}

スクロールオフセットを元に倍率を決めてtransformへ入れてみた。さてどうだろう。

これが