iOS下简单实现滑动导航条

Posted 2023-03-15

参考技术A 最近在做一款ios的app，其中有一个页面需要分成三个版块，版块之间可以通过左右滑动来进行切换，也可以通过点击上方的按钮来切换，好像在android中可以用过ViewPager + Fragment来实现。界面大概就是这个样子，这里我以知乎客户端的发现页面为例：

其中整个页面分为三个小的版块，分别"推荐"，"热门"以及"收藏"。点击上方的文字后，下方的页面会切换到对应的版块，同时文字下方的蓝色导航条也会随着界面的切换跟着滑动。另外，当我们不通过按钮切换，用手势在页面上左右滑动时，导航条也会跟着一起滑动。功能大概就是这个样子。

下面简单分析下实现原理。首先在"发现"的下方应该有UIView，在UIView中放有3个UIButton。至于文字下方的导航条，可以用UILabel来做，宽度等于一个按钮的宽度，并将背景色改为蓝色。导航条下方的页面可以通过手势来左右滑动，首先想到的应该就是，这是一个UIScrollView，我们需要将scrollView的contentSize属性设置成三个页面宽度的大小，否则会无法滑动页面。然后在scrollView放上三个版块的页面，这个根据自身的业务情况而定，一般UITableView用得比较多。最后，怎样才能让页面滑动的时候导航条也跟着移动的？在Android中，一般的做法就是给scrollView中添加一个事件监听器，用来监听滑动事件，并在事件处理函数中执行响应的逻辑。在ios中没有事件监听这个概念，我们可以为scrollView设置它的代理，并在代理类中覆盖掉该方法：

设置了代理类后，代理类其实就是帮我们注册了相应的回调函数，每次scrollView只要有细微的滑动，该方法就会被调用。在方法中，需要做的就是获取scrollView当前的偏移量，然后根据这个偏移量来设定导航条的位置。

将scrollView与滚动条声明未全局变量，因为在其他方法中也会用到。

scrollView延迟初始化，在初始化时记得为其设置代理对象。

navLabel延迟初始化

将三个按钮添加到页面中，并为按钮添加点击事件处理函数。

将创建按钮的过程单独抽象出来

按钮点击后调用的函数，即切换页面

最后，在回调函数中根据scrollView的偏移量调整导航条的位置。

这是最终的效果图：