前言
由于最近在讲导航控制器的内容,因此更新此次文章,讲述的是个人详情页效果。效果如图:
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,一般开发中都是使用这个内容模式,就不会把图片拉伸很难看。
- 注意:
超出图片控件范围的图片还是会显示,需要裁减掉
。勾选UIImageView一下属性。
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;
}
网友评论