微博个人详情页
一、前言
- 个人详情页效果，是模仿现在主流的微博个人详情主页界面。
- 效果如图：
二、界面布局分析
- 因为看到有导航栏，所以分析出此视图是有一个导航控制器。
- 头视图添加在tableView上还是作为单个的view？
分析1:因为头视图在向上移动的时候不存在悬停的效果，所以头视图不是tableView的组头。
分析2:在tableView向下移动的时候头视图不会跟着向下移动说明头视图不是表头。
综上分析设计布局:说明头视图是作为一个View添加在控制器上，所以可以设计布局，头视图和选项视图可以是两个view，头视图的view 上添加一个imageView作为卡片标签，在卡片标签上在添加一个imageView用来显示用户的头像图片。
实现思路分析:由效果可以看出，头视图的高是随着tableView的上下移动改变而改变的。所以头视图的高要动态改变。这里我们改变约束的办法动态改变头视图的高度。
界面细节:要先设置tableView的顶部内边距。使tableView的顶部与选项图的底部对齐。
//设置tableView的内边距
self.tableView.contentInset = UIEdgeInsetsMake(TableViewContentTop, 0, 0, 0);
- 当设置了tableView的顶部内边距与选项视图的底部对齐的时候，系统默认会添加额外的滚动区域。所以要关闭滚动的区域。
//不需要添加额外的滚动区域 设置控制器的属性
self.automaticallyAdjustsScrollViewInsets = NO;
- 在tableView的代理方法ScrollViewDidScroll中实现此逻辑
//计算上下拖动的距离
CGFloat delta = self.lastContentOffsetY - scrollView.contentOffset.y;
CGFloat height = headH + delta;
//判断是否达到了最小高度
if (height < headMinH) {
height = headMinH;
}
//给headView的高度约束重新赋值
_headConstrsint.constant = height;
//设置透明度
CGFloat alpha = delta/(headMinH - headH);
if (alpha >= 1) {
alpha = 0.99;
}
self.nameLabel.alpha = alpha;
//定义根据color去初始化一个图片 调用分类方法根据颜色生成图片
UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha] ];
//重新设置导航栏的背景图片
[self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
网友评论