简书（微博） 个人中心页面

简书个人中心页面不管是页面 效果都不错，所以自己就仿写了这个页面，刚开始时，就是处理逻辑问题比较麻烦，稍微一步不正确就会导致全部崩溃。
高仿简书个人中心头像放大缩小，头像的点击，下面的分类等

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