项目源码下载

框架实现效果图

对于该功能的需求分析

1.切换标题,被点击的标题和原标题的比例和颜色都会渐变,并且会切换控制器

2.滑动内容视图也会产生点击标题的效果

3.内容视图一开始不加载,有一张占位图占位

4.视频和社会标题被点击后会滑动到屏幕中央

一步步实现导航标题栏

• 搭建基本框架

• 1.该功能由2个ScrollView组成

• 2.标题导航栏可以使用三目运算来判断y值(根据是否存在导航控制器)

• 设置标题

• 1.通过遍历所有的子控制器来创建对应标题

• 2.设置标题按钮的X值时,使用下标乘以按钮宽度获得

• 3.标题也可以通过label来实现,只需要为label添加点按手势,并且将userInteractionEnabled设置为YES

• 监听标题按钮点击

• 1.通过下标来为按钮tag赋值,并且给按钮添加一个监听方法

• 2.在监听方法中恢复上一个按钮文字颜色并将被点击按钮颜色变红,记录下当前被点击按钮

• 3.通过按钮tag来获取对应子控制器并设置frame

• 4.设置内容控制器的偏移量

• 监听内容视图滚动

• 1.为内容视图添加代理,并在scrollViewDidEndDecelerating:方法中实现

• 2.通过内容视图偏移量的X除以屏幕宽度来获得角标

• 3.通过角标来选中按钮和获取子控制器的View

• 4.在获取子控制器View的方法内判断当前视图是否存在superview,如果存在就return,这段代码可以实现最开始切换在该视图时有个占位图片,实现懒加载

• 按钮居中处理

• 1.通过被选中按钮中心点的X值减去屏幕宽度的一半来计算偏移量

• 2.通过偏移量来判断如果小于0或者大于最大滚动宽度时不移动,否则会造成每个标题都居中

• 标题缩放

• 1.通过偏移量除以屏幕宽度来获得左边按钮角标,左边按钮角标加一来获得右边按钮角标

• 2.在设置标题按钮方法中,将每个按钮加入可变数组

• 3.通过角标来获得2个按钮,这里需要判断如果左边按钮角标为5时,不取右边按钮4.通过CGAffineTransformMakeScale方法来对2个按钮缩放

• 标题文字渐变

  • 为什么文字颜色能渐变?通过RGB来实现,更改R的值就能实现黑色和红色的渐变

具体实现请看源码,若有疑问,会第一时间解答

还在学习中,若有错误请大家指出,谢谢!