概述
高仿简书个人中心头像放大缩小，头像的点击，下面的分类等详细
代码下载：/demo/11226.html
一、准备工作
高仿简书个人中心上下 左右滑动页面，开始做之前，首先思路要清晰，逻辑比较繁琐。
首先看到简书个人中心页面时，我大致给他划分为4大部分：
1，首先是用户的头像
2，用户资料信息
3，三个标题（TitleView）
4，下面UITableView
因为此处有左右滑动和上下两种滑动，所以在上面的2，3，4 我们整体放在一个ScrollView上， 而1，用户头像的改变，根据ScrollView 的上下滑动 y 值对头像大小进行处理。
二、程序实现
项目中不需要配置任何东西，全都是逻辑方面的东西，只要思维逻辑清楚，我们就开始干，
在上面的项目图中可以清楚的看到，所有的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;}}
自定义TitleView（要可以左右滑动，标题下方有标注）
- (void)titleButtonClicked:(UIButton *)button {_selectedIndex= button.tag;if (self.selectedButton) {self.selectedButton.selected = YES;}button.selected = NO;self.selectedButton= button;if (self.buttonSelected) {self.buttonSelected(button.tag);}NSString* title = self.gztitles[button.tag];CGFloat sliderWidth= button.titleLabel.font.pointSize * title.length;[self.sliderView mas_remakeConstraints:^(MASConstraintMaker *make) {make.width.mas_equalTo(sliderWidth);make.height.mas_equalTo(2);make.centerX.equalTo(button);make.bottom.equalTo(self).offset(-2);}];[UIView animateWithDuration:0.25 animations:^{[self layoutIfNeeded];}];}- (void)setSelectedIndex:(NSInteger)selectedIndex {_selectedIndex = selectedIndex;UIButton* button = self.subviews[selectedIndex];[self titleButtonClicked:button];}- (void)setGztitles:(NSArray *)gztitles {[self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];_gztitles= gztitles;CGFloat width = [UIScreen mainScreen].bounds.size.width / gztitles.count;for ( int i = 0; i<gztitles.count; i++ ) {UIButton* titleButton = [self titleButton:gztitles[i]];titleButton.tag = i;[self addSubview:titleButton];[titleButton mas_makeConstraints:^(MASConstraintMaker *make) {make.top.bottom.equalTo(self);make.left.equalTo(self).offset(width * i);make.width.mas_equalTo(width);}];if (i != 0) {titleButton.selected = YES;} else {self.selectedButton = titleButton;}}UIButton *button= self.subviews[0];NSString *title = gztitles[0];CGFloat sliderWidth = button.titleLabel.font.pointSize * title.length;[self addSubview:self.sliderView];[self.sliderView mas_makeConstraints:^(MASConstraintMaker *make) {make.width.mas_equalTo(sliderWidth);make.height.mas_equalTo(4);make.centerX.equalTo(button);make.bottom.equalTo(self).offset(-3);}];[self layoutIfNeeded];}- (UIButton *)titleButton:(NSString *)title {UIButton* titleButton = [[UIButton alloc] init];[titleButton addTarget:self action:@selector(titleButtonClicked:) forControlEvents:UIControlEventTouchUpInside];titleButton.titleLabel.font = [UIFont systemFontOfSize:15];[titleButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];[titleButton setTitleColor:[UIColor grayColor] forState:UIControlStateSelected];[titleButton setTitle:title forState:UIControlStateNormal];return titleButton;}
自定义的信息页面
- (void)layoutSubviews {[super layoutSubviews];[self addSubview:self.nameLabel];[self addSubview:self.Address];[self addSubview:self.infoLabel];[self addSubview:self.editInfoButton];}
简单的添加属性就好
UITableView的话也是简单的TableView
最后到我们的控制器页面，在这个页面我们只负责
UITableViewDelegate 的东西，数据我们都在自定义的页面处理，减少控制器页面的代码量，
在控制器中我们就是将自定义的View组合起来
首先是整体一个ScrollView 然后在其上面添加我们事先定义的所有控件。
GZContentScrollView *scrollView = [[GZContentScrollView alloc] init];scrollView.delaysContentTouches = NO;[self.view addSubview:scrollView];self.scrollView = scrollView;scrollView.pagingEnabled = YES;scrollView.showsVerticalScrollIndicator = NO;scrollView.showsHorizontalScrollIndicator = NO;scrollView.delegate = self;scrollView.contentSize= CGSizeMake([UIScreen mainScreen].bounds.size.width * 3, 0);UIView *headView= [[UIView alloc] init];headView.frame= CGRectMake(0, 0, 0, GZHeadViewHeight + GZTitleHeight);GZTableView1 *gzTableView1 = [[GZTableView1 alloc] init];gzTableView1.delegate = self;gzTableView1.separatorStyle= UITableViewCellSeparatorStyleNone;self.GZTableView1= gzTableView1;gzTableView1.tableHeaderView= headView;[scrollView addSubview:gzTableView1];[gzTableView1 mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(scrollView);make.width.mas_equalTo([UIScreen mainScreen].bounds.size.width);make.top.equalTo(self.view);make.bottom.equalTo(self.view);}];GZTableView2 *gzTableView2= [[GZTableView2 alloc] init];gzTableView2.delegate = self;gzTableView2.separatorStyle= UITableViewCellSeparatorStyleNone;self.GZTableView2= gzTableView2;gzTableView2.tableHeaderView= headView;[scrollView addSubview:gzTableView2];[gzTableView2 mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(scrollView).offset([UIScreen mainScreen].bounds.size.width);make.width.equalTo(gzTableView1);make.top.bottom.equalTo(gzTableView1);}];GZTableView3 *gzTableView3 = [[GZTableView3 alloc] init];gzTableView3.delegate = self;gzTableView3.separatorStyle= UITableViewCellSeparatorStyleNone;self.GZTableView3= gzTableView3;gzTableView3.tableHeaderView= headView;[scrollView addSubview:gzTableView3];[gzTableView3 mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(scrollView).offset([UIScreen mainScreen].bounds.size.width * 2);make.width.equalTo(gzTableView1);make.top.bottom.equalTo(gzTableView1);}];}
头部视图添加
视图都添加完毕之后，要实现滑动事件，我们必须要进行下面的活动：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {if (scrollView == self.scrollView || !scrollView.window) {return;}CGFloat offsetY= scrollView.contentOffset.y;CGFloat originY= 0;CGFloat otherOffsetY = 0;
判断ScrollView 是因为 我们这个页面有两种滑动事件
至此，简书个人中心页面的功能都已实现。
三、运行效果
运行效果如下图显示：
