UITableView下拉色彩渐变，图片变大效果（模仿链家网iOS APP首页）

最近链家网很火啊，融资60亿的新闻铺天盖地，然后就下载他们的APP来好好看了一番。首页这个下拉渐变的效果挺有意思，其实见得也挺多，今天就来做一个呗。

先来看一下链家网的效果：随着主页一直往上拉或者往下拉，header位置图片会变大变小，另外还有一层绿色的一层会改变透明度。

OK，直接来分析到底是如何实现的。

我首先想到的是与下拉刷新一样使用UIScrollView的ContentOffset属性，也就是UIScrollView与边界的距离，通过判断它的值来做不同的操作。

假设以下代码在新建SingleViewAPplication中，我们首先在ViewController中添加一个UITableView,叫做tbv。

self.tbv.contentInset =UIEdgeInsetsMake(100,0, 0,0);//由于默认情况下，上面就有一定边距，所以修改tableView的contentInset，让他上边界有100的距离。设定完成后，tableView上面就会出现一个高度100的空白。

    UIImageView *imageView = [[UIImageViewalloc]initWithFrame:CGRectMake(0, -100,DEVW, 100)];//为tableView上面这块空白添加一张图片。

    imageView.image = [UIImageimageNamed:@"header.png"];

    imageView.contentMode =UIViewContentModeScaleAspectFill;

    imageView.layer.zPosition = -1;//由于imageView上面还会添加一层layer，为了让他一直在layer下面，所以我给他设置了一个zPosition属性，让他一直处在下面。

    

    //给ImageView添加一层layer，主要是变色那一层。通过contentOffset的值计算新的alpha属性

    CALayer *layer = [CALayerlayer];

    layer.frame = imageView.bounds;

    layer.backgroundColor = [UIColorclearColor].CGColor;//初始是透明的，看不见。

[imageView.layeraddSublayer:layer];

    [self.tbvaddSubview:imageView];

OK，设置好了这些，接下来就是来获取滑动过程的contentOffset的值了，这个可以在UIScrollView的代理方法scrollViewDidEndDragging中实现，在方法中直接使用scrollView.contentOffset就可以了。当然，还可以使用KVO机制来实施监听，由于最近正在学习ReactiveCocoa，这正好是在其Demo里面来写的一个例子，所以我就使用ReactiveCocoa来实现了，其实我这里使用的本质也是KVO，只是已经封装好，操作更简单罢了。

[RACObserve(self.tbv, contentOffset)subscribeNext:^(id x) {

        if(self.tbv.contentOffset.y < -100){//-200等等时候，也就是下拉更多的时候

            imageView.frame =CGRectMake(0,0, DEVW+(-100-self.tbv.contentOffset.y),100+(-100-self.tbv.contentOffset.y));//先修改imageView的Frame，达到图片放大的效果。

            imageView.center =CGPointMake(DEVW/2,self.tbv.contentOffset.y/2);//由于修改完Frame会修改中心，所以会产生位置偏差，设置center重新定位

            layer.backgroundColor = [UIColorclearColor].CGColor;//重复一下将layer设置成空白。

            layer.frame = imageView.bounds;

            NSLog(@"==== %@",NSStringFromCGRect(imageView.frame));

        }elseif(self.tbv.contentOffset.y == -100){//正好停留在初始化的时候的情况，给他恢复最初状态。

            layer.backgroundColor = [UIColorclearColor].CGColor;

            imageView.frame =CGRectMake(0, -100,DEVW, 100);

        }elseif(self.tbv.contentOffset.y > -100){//当上拉的时候，修改layer背景色的alpha，改变透明度

            layer.backgroundColor = [UIColorcolorWithRed:100/255.0green:20/255.0blue:20/255.0alpha:50/-self.tbv.contentOffset.y].CGColor;

        }

    }];

OK，这样就大概实现了链家网首页的效果，当然，其实还有很多瑕疵，因为它的效果在上拉到一定程度之后，是会悬浮在页面上的。仔细观察发现，悬浮透明绿色下面，其实还能隐约看到tableView的控件。所以我们只要把Demo中的ImageView放在self.view的上面，并且在屏幕与上述相同的位置，重新加一个滑动判断就可以搞定了。我就不赘述了。有兴趣可以自己做做。

这是正常状态。这是下拉状态这是上拉状态。

另外说一下，下拉刷新与这个原理是一样的。假如在scrollViewDidEndDragging方法里面来进行操作的话，其实是有一点体验不好的，因为会出现弹屏。scrollViewDidEndDragging是在拖动结束之后执行，但是下拉刷新应该是在弹回到固定位置的时候执行，而不是弹回完了之后再反过来执行，所以就会出现弹一下的情况。刚才看了一下百度视频APP的主页，发现他们的下拉刷新，就是在scrollViewDidEndDragging方法中操作的，所以有弹屏现象，影响用户体验。