简书个人中心页面不管是页面 效果都不错，所以自己就仿写了这个页面，刚开始时，就是处理逻辑问题比较麻烦，稍微一步不正确就会导致全部崩溃。
高仿简书个人中心头像放大缩小，头像的点击，下面的分类等
1502868928504022783.jpg
首先看到简书个人中心页面时，我大致给他划分为4大部分：
1，首先是用户的头像
2，用户资料信息
3，三个标题（TitleView）
4，下面UITableView
因为此处有左右滑动和上下两种滑动，所以在上面的2，3，4 我们整体放在一个ScrollView上， 而1，用户头像的改变，根据ScrollView 的上下滑动 y 值对头像大小进行处理。
项目中不需要配置任何东西，全都是逻辑方面的东西，只要思维逻辑清楚，我们就开始干
这是我项目结构图：
1502869022329079590.png
在上面的项目图中可以清楚的看到，所有的View都是自定义实现的，控制控制器的大小，之前一阿里朋友告诉我，他们公司的硬性规定，无论页面实现什么功能，在控制器中的代码 不能超过300 行，能封装的尽量封装起来，不做繁琐的代码Copy。
首先看下如何自定义头像View：
** 初始化方法
* 头像图片
*/
- (instancetype)initWithImage:(UIImage *)image;
/** 更新头像大小
* 滚动视图
*/
- (void)reloadSizeWithScrollView:(UIScrollView *)scrollView;
/**
* 点击头像回调
*/
- (void)handleClickActionWithBlock:(ClickImageBlock)block;
头像大小的改变
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
if ([keyPath isEqualToString:ContentOffset] && object == self.scrollView) {
CGFloat offsetY = self.scrollView.contentOffset.y;
CGFloat scale = 1.0;
if (offsetY < 0) { // 放大
scale = MIN(1.5, 1 - offsetY / 300);//简书没有这个功能
} else if (offsetY > 0) { // 缩小
scale = MAX(0.40, 1 - offsetY / 300);
}
self.yourImages.transform = CGAffineTransformMakeScale(scale, scale);
CGRect frame = self.yourImages.frame;
frame.origin.y = 15;
self.yourImages.frame = frame;
}
}
最后到我们的控制器页面，在这个页面我们只负责
UITableViewDelegate 的东西，数据我们都在自定义的页面处理，减少控制器页面的代码量，
在控制器中我们就是将自定义的View组合起来
首先是整体一个ScrollView 然后在其上面添加我们事先定义的所有控件。
滑动事件:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView == self.scrollView || !scrollView.window) {
return;
}
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat originY = 0;
CGFloat otherOffsetY = 0;
判断ScrollView 是因为 我们这个页面有上下 左右两种滑动事件
项目运行效果图如下所示：
视.gif
帮助到了小伙伴可以点个赞，如果有需要的可以加入我闷的QQ群：237573715 欢迎您的加入。
关注我们的公众号：Gang0679
网友评论