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，來保證圖片在變化的過程中可以保持比例。