IOS开发-详解网易新闻导航标题栏

项目源码下载

框架实现效果图

对于该功能的需求分析
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的值就能实现黑色和红色的渐变

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

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