前言:
--- 細講一下，頂部視圖下拉放大，其中有很多細節非常值得學習，比如說，分割線的設置，狀態欄的設置，向上整體移動和向下offset的變化，圖片的裁切等。都是我一點一點截的圖！終于弄完了！
最終效果圖：
最終效果圖
共分為 8 個部分
- 第一部分 頂部放大的準備工作
- 第二部分 添加 headerView
- 第三部分 運行時攔截全屏返回手勢&導航欄處理細節
- 第四部分 AFN加載圖像的 細節YYWebImage的指示器和頭文件的導入方法
- 第五部分 圖像放大處理
- 第六部分 圖像的整體移動簡單實現
- 第七部分 設置分割線和透明度
- 第八部分 設置狀態欄顏色
demo下載地址
第一部分 頂部放大的準備工作
- 1. 創建一個工程，并嵌入一個Nav,進行基礎布置。
嵌入一個Nav
簡單布置nav
-
2.創建一個類ZYHeaderViewController,并設置其背景顏色為白色。
ZYHeaderViewController
將該類的頭文件，導入ViewController.m中，并設置跳轉。如下圖:
設置跳轉
當前效果圖:
效果圖.gif -
3.準備tableView
圖1
圖2
當前效果:
效果圖.gif
第二部分 添加 headerView
我們使用HMObjcSugar，你可以pod集成.
-
1. 布置headerView
布置headerView
當前效果圖:
效果圖
由上述效果圖顯示，我們的headerView的下面的行是從3、4開始的，出現了這一個問題。我們在看一下視圖層次結構。如下:
視圖層次結構
我們得知了，1、2行，被headerView擋住了。 -
2. 總結一下問題
我們要解決的:
1）把導航欄隱藏起來,并設置狀態欄
導航欄隱藏起來,并設置狀態欄
2）調整表格與headerVIew的間距
我們利用contentInset來調整表格與headerView的間距，如下圖:
調整表格與headerView的間距
運行效果圖如下:
運行效果圖
由上圖我們可知，第 0 行，與headerView之間，還多20，那是因為如下圖所示的原因，所以這樣解決:
解決
效果圖:
效果圖
- 滾動指示器的設置
我們從上邊的效果圖，可得知，滾動顯示器卻不在了，為什莫呢？如下圖分析:
分析
所以呢，在滾動視圖的時候，我們就看不到，滾動指示器了。
該怎么設置呢要?
解決滾動指示器問題
效果圖:
效果圖
第三部分 運行時攔截全屏返回手勢&導航欄處理細節
- 1.發現問題
看圖
問題:我們知道，上述是可以用手拖動的，但是，我們拖到另一個控制器的時候，我們發現，導航欄消失了，我們返回 ，回不去了。
怎么解決這個問題呢？
我們知道，我們在tableView這個頁面將要顯示的時候，隱藏了NAV
顯示nav
如圖所示，nav，顯示了，但是發生了疊加，該怎么解決呢？
animated = YES
第四部分 AFN加載圖像的 細節YYWebImage的指示器和頭文件的導入方法
- 1. 添加UIImageView
添加UIImageView- 2.添加 AFN /YYWebImage
pod- 3. AFN 網絡加載圖片
AFN方法
導入AFN頭文件
導入AFN頭文件
加載圖片，但是不顯示
加載圖片，但是不顯示
從用戶的角度考慮，這種 情況下，用戶會有不好的體驗，那我們應該提示用戶，應該像下圖一樣加上一個小菊花，表示在努力工作中ing.
小菊花
小菊花顯示
圖片加載成功
使用AFN會有個問題，當我們切換的時候，加載的圖片總會閃(緩)一下，應為AFN加載圖片時，圖片如果過大的話，它不會緩存，AFN是用的系統的緩存。
AFN細節- 4. YYWebImage 網絡加載圖片
頭文件的導入
頭文件的導入
加載圖片
加載圖片
第五部分 圖像放大處理
- 1. 分析
我們要使圖片放大處理的話，我們可以使用scrollViewDidScroll：這個代理方法。那么，我們根據什莫讓上邊的圖片放大呢，contentOffset
分析- 2. 打印一下contentOffset
圖解- 3. 設置放大
我們來看放大，我們需要改什莫？
先將headerView和headerViewImage設置成全局，如下圖:
headerView-1
headerView-2
headerViewImage-1
headerViewImage-2
下圖，達到了下滾放大的效果
下滾放大
但是，我們發現一個問題，圖片放大的時候，特別別扭，有點卡頓。那我們怎么解決呢，只有讓圖片等比例填充即可，如下圖:
等比例填充
效果圖:
效果圖.gif
雖然，這種方法，規避了很多復雜的運算，但是，還有一個很不愉快的問題，當我們返回時，會發生下圖這種現象(圖像比底View大):
圖像比底View大
那我們該怎么辦呢？
我們只能裁切一下,如下圖:
裁切
效果圖：
效果圖.gif
問題，解決完畢！！！
第六部分 圖像的整體移動簡單實現
- 1. 簡單的整體移動
簡單的整體移動
此時效果圖:
效果圖.gif
第七部分 設置分割線和透明度
- 1. 問題分析---定點
分析
分析:我們看上面的圖，現在我們的需求是，當表格滾到這個位置就不往上滾了，這個效果怎么實現呢？我們看上面是一個狀態欄的高度。狀態欄 +導航欄的高度是64。
思路
思路:我們讓headerView移動到上圖位置就不動了,高度我們已經算好了，用headerView - 64 就知道headerView的y值了，定到此位置。
min
當offset = min的時候，是處于圖-思路那樣
當offset < min的時候，說明，圖片慢慢的往上移
當offset > min的時候，說明圖片即將移除模擬器
總結如下，當圖片在向上整體移動過程中，offset小于min，headerVIew的y值，取 - offset,反之取 - min;- 2. 設置透明度
效果圖
根據上圖，我們分析，我們打印了 offset / min 可知，當整體向上移動的時候 從offset / min = 0 開始，到了指定位置offset / min = 1；并且徹底的隱藏，導航欄卻顯示。
示例代碼
效果圖:
效果圖.gif
但是沒有導航欄，那怎么樣才能讓導航欄出來呢？- 2. 設置導航欄
其實，在這種demo中導航欄是沒有意思的。步驟如下:
取色
取色
改headerView的背景顏色
改headerView的背景顏色
- 3. 設置分割線
同樣，對于分割線，我們在這個UIView底部，添加一條線，當向上移動時，該線與Nav的底線重合，但是當向下移動時，我們發現這條紅線不動，貌似到了圖片的脖子處，就此，我們明白，當向下移動時，我們需要改變這條線的位置。
查看層次結構圖
查看層次結構圖
添加分割線
添加分割線
效果圖:
效果圖.gif
更改分割線位置
改_lineview
改_lineview
剛才是放大的時候，出現的問題，解決如下:
解決
這樣的話，無論放大還是縮小，線的位置永遠等于headerView減去自己的位置。- 3. 改分割線的顏色
為了，更像
改分割線的顏色
效果圖如下:
效果圖.gif
第八部分 設置狀態欄顏色
- 1. 需求
當圖片越來模糊的時候，狀態欄越來越黑- 2.解決
實例代碼1
實例代碼2
最終結果:請看第一張gif圖.
