当内容和分类较多的时候，经常会用到顶部标签式导航栏，比如网易新闻客户端的顶部分类导航。最近正好有这样的应用场景，参考网上的一些demo，实现了这个导航效果，并记录下其中的一些重点。

效果图（因为视频转GIF掉帧，滑动下拉动画显得僵硬，刚刚发现可以直接录制手机视频，推荐一下，很方便）

1. 顶部标签导航栏 （1）实现思路

其实就是对上下部分进行一定的改变，达到联动选择、切换的效果。

①顶部标签导航栏加载并显示分类数据，下方显示分类对应的内容。选中顶部标签后，内容视图切换到对应视图。同样，滑动下方的内容视图时，标签栏滑动到指定分类并居中显示。如果分类初始位置在导航栏左侧或右侧，则无需滑动到中间位置，避免两边留白。

②顶部导航栏可以使用 或 来表示分类，这里增加了点击手势来响应交互事件。将分类提取为一个，包含分类名称、对应内容视图唯一的ID或URL、分类名称长度（分类下方下划线的长度随名称长度不同而变化）等属性。根据分类数量确定下方的内容视图，然后将分类顺序与内容顺序进行匹配，实现交互逻辑上的联动切换。

③点击右侧按钮，弹出下拉菜单，也可以切换类别。

（2）iOS7上的问题

由于iOS7和iOS8、9的差异，在iOS7上使用的一些动画效果不太好处理，所以这里采用的方法就是实现两个顶部导航栏和下拉菜单的UI效果。

（3）顶部导航栏

遍历类目数据，添加到顶部导航栏，注意以下几点：

①设置的标签与分类数据一一对应必应PC下拉★64xl.com最专业的下拉平台，哔站APP下拉，方便后续根据标识进行切换选择；

②ed默认值为NO，为了方便响应tap点击操作，需要设置；

③类目名称的长度是动态的，如果超出默认长度，会按照实际长度显示，包括长度和底部下划线的长度，所以在对应的类目数据中需要有一个长度属性来记录这个长度，以便后续显示时不用实时计算长度。

分类名下方下划线跟随分类，默认选择第一个，所以下划线也默认停留在第一个，顶部导航栏根据分类数量设置。

（4）内容视图

还根据类别数量设置内容视图

（五）两者的交互逻辑

两者之间的联动需要是单向传递的，避免重复滑动，这里的滑动选择操作有三种情况：

① 选择一个分类标签，导航栏滑动到指定位置，内容视图滑动到指定位置；

② 滑动内容视图，导航栏也会切换滑动到对应类别标签位置；

③在下拉菜单中选择一个类别，导航栏和内容视图滑动到相应位置，其实和①是一样的。

先说第一种情况，点击导航栏里的标签，就会回调。

先让滑块移动到指定位置，然后通知滑块。

这里需要注意的是，原本是在内容视图滑动后调用，通知导航栏滑动到对应的分类标签，而是手指在屏幕上滑动内容视图后调用，通知导航栏滑动到对应的分类标签，但为了让滑动时分类标签切换显示效果更加连贯，这里做了处理，当滑出一定距离，新的和当前的不一致时，通知导航栏切换分类标签，其实此时可以去掉。

同样的，第二种情况，滑动内容视图的时候，导航栏会切换滑动到对应的分类标签位置，这其实是在 中进行判断和处理的。

第三种情况，在下拉菜单中选择，具体操作和第一种情况一样。

需要注意的是关键下拉菜单，在切换类别的时候，需要记录并更新当前类别的值，这样在弹出下拉菜单的时候，能够高亮显示当前类别。

导航栏滑动的时候需要根据类目标签的具体位置决定是否滑动以及滑动的距离，并根据类目名称的长度更新下划线的长度。

但是这里忽略了一种情况，当类目标签显示不足一屏时，为负值，点击某个类目会把所有类目整体往右移动，这个就很奇怪了，这种情况下点击类目是不需要滚动的。

2.下拉分类菜单 （1）使用场景及方法

下拉可逐渐展开分类菜单，选择分类后导航栏和内容视图会切换到对应的分类和内容，展开状态下点击按钮或背景阴影区域可逐渐收起菜单。

（2）UI元素分解

一个放置在导航栏旁边的按钮，一个下拉菜单（放在下拉菜单里比较合适，这样就不用单独处理了），一个下拉类别菜单View，里面包含一个显示类别数据。控件和View一起显示，View背景色设置为一定的透明度作为背景。接下来总结几个重点。

（3）高度控制与分隔线效应

这里每行展示三类数据，确定了类别数和单元格高度后，就可以确定高度了，即先确定垂直方向有多少行类别数据，行数x单元格高度就是高度。

这里需要注意一点，默认是不可滑动的，但是需要对显示的高度进行判断，当超出可见范围时，需要允许滑动。

对于分类单元格的分隔符效果，最容易想到的就是单元格之间留有空隙，并设置背景色。但是这里存在两个问题，首先单元格被三等分后留有空隙，空隙的宽度会是小数，显示的效果不均匀。另外单元格与背景色都是白色，留有空隙无法形成分隔符的视觉效果。所以只能在单元格内部进行处理，在底部和右侧添加分隔符，并根据单元格的位置控制是否显示分隔符。

（4）点击事件处理

View增加了一个点击手势，点击view会通知下拉分类菜单折叠移除，作为一部分，点击view也会通知下拉分类菜单折叠移除，这个明显不符合要求，解决办法是设置手势属性为NO，也就是把事件传递给上层，选中分类后再继续处理。

（5）交互效果处理

下拉菜单可以实现渐变效果的展开和折叠，需要注意的是，要实现折叠动画效果，需要先去掉阴影关键下拉菜单，再折叠下拉菜单。这里的阴影其实是View的背景色，具有一定的透明度，所以先设置背景色，再折叠菜单。

3. 参考文献

（1）

（2）