【微博个人页效果】 |那些人追的干货
前言
由于最近在讲导航控制器的内容，因此更新此次文章，讲述的是个人详情页效果。效果如图：
123.gif
一、分析项目组成架构
-
效果：当用户往上移动的时候，顶部渐渐出现条，很明显是个导航条。
-
结论：因此项目应该是由导航控制器组成。 -
效果：另外导航控制器最外面显示微博个人页，怎么才能使微博界面显示到最外面。
-
结论：遵循一个界面一个控制器的原则，只需要自定义微博个人页控制器，成为导航控制器的根控制器就可以显示在最外面了。 -
原因：因为导航控制最外面永远显示栈顶控制器的view,一开始根控制器就是栈顶控制器。
二、分析微博个人控制器层次结构
1.一眼望去，首先有个tableView,tableView上边有个头部视图和选项卡视图。
tableView效果：穿透导航条。
- tableView尺寸：tableView占据整个控制器的view，内容才能穿透导航条。否则内容滚动不上去。
穿透效果：
穿透导航条.gif
不能穿透效果：
不能穿透演示.gif
2.头部视图（背景图片+头像）和选项卡视图
效果:头部视图和选项卡视图随着tableView拖动而移动，选项卡视图有悬停效果，拖到某个位置就不移动了。
解决方案:
方案1：头部视图和选项卡视图成为tableView的头部视图（tableHeaderView），但是往上拖动，选项卡视图会消失，因此达不到悬停效果。(pass掉这个方案)
方案2：选项卡视图成为tableView的组头部视图,选项卡悬停了。但是，当用户往下拖动的时候，头部视图不应该往下移动，而是y值原地不动。(pass掉这个方案)
最终方案：头部视图和选项卡视图添加到控制器的view上，并且要盖住tableView.
问题：tableView的内容显示不完全？如何显示？
解决：设置tableView顶部额外间距，就会把内容往下挤。
因为内容需要显示到选项卡下面，因此设置顶部间距为头部视图+选项卡视图高度，244.
#define headH 200
#define headMinH 64
#define tabBarH 44
_lastOffsetY = -(headH + tabBarH);
self.tableView.contentInset = UIEdgeInsetsMake(headH + tabBarH, 0, 0, 0);
问题：tableView的内容多往下偏移了一点，这是因为在iOS7之后，导航控制器下的所有UIScrollView顶部都会添加额外的滚动区域64。
Snip20150729_1.png
解决：不需要添加额外的滚动区域，设置控制器的属性。
self.automaticallyAdjustsScrollViewInsets = NO;
三、搭建微博个人页界面
1.最里面存放tableView，占据整个控制器的view
2.然后添加顶部头部视图，高度200，宽度自动拉伸，上左右间距为0.
2.1 顶部背景图片，宽高自动拉伸
2.2 头像 水平居中，距离底部64的高度，宽高固定。
3.选项卡在头部视图下边，高度44，宽度自动拉伸，上左右间距为0.
3.1 选项卡参照顶部视图，利用自动布局，可以让一个控件随着参照控件的改变而改变，以后就能做到移动头部视图，选项卡跟着移动了。
Snip20150730_3.png
四、监听tableView的滚动
-
用户滚动多少，头部视图和选项卡移动多少,修改头部视图，选项卡视图就会跟着移动。
-
计算用户滚动偏移差，记录一开始的偏移差，与当前的偏移差比较。
-
注意一开始的偏移差contentOffset,为-244，每次都跟它比较。
-
contentOffset：滚动视图可视范围顶点与内容起始点的距离，内容起始点contentOffset的y值为0.
-
获取偏移差，修改头部视图的高度，就会有视觉差效果，感觉选项卡比头部视图移动快点。直接修改头部视图的y值，没有视觉差效果。
-
当往上拖动的时候,delta > 0,头部视图需要减少高度,因此头部视图的高度 = 原始高度 - 偏移差
-
为什么往上拖动，delta>0,因为往上拖动需要看下面的内容,可视范围需要往下移动,因此contentOffsetY 不断增加，比一开始都大，因此delta>0
-
需要做判断，头部视图最小的高度为64，减到64就不在往下减了，在减选项视图就移动到导航条上，看不到了。
-
往下拖动，delta<0，头部视图高度增加，就会拉伸图片，为了防止图片拉伸的难看，需要设置图片的内容模型为按比例拉伸填充Aspect Fill,一般开发中都是使用这个内容模式，就不会把图片拉伸很难看。
Snip20150730_1.png
- 注意：
超出图片控件范围的图片还是会显示，需要裁减掉。勾选UIImageView一下属性。
Snip20150730_2.png
Snip20150730_2.png
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat delta = offsetY - _lastOffsetY;
// 往上拖动，高度减少。
CGFloat height = headH - delta;
if (height < headMinH) {
height = headMinH;
}
_headHCons.constant = height;
// 设置导航条的背景图片
CGFloat alpha = delta / (headH - headMinH);
// 当alpha大于1，导航条半透明，因此做处理，大于1，就直接=0.99
if (alpha >= 1) {
alpha = 0.99;
}
_nameLabel.alpha = alpha;
// 设置导航条的背景图片
UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
五、导航条处理
-
一开始隐藏导航条，和导航条标题.
-
快速的隐藏导航条的方法：
// 给导航条的背景图片传递一个空图片的UIImage对象
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
// 隐藏底部阴影条，传递一个空图片的UIImage对象
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
-
隐藏导航条标题，标题用UILabel,设置alpha = 0;
-
在用户往上滚动视图的时候，导航条和标题慢慢显示，可以计算透明度。当头部视图高度减少到64，刚好全部显示，alpha为1.
-
也就是说偏移差为136的时候，alpha 为 1，这形成一个比例。
-
alpha = delta / 136.
-
每移动一下就设置导航条的背景图片和导航条标题的透明度。
-
导航条背景图片怎么生成？利用颜色生成半透明图片，传递一个颜色，就生成一张图片。
// 根据颜色生成一张尺寸为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;
}
