仿“百度贴吧/简书等”个人页面的实现方案

类似贴吧，简书等个人内容比较丰富的APP，个人页面除了彰显个性，内容的展示也非常重要，现在普遍的设计都是顶部个人信息和统计，下半部分则是个人内容的展示。例如我的简书个人主页：

简书个人主页.gif

这里包含几个特别有意思的功能：

1. 顶部导航栏背景隐藏
2. 上拉逐渐显示导航栏
3. 下拉背景图片放大
4. 上拉背景视图向上滚动，在内容切换的视图置顶（导航栏下面）之后，背景视图停止滚动，内容则可以继续滚动。
5. 内容可以由内容切换视图内部的按钮进行切换

总体来说，这是一个经典的ScrollView的嵌套案例，Github已经有类似的方案提供了，大家可以参考：

JXPagingView
这个是我最近在Github上看到的，star数非常多，而且作者也写了原理，并一直在进行维护，推荐使用。

HJTabViewController
我的APP用的都是这个，目前来看还不错，不过好久没有维护了。

所以这次决定就研究下HJTabViewController的实现原理，看看自己有没有实力写一个类似的库。

图层结构

先来谈下图层结构，这是一个典型的ScrollView的嵌套结构，即一个横向滚动的ScrollView嵌套一个纵向滚动的ScrollView。

而HeaderView，TabView，则是位于ScrollView之上，利用ScrollView的Insets来进行设计。

截屏2021-12-06 下午7.59.04.png

• 红色为UIPageView
• 蓝色的UIScrollView，他被添加到UIPageView中，负责横向滚动，因此pagingEnabled设置为YES
• 白色的UIScrollView，来自INSPageContentViewController的UIScrollView，以Page的形式添加到UIScrollView中，负责垂直滚动。
• 粉色的是UIStackView，包含了一个HeaderView和一个TabView，注意，他是被添加到UIPageView中的

利用UIScrollView的Insets

• 白色的UIScrollView，他的Insets.top被设定为UIStackView的高度，默认情况下，白色UIScrollView的初始的ContentOffset为(0, -insets.top)，同时UIStackView的Y坐标的位置为0，此时看上去就会是顶部是UIStackView，接下来就是白色UIScrollView的内容。

• 垂直滚动时，我们唯一需要处理的就是UIStackView的Y坐标的位置(或者UIStackView的高度)。

• 水平滚动时，我们需要处理Page页面的切换，和TabView指示器的切换。

最终的代码在这里：
INSPageView
大家可以结合源码和Demo进行理解。