思享工具箱

iOS 页面滑动与标题切换颜色渐变的联动效果

摘要：
话不多说，应该直接使用上图来实现以下效果。这种影响非常普遍。在这里，我们将重点放在核心代码封装顶部的PageTitleView封装构造函数封装构造函数上，以便其他人可以在创建对象框架时传递需要显示的内容：当创建对象时确定框架时，可以直接设置子控件isScrollEnable的位置和大小：是否可以滚动。在某些地方，控件可以滚动。

话不多说，直接上图，要实现类似如下效果。

  • 这个效果非常常见，这里着重讲讲核心代码
    iOS 页面滑动与标题切换颜色渐变的联动效果第1张

封装顶部的PageTitleView

封装构造函数

  • 封装构造函数，让别人在创建对象时，就传入其实需要显示的内容
    • frame：创建对象时确定了frame就可以直接设置子控件的位置和尺寸
    • isScrollEnable：是否可以滚动。某些地方该控件是可以滚动的。
    • titles：显示的所有标题
  1. // MARK:- 构造函数
  2. init(frame:CGRect, isScrollEnable :Bool, titles :[String]){
  3. self.isScrollEnable = isScrollEnable
  4. self.titles = titles
  5. super.init(frame: frame)
  6. }

设置UI界面

  • 设置UI界面
    • 添加UIScrollView，如果标题过多，则可以滚动
    • 初始化所有的Label，用于显示标题。并且给label添加监听手势
    • 添加顶部线和滑块的View

           实现相对来说比较简单，这里代码从略

封装底部的PageCotentView

封装构造函数

  • 封装构造函数，让别人在创建对象时，就传入其实需要显示的内容
    • 所有用于显示在UICollectionView的Cell的所有控制器
    • 控制器的父控制器
  1. // MARK:- 构造函数
  2. init(frame:CGRect, childVcs :[UIViewController], parentViewController :UIViewController){
  3. self.childVcs = childVcs
  4. self.parentViewController = parentViewController
  6. super.init(frame: frame)
  7. }

设置UI界面内容

  • 设置UI界面
    • 将所有的子控制器添加到父控制器中
    • 添加UICollectionView，用于展示内容
  1. // MARK:- 懒加载属性
private lazy var collectionView : UICollectionView = {
// 1.创建布局
let layout = UICollectionViewFlowLayout()
layout.itemSize = self.bounds.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.scrollDirection = .Horizontal
// 2.创建collectionView
let collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
collectionView.showsHorizontalScrollIndicator = false
collectionView.pagingEnabled = true
collectionView.bounces = false
collectionView.scrollsToTop = false
collectionView.dataSource = self
collectionView.delegate = self
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kContentCellID)
return collectionView
}()
private func setupUI() {
// 1.添加所有的控制器
for childVc in childVcs {
parentViewController?.addChildViewController(childVc)
}
// 2.添加collectionView
addSubview(collectionView)
}

实现UICollectionView的数据源方法

  • 在返回Cell的方法中，先将cell的contentView中的子控件都移除，防止循环引用
  • 取出indexPath.item对应的控制器，将控制器的View添加到Cell的contentView中 
    // MARK:- 遵守UICollectionView的数据源
extension PageContentView : UICollectionViewDataSource {
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return childVcs.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kContentCellID, forIndexPath: indexPath)
// 移除之前的
for subview in cell.contentView.subviews {
subview.removeFromSuperview()
}
// 取出控制器
let childVc = childVcs[indexPath.item]
childVc.view.frame = cell.contentView.bounds
cell.contentView.addSubview(childVc.view)
return cell
}
}
    PageTitleView点击改变PageContentView
  • 通过代理将PageTitleView的事件传递出去 
    /// 定义协议
protocol PageTitleViewDelegate : class {
func pageTitleView(pageTitleView : PageTitleView, didSelectedIndex index : Int)
}
@objc private func titleLabelClick(tapGes : UITapGestureRecognizer) {
// 1.获取点击的下标志
guard let view = tapGes.view else { return }
let index = view.tag
// 2.滚到正确的位置
scrollToIndex(index)
// 3.通知代理
delegate?.pageTitleView(self, didSelectedIndex: index)
}
    内部调整 
    // 内容滚动
private func scrollToIndex(index : Int) {
// 1.获取最新的label和之前的label
let newLabel = titleLabels[index]
let oldLabel = titleLabels[currentIndex]
// 2.设置label的颜色
newLabel.textColor = kSelectTitleColor
oldLabel.textColor = kNormalTitleColor
// 3.scrollLine滚到正确的位置
let scrollLineEndX = scrollLine.frame.width * CGFloat(index)
UIView.animateWithDuration(0.15) {
self.scrollLine.frame.origin.x = scrollLineEndX
}
// 4.记录index
currentIndex = index
}
  • 在PageContentView中设置当前应该滚动的位置
  1. // MARK:- 对外暴露方法
  2. extension PageContentView{
  3. func scrollToIndex(index :Int){
  4. let offset =CGPoint(x:CGFloat(index)* collectionView.bounds.width, y:0)
  5. collectionView.setContentOffset(offset, animated:false)
  6. }
  7. }

PageContentView滚动调整PageTitleView

通过观察，我们发现：

                1> 原来位置的Title颜色会逐渐变暗

                2> 目标位置的Title颜色会逐渐变亮

                3> 变化程度是和滚动的多少相关

  • 由此得出结论：
    • 我们一共需要获取三个值
    • 1> 起始位置下标值
    • 2> 目标位置下标值
    • 3> 当前滚动的进度 

        其实前2点可以由第3点计算而来，可以只需要将进度传递出去。

  • 根据进度值处理标题颜色渐变及滑块逻辑

         。当前进度值唯一确定了标题的状态，计算出需要发生颜色变化的两相邻标题索引

         。注意：下标值需要防止越界问题，临界点的处理

实现代码

extension PageContentView : UICollectionViewDelegate {

func scrollViewWillBeginDragging(scrollView: UIScrollView) {

startOffsetX = scrollView.contentOffset.x

}

func scrollViewDidScroll(scrollView: UIScrollView) {

// 0.判断是否是点击事件

       if isForbidScrollDelegate { return }

// 1.定义获取需要的数据

        var progress : CGFloat = 0

        let currentOffsetX = scrollView.contentOffset.x

        let scrollViewW = scrollView.bounds.width

             // 1.计算progress

            progress = currentOffsetX / scrollViewW

             // 3.将progress传递给titleView

        delegate?.pageContentView(self, progress: progress)

   }

}

根据滚动传入的值，调整PageTitleView

两种颜色必须使用RGB值设置（方便通过RGB实现渐变效果）

privatelet kNormalRGB :(CGFloat,CGFloat,CGFloat)=(85,85,85)

privatelet kSelectRGB :(CGFloat,CGFloat,CGFloat)=(255,128,0)

privatelet kDeltaRGB =(kSelectRGB.0- kNormalRGB.0, kSelectRGB.1- kNormalRGB.1, kSelectRGB.2- kNormalRGB.2)

privatelet kNormalTitleColor =UIColor(red:85/255.0, green:85/255.0, blue:85/255.0, alpha:1.0)

privatelet kSelectTitleColor =UIColor(red:255.0/255.0, green:128/255.0, blue:0/255.0, alpha:1.0)

调整scrollLine及两个Label颜色渐变

// MARK:- 对外暴露方法

