2017/9/2 20:37:56当前位置推荐好文新浪微博浏览文章

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

1502868928504022783.jpg
1502868928504022783.jpg

首先看到简书个人中心页面时,我大致给他划分为4大部分:

1,首先是用户的头像

2,用户资料信息

3,三个标题(TitleView)

4,下面UITableView

因为此处有左右滑动和上下两种滑动,所以在上面的2,3,4 我们整体放在一个ScrollView上, 而1,用户头像的改变,根据ScrollView 的上下滑动 y 值对头像大小进行处理。

项目中不需要配置任何东西,全都是逻辑方面的东西,只要思维逻辑清楚,我们就开始干

这是我项目结构图:


1502869022329079590.png
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
视.gif

帮助到了小伙伴可以点个讚,如果有需要的可以加入我闷的QQ群:237573715 欢迎您的加入。
关注我们的公众号:Gang0679

网友评论