swift 滑动视图结构组件

还是老规矩，先看效果图

slider.gif

当然我这些代码是在别人的基础上整理出来的，就这个滑动的时候文字大小和颜色的变化。

用法：

1.继承RSSliderVC控制器。
2.需要添加你头部视图，如果是每个标题是固定宽度就设置，若不是就不用设置。
3.配置标签的数据（typeMdoel）,就是头部的标题。
4.override func addChildViewController()的重写。

解读：

RSSliderVC

D5F061DF-9292-4FFD-A952-9636C72AC61C.png

该Controller的逻辑框架是上图那样，当然主要的就是两个scrollerView的联动，以及头部标题的变化。

extension RSSlideVC: UIScrollViewDelegate {
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        
        let idx: Int = Int(contentScrollView.contentOffset.x / SCREEN_WIDTH)
        setUpOneChildController(idx: idx)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        segmentView.selectedIdx = nextIndex()
        segmentView.titleScrollViewDidScroll(scrollView)
    }
    
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        
        segmentView.titleScrollViewWillBeginDragging(scrollView)
    }
}

当然这是Controller中滑动视图的代理方法，我们通过这些方法把两者联动起来。

RSExgSegmentView

这个就是头部的标签视图组件，这个组件的代码就有些复杂，但它需要处理的逻辑有：

1.视图结构：有scrollerView,button。
2.动作：滑动以及点击
3.变化：文字大小和颜色的渐变
4.联动：就是上面说的两个ScrollerView的联动。

就说说重点的吧，就是动作的时候，通过联动，使组件中的元素变化，就举个滑动的动作吧。

    func titleScrollViewDidScroll(_ scrollView: UIScrollView) {
        
        scrollViewDidScrollOffsetX(scrollView.contentOffset.x)
    }

    private func scrollViewDidScrollOffsetX(_ offsetX: CGFloat)  {
        
        buttonStateChangeOffsetX(offsetX)
        
        if currentIndex != selectedIdx {
            
            setupSlierScrollToCenter(offsetX: offsetX, index: selectedIdx)
            
            if isClick {
                
                let upButton = buttonArr[currentIndex]
                let currentButton = buttonArr[selectedIdx]
                
                UIView.animate(withDuration: 0.2, animations: {
                    
                    currentButton.transform = CGAffineTransform(scaleX: self.scale , y: self.scale)
                    upButton.transform = CGAffineTransform(scaleX: 1.0 , y: 1.0 )
                })
                
                setupButtonStatusAnimation(upButton: upButton, currentButton: currentButton)
                
            }
            
            currentIndex = selectedIdx
        }
        
        isClick = false
    }

这里是核心的部分，主要buttonStateChangeOffsetX这个方法中主要是获取当前已经选择的按钮和下一个要选择的按钮，根据滑动的offset做变化。

        let scaleDelta = (scale - 1.0) * progress
        currentButton.transform = CGAffineTransform(scaleX: scale - scaleDelta, y: scale - scaleDelta)
        nextButton.transform = CGAffineTransform(scaleX: 1.0 + scaleDelta, y: 1.0 + scaleDelta)

setupSlierScrollToCenter这个是设置scrollerView滑动到中心位置。

其余的就是一些逻辑的判断了，我这儿就不多介绍了。

最后给个GitHub上的Demo的地址

Demo