extension PageTitleView

    func changeLabel(progress: CGFloat) {

//        开启弹簧效果时的过滤处理
        var progress = progress > 0 ? progress : 0

         progress = progress <= CGFloat(titleLabels.count - 1) ? progress : CGFloat(titleLabels.count - 1)

        var leftLabelIndex = Int(floor(progress))

        let ratio = progress - CGFloat(leftLabelIndex)

        //获取leftLabel和rightLabel

        let leftLabel = titleLabels[leftLabelIndex]

        if leftLabelIndex >= 3{

            leftLabelIndex = 3

        }

        print("leftLabelIndex = (leftLabelIndex)")

        var rightIndex = leftLabelIndex + 1

        if rightIndex >= 3{

            rightIndex = 3

        }

        print("rightIndex = (rightIndex)")

        let rightLabel = titleLabels[rightIndex]

        //滑块的逻辑

        let moveTotalX = leftLabel.frame.width

        let moveX = moveTotalX * ratio

        scrollLine.frame.origin.x = leftLabel.frame.origin.x + moveX

        //3.Label颜色的渐变

        // 3.1.取出变化的范围

        let colorDelta = (kSelectedColor.0 - kNormalColor.0, kSelectedColor.1 - kNormalColor.1, kSelectedColor.2 - kNormalColor.2)

        if leftLabelIndex != rightIndex {

        // 3.2.变化leftLabel

        leftLabel.textColor = UIColor(r: kSelectedColor.0 - colorDelta.0 * ratio, g: kSelectedColor.1 - colorDelta.1 * ratio, b: kSelectedColor.2 - colorDelta.2 * ratio)

        // 3.2.变化rightLabel

        rightLabel.textColor = UIColor(r: kNormalColor.0 + colorDelta.0 * ratio, g: kNormalColor.1 + colorDelta.1 * ratio, b: kNormalColor.2 + colorDelta.2 * ratio)

        }

        // 4.记录最新的index

        currentIndex = leftLabelIndex
    }
}

浏览：232 | 发布日期：

免责声明：文章转载自《iOS 页面滑动与标题切换颜色渐变的联动效果》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇[NewLife.XCode]百亿级性能Pikachu实验环境搭建下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

随便看看

sikuli简介

Sikuli脚本自动化，你在屏幕上看到的任何东西。Sikuli是一个开放源码的最初的用户界面设计组织在麻省理工学院的研究项目。现在是保持并进一步协调与开源社区开发的Sikuli实验室在美国科罗拉多州博尔德大学。Sikuli的MIT许可证下发布的。当然，你也可以使用sikuli的javaAPI使其在java环境下运行。小例子大体上了解sikuli的界面，下面来...

TCL基本语法2

TCL基本语法21、format和scan两个基本的函数，和C语言中的sprintf和scanf的作用基本相同。format将不同类型的数据压缩在字符串中，scan将字符串中的数据提取出来。setnameJacksetage100setworker[format"%sis%dyearsold"$name$age]puts$workerscan$worker"...

ubuntu中VNC的安装配置笔记

设置密码并首次启动vncserver后。vnc/directory将在用户的主目录中生成。注意：安装后，用户的主目录中没有vnc目录。这是因为默认情况下启用了桌面配置，并且需要修改配置文件。后来，我在网上找到了一篇可靠的文章：http://blog.csdn.net/njchenyi/article/details/8489689本文中描述的配置方法确实可行...

VSCode, 当今最流行的免费开源代码编辑器，微软出品，必属精品

Visual Studio代码是一个轻量级但功能强大的源代码编辑器，可以在桌面上运行，可以用于Windows、MacOS和Linux。直接在编辑器中检查差异，暂时保存文件并提交。Visual Studio代码产品在初始操作中的内部代码控制可以通过编辑器内的SCM支持（包括丰富的Git集成）加快发布周期。用户界面-介绍VSCode编辑器的基本UI、命令和功能。...

PHP 垃圾回收机制(转)

GC进程通常从每个会话开始运行。GC的目的是在会话文件过期__destruct/unset__destruct（）析构函数后自动销毁和删除它们。PHP将使用全局变量session.gc_Probability和session.gc_advisor的值session.gc_Probability=1，...

WinSCP命令行操作

WinSCP命令行操作WinSCP是一个在Windows环境下使用SSH的开源图形SFTP客户端。它还支持SCP协议。它的主要功能是在本地和远程计算机之间安全地复制文件。在cmd下直接输入winscp，进入winscp操作界面。查看帮助。直接在下面输入帮助以查看所有可用命令。当第一个参数为“both”时，一个参数与另一个参数同步。未指定目录时，同步当前工作目...

最新文章

随机推荐

思享工具箱导航