【移動(dòng)應(yīng)用開發(fā)技術(shù)】iOS如何實(shí)現(xiàn)頁面滑動(dòng)與標(biāo)題切換顏色漸變的聯(lián)動(dòng)效果

/upload/information/20200623/126/121908.gif封裝頂部的PageTitleView封裝構(gòu)造函數(shù)//

MARK:-

構(gòu)造函數(shù)

init(frame:

CGRect,

isScrollEnable

:

Bool,

titles

:

[String])

{

selfisScrollEnable

=

isScrollEnable

selftitles

=

titles

superinit(frame:

frame)

}設(shè)置UI界面設(shè)置UI界面封裝底部的PageCotentView封裝構(gòu)造函數(shù)//

MARK:-

構(gòu)造函數(shù)

init(frame:

CGRect,

childVcs

:

[UIViewController],

parentViewController

:

UIViewController)

{

selfchildVcs

=

childVcs

selfparentViewController

=

parentViewController

superinit(frame:

frame)

}設(shè)置UI界面內(nèi)容設(shè)置UI界面//

MARK:-

懶加載屬性

private

lazy

var

collectionView

:

UICollectionView

=

{

//

1.創(chuàng)建布局

let

layout

=

UICollectionViewFlowLayout()

layout.itemSize

=

self.bounds.size

layout.minimumLineSpacing

=

0

layout.minimumInteritemSpacing

=

0

layout.scrollDirection

=

.Horizontal

//

2.創(chuàng)建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)

}//

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.bounds

cell.contentView.addSubview(childVc.view)

return

cell

}

}///

定義協(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)容滾動(dòng)

private

func

scrollToIndex(index

:

Int)

{

//

1.獲取最新的label和之前的label

let

newLabel

=

titleLabels[index]

let

oldLabel

=

titleLabels[currentIndex]

//

2.設(shè)置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

}//

MARK:-

對外暴露方法

extension

PageContentView

{

func

scrollToIndex(index

:

Int)

{

let

offset

=

CGPoint(x:

CGFloat(index)

*

collectionViewboundswidth,

y:

0)

collectionViewsetContentOffset(offset,

animated:

false)

}

}PageContentView滾動(dòng)調(diào)整PageTitleViewextension

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)

}

}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)//

MARK:-

對外暴露方法

extension

PageTitleView

func

changeLabel(progress:

CGFloat)

{

//

開啟彈簧效果時(shí)的過濾處理

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: