iOS具備視覺間差效果、模糊效果的頂部視圖

附上個人demo源碼：https://github.com/wqhiOS/WUParallaxView

先來看下效果：

利於AutoLayout能夠很簡單的完成這個視覺間差效果，這裏默認你們的都已經掌握了AutoLayout。

第一步 首先把基本工做完成 新建一個項目 以下：並在viewController裏放入tableView，

（能夠用代碼 也能夠用storyBoard，我比較懶 因此就。。。）

給tableView添加約束，距離父視圖頂部的距離，必定要爲0，不能是64啊。。。以下圖：

基本任務完成。下面的操做都很重要了。。。

你們通常作到這裏都會有一個疑問，是把 頂部的頭視圖，和選項卡視圖 做爲tableView的headerView呢？仍是做爲控制器view的是子視圖呢。。

若是要的效果僅僅是把頭視圖拉伸的效果，把頂部頭視圖做爲tableView的headerView也是能夠的，可是咱們這裏須要讓tableView向上滑的時候選項卡能夠懸停再導航欄下方，因此這個方案是不太可行的。

因而，我就決定把頂部的頭視圖 和選項卡 添加在視圖控制器的view上面，（頂部頭視圖的圖片，你們隨便找一張放上去就好了）。。以下圖所示：

放完以後，進行AutoLayout自動佈局，須要注意的是！無論咱們如何滑動tableView，選項卡的頂部是牢牢挨着頂部頭視圖的底部，因此這個約束不能少！若是仍是不明白這些約束的，能夠到個人demo裏面本身去看一看。

這時候又會遇到一個問題，咱們的tableView是佔滿了整個屏幕放置的，若是我如今把頭視圖和選項卡放在控制器的view上面，豈不是會遮擋住tableView的內容。

很重要的來了！由於tableView的內容須要顯示到選項卡下面，所以設置內容的頂部間距爲頭部視圖+選項卡視圖高度，代碼以下：

 

self.tableView.contentInset = UIEdgeInsetsMake(kHeadH + kBarH, 0, 0, 0);

 

 

搞到這裏，咱們運行一下項目，就會是這個效果，可是這個時候頂部頭視圖仍是沒法根據咱們滑動的偏移量來改變

爲了可以改變頂部頭視圖的高度。。咱們能夠在控制器中關聯他的高度約束：

加上 約束後，咱們就能夠根據滑動的偏移量來改變頂部頭視圖的大小，爲了使圖片的寬度能搞隨着高度的變化而變化，咱們須要設置頂部頭視圖的mode屬性爲Aspect Fill：

以後設置tableView的代理。遵照UIScrollViewDelegate，實現下面的方法，使tableView在滑動的時候改變剛剛關聯的高度約束的大小。

 1 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 2     
 3     //計算偏移量，默認是-289；
 4     CGFloat beginOffsetY = -(kHeadH + kBarH);
 5     CGFloat offsetY = scrollView.contentOffset.y - beginOffsetY;
 6     
 7     //向下拉: offsetY爲負值，而且愈來愈小 這時圖片高度須要變大
 8     //向上拉: offsetY爲正值，而且愈來愈大，這是圖片高度須要變小
 9     
10     //因此
11     CGFloat height = kHeadH - offsetY;
12     //當向上拖動的時候，頭視圖會愈來愈小，爲了讓選項卡，可以停留在導航欄下方。須要設置圖片的最小高度是64。
13     if (height < kHeadMinH) {
14         height = kHeadMinH;
15     }
16     
17     self.headViewHeight.constant = height;
18     
19     
20     // 設置導航條的透明度
21     CGFloat alpha = offsetY / (kHeadH - kHeadMinH);
22     if (alpha >=1) {
23         alpha = 1;
24     }
25     NSLog(@"%f",alpha);
26     self.navigationController.navigationBar.alpha = alpha;
27     self.visualEffectView.alpha = alpha;
28 }

爲了可以使選擇器懸在導航欄下方，咱們要設置圖片的高度，最小爲64就能夠了。。

注意：記得在viewDidLoad中加入下面這句代碼，不然頁面出來的時候，導航欄透明度是1而不是0

self.automaticallyAdjustsScrollViewInsets = YES;

 

在這個小例子中，我還使用了毛玻璃效果，在圖片變小的時候，使其愈來愈模糊，用的是iOS8以後纔有的UIVisualEffectView。。。可是有一個小問題就是我在模擬上運行的時候，能夠看到模糊效果，可是在真機上測試的時候，根本看不到模糊效果，若是哪位知道能夠告訴我哈。