实现简书个人中心UI效果

这两天比较闲，简单实现了一下个人中心页面scrollView嵌套的效果，也就是下边这个页面,大家感受一下先：

JSDemo2.gif

首先讲下实现思路，很多人看到这个界面觉得是多个scrollView嵌套实现的，其实苹果不推荐scrollView的嵌套，特别是有同方向滚动行为的scrollView嵌套，因为系统也不知道你当前想要哪个scrollView滚动。那我就在想能不能想个办法绕过这个问题，最终我采取了这样的方案，底部一个横向滑动的scrollView，上边放着左中右三个tableView，这样就避开了scrollView同方向滑动冲突问题，每个tableView上都有个空白的headerView占位使用（看了下边的讲解就明白了），然后再在控制器view上方一个view做真实的headerView，放控制器的view上是为了不让它随任何一个tableView滑动而滑动，而是在某些时候改变其y值来制造和三个tableView共同滚动的假象！接下来请看具体讲解和代码实现：

控制器的view上是个横向滑动的scrollView，上边放着三个tableView,主要代码如下

// 底部横向滑动的scrollView

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:scrollView];

scrollView.backgroundColor = [UIColor colorWithWhite:0.998 alpha:1];

// 绑定代理

scrollView.delegate = self;

// 设置滑动区域

scrollView.contentSize = CGSizeMake(3 * WZBScreenWidth, 0);

scrollView.pagingEnabled = YES;

self.scrollView = scrollView;

// 创建三个tableView

self.leftTableView = [self tableViewWithX:0];

self.centerTableView = [self tableViewWithX:WZBScreenWidth];

self.rightTableView = [self tableViewWithX:WZBScreenWidth * 2];

// 创建tableView

- (UITableView *)tableViewWithX:(CGFloat)x {

UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(x, 0, WZBScreenWidth, WZBScreenHeight - 0)];

[self.scrollView addSubview:tableView];

tableView.backgroundColor = [UIColor colorWithWhite:0.998 alpha:1];

tableView.showsVerticalScrollIndicator = NO;

// 代理&&数据源

tableView.delegate = self;

tableView.dataSource = self;

// 创建一个假的headerView，高度等于控制器view上那个headerView的高度（这里暂且写死150+44）

UIView *headerView = [[UIView alloc] initWithFrame:(CGRect){0, 0, WZBScreenWidth, 194}];

tableView.tableHeaderView = headerView;

return tableView;

}

然后为每个tableView创建一个假的headerView，高度等于控制器view上那个headerView的高度（这里暂且写死150+44），为什么这样做？因为我要在控制器的view上放一个headerView，这样就能方便的控制headerView的y值，使其达到预期的效果，这样也创造出了一个假象，就是其实上边的headerView跟三个tableView没有什么关系，只是在滑动的时候动态的改变headerView的y值，当tableView滑动到某个位置的时候，让其能够停留在这个位置。监听tableView滑动的代码下边会讲到。如图：

三个tableView

headerView分为两部分，一部分是上边的死数据，其实就是一个自定义view，上边几个label。下边部分是个类似segmeng的自定义控件，是用我之前写的WZBSegmentedControl实现的，具体请看：干货！老司机工作中用到的自定义控件，总有一个适合你的（一），创建代码为：

// 创建segmentedControl

WZBSegmentedControl *sectionView = [WZBSegmentedControl segmentWithFrame:(CGRect){0, 150, WZBScreenWidth, 44} titles:@[@"动态", @"文章", @"更多"] tClick:^(NSInteger index) {

// 改变scrollView的contentOffset

self.scrollView.contentOffset = CGPointMake(index * WZBScreenWidth, 0);

// 刷新最大OffsetY

[self reloadMaxOffsetY];

}];

// 赋值给全局变量

self.sectionView = sectionView;

// 设置其他颜色

[sectionView setNormalColor:[UIColor blackColor] selectColor:[UIColor redColor] sliderColor:[UIColor redColor] edgingColor:[UIColor clearColor] edgingWidth:0];

// 去除圆角

sectionView.layer.cornerRadius = sectionView.backgroundView.layer.cornerRadius = .0f;

// 加两条线

for (NSInteger i = 0; i < 2; i++) {

UIView *line = [UIView new];

line.backgroundColor = WZBColor(228, 227, 230);

line.frame = CGRectMake(0, 43.5 * i, WZBScreenWidth, 0.5);

[sectionView addSubview:line];

}

header

重点是下边的一些代理方法的监听：

一、正在滚动的时候(本demo定死了headerView的高度为150+44)

如果发现是tableView在滑动，判断滑动偏移量是否大于150，如果不大于150，则同步三个tableView的偏移量为当前tableView的偏移量，这样做是让三个tableView看起来像是在同步移动，然后改变headerView的y值（让headerView也往上走）。如果偏移量大于等于150，则让headerView的y值等于-150，就相当于停留在这个位置了。如果发现当前滚动的是底部横向那个scrollView，则需要同步segment的偏移量，代码如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

// 如果当前滑动的是tableView

if ([scrollView isKindOfClass:[UITableView class]]) {

CGFloat contentOffsetY = scrollView.contentOffset.y;

// 如果滑动没有超过150

if (contentOffsetY < 150) {

// 让这三个tableView的便宜量相等

self.leftTableView.contentOffset = self.centerTableView.contentOffset = self.rightTableView.contentOffset = scrollView.contentOffset;

// 改变headerView的y值

CGRect frame = self.headerView.frame;

CGFloat y = -self.rightTableView.contentOffset.y;

frame.origin.y = y;

self.headerView.frame = frame;

// 一旦大于等于150了，让headerView的y值等于-150，就停留在上边了

} else if (contentOffsetY >= 150) {

CGRect frame = self.headerView.frame;

frame.origin.y = -150;

self.headerView.frame = frame;

}

}

