仿微博个人主页效果

最近看到很多App的个人主页都流行使用导航栏随着UITableView的滑动来产生渐变的效果。此篇文章讲述的是仿微博个人页，效果图如下:

1.分析项目组成架构

效果：当往上滑动的时候，顶部渐渐出现条，很明显是个导航条。

结论：因此项目应该是由导航控制器组成，另外遵循一个界面一个控制器的原则，我们只需要自定义一个个人主页控制器作为导航控制器的根控制器就OK了

2. 分析个人主页控制器的层次结构

1. 一眼望去，首先有个UITableView，tableView上面有个选项卡视图和头部视图，另外tableView穿透导航栏，因此tableView的frame等于整个屏幕。
2. 头部视图（背景图片+头像）和选项卡视图
   效果:头部视图和选项卡视图随着tableView拖动而移动，选项卡视图有悬停效果，拖到某个位置就不移动了。

解决方案:
方案1：头部视图和选项卡视图成为tableView的头部视图（tableHeaderView），但是往上拖动，选项卡视图会消失，因此达不到悬停效果。(pass掉这个方案)

方案2：选项卡视图成为tableView的组头部视图,选项卡悬停了。但是，当用户往下拖动的时候，头部视图不应该往下移动，而是y值原地不动。(pass掉这个方案)

最终方案：头部视图和选项卡视图添加到控制器的view上，并且要盖住tableView.

问题：tableView的内容显示不完全？如何显示？
解决：设置tableView顶部额外间距，就会把内容往下挤。
因为内容需要显示到选项卡下面，因此设置顶部间距为头部视图+选项卡视图高度，244.

#define headHeight 200           // 头部视图高度
#define headMinHeight 64         // 头像距离头部视图底部高度
#define tabBarHeight 44          // 选项卡高度

问题：tableView的内容多往下偏移了一点，这是因为在iOS7之后，导航控制器下的所有UIScrollView顶部都会添加额外的滚动区域64。
解决方案：如果是用storyboard做的，可以勾选掉控制器的这个属性:

如果是用代码写的，则需要添加这句代码：

self.automaticallyAdjustsScrollViewInsets = NO;

3.搭建个人页界面

1. 最里面存放tableView，占据整个控制器的view
2. 然后添加顶部头部视图(PS:和UITableView同级别)，添加上，左，右都为0，高度200的约束.
3. 顶部背景图片，相对于头部视图添加上下左右都为0的约束。
4. 头像水平居中，距离头部视图底部64的高度，固定宽高

5. 选项卡视图在头部视图下边(PS:和头部视图、UITableView同级别)，高度固定44，上(相对于头部视图)，左，右都添加约束为0

   结构如下图：
   

4.监听UITableView的滚动

用户滚动多少，头部视图和选项卡移动多少,修改头部视图，选项卡视图就会跟着移动。
计算用户滚动偏移差，记录一开始的偏移差，与当前的偏移差比较。
注意一开始的偏移差contentOffset,为-244，每次都跟它比较。

contentOffset：滚动视图可视范围顶点与内容起始点的距离，内容起始点contentOffset的y值为0.

获取偏移差，修改头部视图的高度，就会有视觉差效果，感觉选项卡比头部视图移动快点。直接修改头部视图的y值，没有视觉差效果。

当往上拖动的时候,delat > 0,头部视图需要减少高度,因此头部视图的高度 = 原始高度 - 偏移差

为什么往上拖动，delat > 0,因为往上拖动需要看下面的内容,可视范围需要往下移动,因此contentOffsetY 不断增加，比一开始都大，因此delat>0

需要做判断，头部视图最小的高度为64，减到64就不在往下减了，在减选项视图就移动到导航条上，看不到了。

往下拖动，delat<0，头部视图高度增加，就会拉伸图片，为了防止图片拉伸的难看，需要设置图片的内容模型为按比例拉伸填充Aspect Fill,一般开发中都是使用这个内容模式，就不会把图片拉伸很难看。

注意：超出图片控件范围的图片还是会显示，需要裁减掉。勾选UIImageView的Clip SubViews这个属性。

5.导航栏处理

一开始导航栏和标题栏处于隐藏状态，快速隐藏导航栏的方法：

// 导航栏隐藏
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    // 导航栏底部阴影隐藏
    self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];

隐藏导航栏标题，标题用UILabel显示，直接设置UILabel的alpha=0
在用户往上滚动视图的时候，导航条和标题慢慢显示，可以计算透明度。当头部视图高度减少到64，刚好全部显示，alpha为1.也就是说偏移差为136的时候，alpha 为 1，这形成一个比例。
alpha = delat / 136.
每移动一下就设置导航条的背景图片和导航条标题的透明度。

导航条背景图片怎么生成？利用颜色生成半透明图片，传递一个颜色，就生成一张图片。因此我们可以为UIColor写一个分类

// 根据颜色生成一张尺寸为1*1的相同颜色图片
+ (UIImage *)imageWithColor:(UIColor *)color
{
    // 描述矩形
    CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

    // 开启位图上下文
    UIGraphicsBeginImageContext(rect.size);
    // 获取位图上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(context, rect);
    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();

    return theImage;
}

最后提上源码下载地址点击下载
有兴趣的可以下载源码看看，如果有疑问或者更好的建议，欢迎联系！如果觉得还可以，欢迎star