話不多說，直接上圖，要實現類似如下效果。
這個效果非常常見，這裡著重講講核心**
封裝頂部的pagetitleview
封裝建構函式
封裝建構函式，讓別人在建立物件時，就傳入其實需要顯示的內容 frame：建立物件時確定了
// mark:- 建構函式
init(frame: cgrect, isscrollenable : bool, titles : [string])
設定ui介面
設定ui介面
實現相對來說比較簡單，這裡**從略
封裝底部的pagecotentview
封裝建構函式
封裝建構函式，讓別人在建立物件時，就傳入其實需要顯示的內容
// mark:- 建構函式
init(frame: cgrect, childvcs : [uiviewcontroller], parentviewcontroller : uiviewcontroller)
設定uwww.cppcns.comi介面內容
設定ui介面
// mark:- 懶載入屬性
private lazy var collectionview : uicollectionview = ()
private func setupui()
// 2.新增collectionview
addsubview(collectionview)
}實現uicollectionview的資料來源方法
// mark:- 遵守uicollectionview的資料來源
extension pagecontentview : uicollectionviewdatasource
func collectionview(collectionview: uicollectionview, cellforitematindexpath indexpath: nsindexpath) -> uicollectionviewcell
// 取出控制器
let childvc = childvcs[indexpath.item]
childvc.view.frame = cell.contentview.bounds
cell.contentview.addsubview(childvc.view)
return cell
}}pagetitleview點選改變pagecontentview
通過**將pagetitleview的事件傳遞出去
/// 定義協議
protocol pagetitleviewdelegate : class
@objc private func titlelabelclick(tapges : uitapgesturerecognizer)
let index = view.tag
// 2.滾到正確的位置
scrolltoindex(index)
// 3.通知**
delegate?.pagetitleview(self, didselectedindex: index)
}內部調整
// 內容滾動
private func scrolltoindex(index : int)
// 4.記錄index
currentindex = index
}在pagecontentview中設定當前應該滾動的位置
// mark:- 對外暴露方法
extension pagecontentview
}pagecontentview滾動調整pagetitleview
通過觀察，我們發現：
1> 原來位置的title顏色會逐漸變暗
2> 目標位置的title顏色會逐漸變亮
3> 變化程度是和滾動的多少相關
由此得出結論：
我們一共需要獲取三個值
1> 起始位置下標值
2> 目標位置下標值
3> 當前滾動的進度
其實前2點可以由第3點計算而來，可以只需要將進度傳遞出去。
根據進度值處理標題顏色漸變及滑塊邏輯
。當前進度值唯一確定了標題的狀態，計算出需要發生顏色變化的兩相鄰標題索引
。注意：下標值需要防止越界問題，臨界點的處理
實現**
extension pagecontentview : uicollectionviewdelegate
func scrollviewdidscroll(scrollview: uiscrollview)
// 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實現漸變效果）
private let knormalrgb : (cgfloat, cgfloat, c = (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)
調整scrollline及兩個label顏色漸變
// mark:- 對外暴露方法
extension pagetitleview
func changelabel(progress: cgfloat)
print("leftlabelindex = \(leftlabelindex)")
var rightindex = leftlabelindex + 1
if rightindex >= 3
print("rightindex = \(rightindex)")
let rightlabel = titlelabels[rightindex]
//滑塊的邏輯
let movetotalx = leftlabel.frame.width
let movex = movetotalx * ratio
scrollline.frame.o程式設計客棧rigin.x = leftlabel.frame.origin.x + movex
顏色的漸變
// 3.1.取出變化的範圍
let colordelta = (kselectedcolor.0 - knormalcolor.0, kselectedcolor.1 - knormalcolor.1, kselectedcolor.2 - knormalcolor.2)
if leftlabelindex != rightindex
//程式設計客棧 4.記錄最新的index
currentindex = leftlabelindex
}}本文標題: ios 頁面滑動與標題切換顏色漸變的聯動效果例項
本文位址:
滑動切換頁面
1.首先需要在activity介面中新增乙個view 2.view 需要搭配乙個介面卡才能使用，介面卡可以決定建立多少各view，返回當前要顯示的view。有多種型別的adapter，這裡使用的是fragment adapter。public classvpadapterextendsfragmen...
iOS 多頁面滑動
最近先來有空，寫了乙個多頁面滑動的框架,先上圖 思路 1.標題使用uicollectionview實現，有兩種模式，標題居中平均長度，另外一種模式是標題靠左 2.下面的頁面切換使用乙個uipageviewcontroller 標頭檔案 hrscrollpagecontroller.h 多頁滑動 cr...
ios 橫向滾輪效果 ios橫向選單 頁面滑動
ios橫向選單 頁面滑動 檢視次數 9122 大小 11 b demo 橫向選單 頁面滑動 例子uiviewcontroller vc1 uiviewcontroller alloc init vc1.view setbackgroundcolor uicolor redcolor uiviewco...