if (scrollView == self.scrollView) {

// 改变segmentdControl

[self.sectionView setContentOffset:(CGPoint){scrollView.contentOffset.x / 3, 0}];

return;

}

}

这一步做完之后其实是不够严谨的，事实证明scrollViewDidScroll:这个代理方法调用的并不足够频繁，导致一些bug，就是三个tableView并没有同步，可能其中一个tableView滑了上去，而另外两个还没有跟上去。这时候如果左右滑动，就会暴露这个问题，如图：

导致bug

红色是tableView的那个假headerView

二、解决办法就是在开始左右滑动的时候，同步一下三个tableView的偏移量

// 开始拖拽

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

if (scrollView == self.scrollView) {

// 刷新最大OffsetY

[self reloadMaxOffsetY];

}

}

// 刷新最大OffsetY，让三个tableView同步

- (void)reloadMaxOffsetY {

// 计算出最大偏移量

CGFloat maxOffsetY = MAXValue(self.leftTableView.contentOffset.y, self.centerTableView.contentOffset.y, self.rightTableView.contentOffset.y);

// 如果最大偏移量大于150，处理下每个tableView的偏移量

if (maxOffsetY > 150) {

if (self.leftTableView.contentOffset.y < 150) {

self.leftTableView.contentOffset = CGPointMake(0, 150);

}

if (self.centerTableView.contentOffset.y < 150) {

self.centerTableView.contentOffset = CGPointMake(0, 150);

}

if (self.rightTableView.contentOffset.y < 150) {

self.rightTableView.contentOffset = CGPointMake(0, 150);

}

}

}

这时候，就解决了那个bug，基本功能也完成了，接下来解释一下位于导航栏上的头像处理：

为了能让头像自由的放大／缩小，并动态改变其y值，达到预期效果，我用了两个view实现，一个是底部普通的view做导航栏titleView，然后再在这个view上放imageView展示头像，然后监听scrollViewDidScroll:方法，一边改变imageView的大小，一边改变y值，就实现了简书的那种效果，注意最大和最小的边界值，代码如下：

// 加载头部头像

UIView *avatarView = [[UIView alloc] initWithFrame:(CGRect){0, 0, 35, 35}];

avatarView.backgroundColor = [UIColor clearColor];

UIImageView *avatar = [[UIImageView alloc] initWithFrame:(CGRect){0, 26.5, 35, 35}];

avatar.image = [UIImage imageNamed:@"demo1"];

avatar.layer.masksToBounds = YES;

avatar.layer.cornerRadius = 35 / 2;

[avatarView addSubview:avatar];

self.navigationItem.titleView = avatarView;

avatar.transform = CGAffineTransformMakeScale(2, 2);

self.avatar = avatar;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

// 处理顶部头像

CGFloat scale = scrollView.contentOffset.y / 80;

// 如果大于80，==1，小于0，==0

if (scrollView.contentOffset.y > 80) {

scale = 1;

} else if (scrollView.contentOffset.y <= 0) {

scale = 0;

}

// 缩放

self.avatar.transform = CGAffineTransformMakeScale(2 - scale, 2 - scale);

// 同步y值

CGRect frame = self.avatar.frame;

frame.origin.y = (1 - scale) * 8;

self.avatar.frame = frame;

}

打完收工，最后附上源码：JianShuMianPage 欢迎star

实现简书个人中心UI效果相关推荐

高仿简书Android,高仿简书个人中心页面
高仿简书个人中心页面 Demo下载地址: 先贴上效果图 1. 步骤 1.1 把APP的主题改为NoAction 1.2 引入Material Design 包 implementation 'com. ...
高仿简书个人中心页面
高仿简书个人中心页面 Demo下载地址: 先贴上效果图 1. 步骤 1.1 把APP的主题改为NoAction <st ...
仿简书、淘宝等等App的View弹出效果
昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...
实现仿简书选取内容生成分享图片效果
前几天脑子里忽然闪过简书的图片分享效果,感觉很简洁也很漂亮,想着能不能用自己方式实现一下呢,于是今天就有了这篇文章.好了,先看下效果图吧: 项目地址: https://github.com/zhang ...
简书新浪微博联合认证说明
简书微博联合认证是什么简书微博联合认证是简书和新浪微博合作的一种认证方式,也是一种身份标识,申请认证后,将会有以下效果在你的简书主页,微博icon将会显示一个橙色的V 简书个人主页在微博主页,拥 ...
仿简书APP富文本编辑器实现
最近看到了简书App中的编辑器可以实现字体的加粗,斜体,删除线等多种样式,而且可以插入图片,链接,分割线.支持字符串数据提交服务器,然后在TextView中直接展示. 如果我们没有了解其中原理之前,感 ...
简书张帅Android,AndroidAnimationExercise
AndroidAnimationExercise 这是一个关于Android中各种View的集合,里面包含自己日常开发和博客总结中的代码. 主要内容是Android动画.Android自定义View ...
全新的简书网站即将上线，你都有哪些期待？
1 2016 年即将结束,大家是否做好准备,迎接 2017? 回首过去一年,越来越多人选择在简书上写作,将自己的故事.想法和对世界的认知,用文字和图片传递给他人:越来越多人在简书上找到志同道合的知己, ...
【简书读书社】每个周末，一起来读简书电子书（第九期）
令人愉悦的周末来啦,不如让自己变得更加愉(dou)悦(bi)一点~今天为大家推荐的是我们主编大人刘淼老师的<笑话方法论>. 顾名思义,这是一本教你讲笑话的书.有理有据,令人不得不服.快来学 ...

实现简书个人中心UI效果

实现简书个人中心UI效果相关推荐

最新文章

热门文章