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。。。可是有一个小问题就是我在模拟上运行的时候，能够看到模糊效果，可是在真机上测试的时候，根本看不到模糊效果，若是哪位知道能够告诉我哈。