微博个人详情页模仿

微博个人详情页

一、前言

• 个人详情页效果，是模仿现在主流的微博个人详情主页界面。
• 效果如图：

二、界面布局分析

• 因为看到有导航栏，所以分析出此视图是有一个导航控制器。
• 头视图添加在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];