話不多說(shuō)，直接上圖，要實(shí)現(xiàn)類似如下效果。
這個(gè)效果非常常見(jiàn)，這里著重講講核心代碼
封裝頂部的PageTitleView
封裝構(gòu)造函數(shù)
封裝構(gòu)造函數(shù)，讓別人在創(chuàng)建對(duì)象時(shí)，就傳入其實(shí)需要顯示的內(nèi)容 frame：創(chuàng)建對(duì)象時(shí)確定了
// MARK:- 構(gòu)造函數(shù)init(frame: CGRect, isScrollEnable : Bool, titles : [String]) {selfisScrollEnable = isScrollEnableselftitles = titlessuperinit(frame: frame)}設(shè)置UI界面
設(shè)置UI界面
實(shí)現(xiàn)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，這里代碼從略
封裝底部的PageCotentView
封裝構(gòu)造函數(shù)
封裝構(gòu)造函數(shù)，讓別人在創(chuàng)建對(duì)象時(shí)，就傳入其實(shí)需要顯示的內(nèi)容
// MARK:- 構(gòu)造函數(shù)init(frame: CGRect, childVcs : [UIViewController], parentViewController : UIViewController) {selfchildVcs = childVcsselfparentViewController = parentViewControllersuperinit(frame: frame)}設(shè)置UI界面內(nèi)容
設(shè)置UI界面
// MARK:- 懶加載屬性private lazy var collectionView : UICollectionView = {// 1.創(chuàng)建布局let layout = UICollectionViewFlowLayout()layout.itemSize = self.bounds.sizelayout.minimumLineSpacing = 0layout.minimumInteritemSpacing = 0layout.scrollDirection = .Horizontal// 2.創(chuàng)建collectionViewlet collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)collectionView.showsHorizontalScrollIndicator = falsecollectionView.pagingEnabled = truecollectionView.bounces = falsecollectionView.scrollsToTop = falsecollectionView.dataSource = selfcollectionView.delegate = selfcollectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kContentCellID)return collectionView}()private func setupUI() {// 1.添加所有的控制器for childVc in childVcs {parentViewController?.addChildViewController(childVc)}// 2.添加collectionViewaddSubview(collectionView)}實(shí)現(xiàn)UICollectionView的數(shù)據(jù)源方法
// MARK:- 遵守UICollectionView的數(shù)據(jù)源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.boundscell.contentView.addSubview(childVc.view)return cell}}PageTitleView點(diǎn)擊改變PageContentView
通過(guò)代理將PageTitleView的事件傳遞出去
/// 定義協(xié)議protocol PageTitleViewDelegate : class {func pageTitleView(pageTitleView : PageTitleView, didSelectedIndex index : Int)}@objc private func titleLabelClick(tapGes : UITapGestureRecognizer) {// 1.獲取點(diǎn)擊的下標(biāo)志guard let view = tapGes.view else { return }let index = view.tag// 2.滾到正確的位置scrollToIndex(index)// 3.通知代理delegate?.pageTitleView(self, didSelectedIndex: index)}內(nèi)部調(diào)整
// 內(nèi)容滾動(dòng)private func scrollToIndex(index : Int) {// 1.獲取最新的label和之前的labellet newLabel = titleLabels[index]let oldLabel = titleLabels[currentIndex]// 2.設(shè)置label的顏色newLabel.textColor = kSelectTitleColoroldLabel.textColor = kNormalTitleColor// 3.scrollLine滾到正確的位置let scrollLineEndX = scrollLine.frame.width * CGFloat(index)UIView.animateWithDuration(0.15) {self.scrollLine.frame.origin.x = scrollLineEndX}// 4.記錄indexcurrentIndex = index}在PageContentView中設(shè)置當(dāng)前應(yīng)該滾動(dòng)的位置
// MARK:- 對(duì)外暴露方法extension PageContentView { func scrollToIndex(index : Int) {let offset = CGPoint(x: CGFloat(index) * collectionViewboundswidth, y: 0) collectionViewsetContentOffset(offset, animated: false)}}PageContentView滾動(dòng)調(diào)整PageTitleView
通過(guò)觀察，我們發(fā)現(xiàn)：
1> 原來(lái)位置的Title顏色會(huì)逐漸變暗
2> 目標(biāo)位置的Title顏色會(huì)逐漸變亮
3> 變化程度是和滾動(dòng)的多少相關(guān)
由此得出結(jié)論：
我們一共需要獲取三個(gè)值
1> 起始位置下標(biāo)值
2> 目標(biāo)位置下標(biāo)值
3> 當(dāng)前滾動(dòng)的進(jìn)度
其實(shí)前2點(diǎn)可以由第3點(diǎn)計(jì)算而來(lái)，可以只需要將進(jìn)度傳遞出去。
根據(jù)進(jìn)度值處理標(biāo)題顏色漸變及滑塊邏輯
。當(dāng)前進(jìn)度值唯一確定了標(biāo)題的狀態(tài)，計(jì)算出需要發(fā)生顏色變化的兩相鄰標(biāo)題索引
。注意：下標(biāo)值需要防止越界問(wèn)題，臨界點(diǎn)的處理
實(shí)現(xiàn)代碼
extension PageContentView : UICollectionViewDelegate {func scrollViewWillBeginDragging(scrollView: UIScrollView) {startOffsetX = scrollView.contentOffset.x}func scrollViewDidScroll(scrollView: UIScrollView) {// 0.判斷是否是點(diǎn)擊事件 if isForbidScrollDelegate { return }// 1.定義獲取需要的數(shù)據(jù) var progress : CGFloat = 0 let currentOffsetX = scrollView.contentOffset.x let scrollViewW = scrollView.bounds.width // 1.計(jì)算progress progress = currentOffsetX / scrollViewW // 3.將progress傳遞給titleView delegate?.pageContentView(self, progress: progress) }}根據(jù)滾動(dòng)傳入的值，調(diào)整PageTitleView
兩種顏色必須使用RGB值設(shè)置（方便通過(guò)RGB實(shí)現(xiàn)漸變效果）
private let kNormalRGB : (CGFloat, CGFloat, CGFloat) = (85, 85, 85)private let kSelectRGB : (CGFloat, CGFloat, CGFloat) = (255, 128, 0)private let kDeltaRGB = (kSelectRGB.0 - kNormalRGB.0, kSelectRGB.1 - kNormalRGB.1, kSelectRGB.2 - kNormalRGB.2)private let kNormalTitleColor = UIColor(red: 85/255.0, green: 85/255.0, blue: 85/255.0, alpha: 1.0)private let kSelectTitleColor = UIColor(red: 255.0/255.0, green: 128/255.0, blue: 0/255.0, alpha: 1.0)
調(diào)整scrollLine及兩個(gè)Label顏色漸變
// MARK:- 對(duì)外暴露方法extension PageTitleView func changeLabel(progress: CGFloat) {// 開(kāi)啟彈簧效果時(shí)的過(guò)濾處理 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 }}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
