UITableView 顶部能够放大的图片

 

UITableView 顶部能够放大的图片

现在有挺多的应用在 UITableView 顶部加入图片，通过拖拽 UITableView 来实现图片的放大。

 

对比一下腾讯出品的两款App

QQ:可展示更多的图片，向下滑动TableView，顶部的图片可以展示更多的内容，而不是局限于默认状态下可展示的默认大小。

　　

 

再来看看微信的朋友圈：固定的大小，向下拖动TableView后，顶部露出了背景图片。

　　

 

两种实现方式，各有各的好处。微信的效果是默认的，即什么都不用设置。这种状态下，我们可以在背景图上做文章，加个Logo之类的都可以。

QQ的实现方式是我比较喜欢的，对于不需要下拉刷新的页面，又不想分配太大的空间来显示顶部图片，则可以选择这种。想要看大图？只要下拉TableView即可。^_^

 

如何开始

设置一个 UIImageView 为 UITableView 的 tableHeaderView，设置 UITableView 的 UIScrollViewDelegate

 table.delegate = self;

在 .m 文件中加入如下代码，在 TableView 滚动时，动态改变 tableHeaderView 的状态。

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint offset = scrollView.contentOffset;
    if (offset.y < 0) {
        CGRect rect = merchantImage.frame;
        rect.origin.y = offset.y;
        rect.size.height = 140 - offset.y;
        merchantImage.frame = rect;
    }
}

 

举一反三

1.鉴于 UITableView 是 UIScrollView 的子类，添加在 UIScrollView 顶部的图片也能实现这个效果。

2.对于添加在顶部的 UIImageView，可以设置它的 contentMode，来保证图片在变化的过程中可以保持比例。