前言:
--- 細(xì)講一下冬阳，頂部視圖下拉放大，其中有很多細(xì)節(jié)非常值得學(xué)習(xí)党饮，比如說(shuō)肝陪，分割線的設(shè)置，狀態(tài)欄的設(shè)置刑顺，向上整體移動(dòng)和向下offset的變化氯窍，圖片的裁切等。都是我一點(diǎn)一點(diǎn)截的圖蹲堂！終于弄完了狼讨！
最終效果圖：
最終效果圖
共分為 8 個(gè)部分
- 第一部分 頂部放大的準(zhǔn)備工作
- 第二部分 添加 headerView
- 第三部分 運(yùn)行時(shí)攔截全屏返回手勢(shì)&導(dǎo)航欄處理細(xì)節(jié)
- 第四部分 AFN加載圖像的 細(xì)節(jié)YYWebImage的指示器和頭文件的導(dǎo)入方法
- 第五部分 圖像放大處理
- 第六部分 圖像的整體移動(dòng)簡(jiǎn)單實(shí)現(xiàn)
- 第七部分 設(shè)置分割線和透明度
- 第八部分 設(shè)置狀態(tài)欄顏色
demo下載地址
第一部分 頂部放大的準(zhǔn)備工作
- 1. 創(chuàng)建一個(gè)工程，并嵌入一個(gè)Nav,進(jìn)行基礎(chǔ)布置贯城。
嵌入一個(gè)Nav
簡(jiǎn)單布置nav
-
2.創(chuàng)建一個(gè)類ZYHeaderViewController,并設(shè)置其背景顏色為白色熊楼。
ZYHeaderViewController
將該類的頭文件，導(dǎo)入ViewController.m中能犯，并設(shè)置跳轉(zhuǎn)鲫骗。如下圖:
設(shè)置跳轉(zhuǎn)
當(dāng)前效果圖:
效果圖.gif -
3.準(zhǔn)備tableView
圖1
圖2
當(dāng)前效果:
效果圖.gif
第二部分 添加 headerView
我們使用HMObjcSugar，你可以pod集成.
-
1. 布置headerView
布置headerView
當(dāng)前效果圖:
效果圖
由上述效果圖顯示踩晶，我們的headerView的下面的行是從3执泰、4開(kāi)始的，出現(xiàn)了這一個(gè)問(wèn)題渡蜻。我們?cè)诳匆幌乱晥D層次結(jié)構(gòu)术吝。如下:
視圖層次結(jié)構(gòu)
我們得知了，1茸苇、2行排苍，被headerView擋住了。 -
2. 總結(jié)一下問(wèn)題
我們要解決的:
1）把導(dǎo)航欄隱藏起來(lái),并設(shè)置狀態(tài)欄
導(dǎo)航欄隱藏起來(lái),并設(shè)置狀態(tài)欄
2）調(diào)整表格與headerVIew的間距
我們利用contentInset來(lái)調(diào)整表格與headerView的間距学密，如下圖:
調(diào)整表格與headerView的間距
運(yùn)行效果圖如下:
運(yùn)行效果圖
由上圖我們可知淘衙，第 0 行，與headerView之間腻暮，還多20彤守，那是因?yàn)槿缦聢D所示的原因，所以這樣解決:
解決
效果圖:
效果圖
- 滾動(dòng)指示器的設(shè)置
我們從上邊的效果圖哭靖，可得知具垫，滾動(dòng)顯示器卻不在了，為什莫呢试幽？如下圖分析:
分析
所以呢筝蚕，在滾動(dòng)視圖的時(shí)候，我們就看不到，滾動(dòng)指示器了饰及。
該怎么設(shè)置呢要?
解決滾動(dòng)指示器問(wèn)題
效果圖:
效果圖
第三部分 運(yùn)行時(shí)攔截全屏返回手勢(shì)&導(dǎo)航欄處理細(xì)節(jié)
- 1.發(fā)現(xiàn)問(wèn)題
看圖
問(wèn)題:我們知道蔗坯，上述是可以用手拖動(dòng)的康震，但是燎含，我們拖到另一個(gè)控制器的時(shí)候，我們發(fā)現(xiàn)腿短，導(dǎo)航欄消失了屏箍，我們返回 ，回不去了橘忱。
怎么解決這個(gè)問(wèn)題呢赴魁？
我們知道，我們?cè)趖ableView這個(gè)頁(yè)面將要顯示的時(shí)候钝诚，隱藏了NAV
顯示nav
如圖所示颖御，nav，顯示了凝颇，但是發(fā)生了疊加潘拱，該怎么解決呢？
animated = YES
第四部分 AFN加載圖像的 細(xì)節(jié)YYWebImage的指示器和頭文件的導(dǎo)入方法
- 1. 添加UIImageView
添加UIImageView- 2.添加 AFN /YYWebImage
pod- 3. AFN 網(wǎng)絡(luò)加載圖片
AFN方法
導(dǎo)入AFN頭文件
導(dǎo)入AFN頭文件
加載圖片拧略，但是不顯示
加載圖片芦岂，但是不顯示
從用戶的角度考慮，這種 情況下垫蛆，用戶會(huì)有不好的體驗(yàn)禽最，那我們應(yīng)該提示用戶，應(yīng)該像下圖一樣加上一個(gè)小菊花袱饭，表示在努力工作中ing.
小菊花
小菊花顯示
圖片加載成功
使用AFN會(huì)有個(gè)問(wèn)題川无，當(dāng)我們切換的時(shí)候，加載的圖片總會(huì)閃(緩)一下虑乖，應(yīng)為AFN加載圖片時(shí)懦趋，圖片如果過(guò)大的話，它不會(huì)緩存决左，AFN是用的系統(tǒng)的緩存愕够。
AFN細(xì)節(jié)- 4. YYWebImage 網(wǎng)絡(luò)加載圖片
頭文件的導(dǎo)入
頭文件的導(dǎo)入
加載圖片
加載圖片
第五部分 圖像放大處理
- 1. 分析
我們要使圖片放大處理的話，我們可以使用scrollViewDidScroll：這個(gè)代理方法佛猛。那么惑芭，我們根據(jù)什莫讓上邊的圖片放大呢，contentOffset
分析- 2. 打印一下contentOffset
圖解- 3. 設(shè)置放大
我們來(lái)看放大继找，我們需要改什莫遂跟？
先將headerView和headerViewImage設(shè)置成全局，如下圖:
headerView-1
headerView-2
headerViewImage-1
headerViewImage-2
下圖，達(dá)到了下滾放大的效果
下滾放大
但是幻锁，我們發(fā)現(xiàn)一個(gè)問(wèn)題凯亮，圖片放大的時(shí)候，特別別扭哄尔，有點(diǎn)卡頓假消。那我們?cè)趺唇鉀Q呢，只有讓圖片等比例填充即可岭接，如下圖:
等比例填充
效果圖:
效果圖.gif
雖然富拗，這種方法，規(guī)避了很多復(fù)雜的運(yùn)算鸣戴，但是啃沪，還有一個(gè)很不愉快的問(wèn)題，當(dāng)我們返回時(shí)窄锅，會(huì)發(fā)生下圖這種現(xiàn)象(圖像比底View大):
圖像比底View大
那我們?cè)撛趺崔k呢创千？
我們只能裁切一下,如下圖:
裁切
效果圖：
效果圖.gif
問(wèn)題，解決完畢Ｈ胪怠Ｗ仿俊！
第六部分 圖像的整體移動(dòng)簡(jiǎn)單實(shí)現(xiàn)
- 1. 簡(jiǎn)單的整體移動(dòng)
簡(jiǎn)單的整體移動(dòng)
此時(shí)效果圖:
效果圖.gif
第七部分 設(shè)置分割線和透明度
- 1. 問(wèn)題分析---定點(diǎn)
分析
分析:我們看上面的圖盯串，現(xiàn)在我們的需求是氯檐，當(dāng)表格滾到這個(gè)位置就不往上滾了，這個(gè)效果怎么實(shí)現(xiàn)呢体捏？我們看上面是一個(gè)狀態(tài)欄的高度冠摄。狀態(tài)欄 +導(dǎo)航欄的高度是64。
思路
思路:我們讓headerView移動(dòng)到上圖位置就不動(dòng)了,高度我們已經(jīng)算好了几缭，用headerView - 64 就知道headerView的y值了河泳，定到此位置。
min
當(dāng)offset = min的時(shí)候年栓，是處于圖-思路那樣
當(dāng)offset < min的時(shí)候拆挥，說(shuō)明，圖片慢慢的往上移
當(dāng)offset > min的時(shí)候某抓，說(shuō)明圖片即將移除模擬器
總結(jié)如下纸兔，當(dāng)圖片在向上整體移動(dòng)過(guò)程中，offset小于min否副，headerVIew的y值汉矿，取 - offset,反之取 - min;- 2. 設(shè)置透明度
效果圖
根據(jù)上圖，我們分析备禀，我們打印了 offset / min 可知洲拇，當(dāng)整體向上移動(dòng)的時(shí)候 從offset / min = 0 開(kāi)始奈揍，到了指定位置offset / min = 1；并且徹底的隱藏赋续，導(dǎo)航欄卻顯示男翰。
示例代碼
效果圖:
效果圖.gif
但是沒(méi)有導(dǎo)航欄，那怎么樣才能讓導(dǎo)航欄出來(lái)呢纽乱？- 2. 設(shè)置導(dǎo)航欄
其實(shí)蛾绎，在這種demo中導(dǎo)航欄是沒(méi)有意思的。步驟如下:
取色
取色
改headerView的背景顏色
改headerView的背景顏色
- 3. 設(shè)置分割線
同樣迫淹，對(duì)于分割線秘通，我們?cè)谶@個(gè)UIView底部，添加一條線敛熬，當(dāng)向上移動(dòng)時(shí)，該線與Nav的底線重合第股，但是當(dāng)向下移動(dòng)時(shí)应民，我們發(fā)現(xiàn)這條紅線不動(dòng)，貌似到了圖片的脖子處夕吻，就此诲锹，我們明白，當(dāng)向下移動(dòng)時(shí)涉馅，我們需要改變這條線的位置归园。
查看層次結(jié)構(gòu)圖
查看層次結(jié)構(gòu)圖
添加分割線
添加分割線
效果圖:
效果圖.gif
更改分割線位置
改_lineview
改_lineview
剛才是放大的時(shí)候，出現(xiàn)的問(wèn)題稚矿，解決如下:
解決
這樣的話庸诱，無(wú)論放大還是縮小，線的位置永遠(yuǎn)等于headerView減去自己的位置晤揣。- 3. 改分割線的顏色
為了桥爽，更像
改分割線的顏色
效果圖如下:
效果圖.gif
第八部分 設(shè)置狀態(tài)欄顏色
- 1. 需求
當(dāng)圖片越來(lái)模糊的時(shí)候，狀態(tài)欄越來(lái)越黑- 2.解決
實(shí)例代碼1
實(shí)例代碼2
最終結(jié)果:請(qǐng)看第一張gif圖.
