項(xiàng)目源碼下載
框架實(shí)現(xiàn)效果圖
對(duì)于該功能的需求分析
1.切換標(biāo)題,被點(diǎn)擊的標(biāo)題和原標(biāo)題的比例和顏色都會(huì)漸變,并且會(huì)切換控制器
2.滑動(dòng)內(nèi)容視圖也會(huì)產(chǎn)生點(diǎn)擊標(biāo)題的效果
3.內(nèi)容視圖一開始不加載,有一張占位圖占位
4.視頻和社會(huì)標(biāo)題被點(diǎn)擊后會(huì)滑動(dòng)到屏幕中央
一步步實(shí)現(xiàn)導(dǎo)航標(biāo)題欄
搭建基本框架
1.該功能由2個(gè)ScrollView組成
2.標(biāo)題導(dǎo)航欄可以使用三目運(yùn)算來判斷y值(根據(jù)是否存在導(dǎo)航控制器)設(shè)置標(biāo)題
1.通過遍歷所有的子控制器來創(chuàng)建對(duì)應(yīng)標(biāo)題
2.設(shè)置標(biāo)題按鈕的X值時(shí),使用下標(biāo)乘以按鈕寬度獲得
3.標(biāo)題也可以通過label來實(shí)現(xiàn),只需要為label添加點(diǎn)按手勢(shì),并且將userInteractionEnabled設(shè)置為YES監(jiān)聽標(biāo)題按鈕點(diǎn)擊
1.通過下標(biāo)來為按鈕tag賦值,并且給按鈕添加一個(gè)監(jiān)聽方法
2.在監(jiān)聽方法中恢復(fù)上一個(gè)按鈕文字顏色并將被點(diǎn)擊按鈕顏色變紅,記錄下當(dāng)前被點(diǎn)擊按鈕
3.通過按鈕tag來獲取對(duì)應(yīng)子控制器并設(shè)置frame
4.設(shè)置內(nèi)容控制器的偏移量監(jiān)聽內(nèi)容視圖滾動(dòng)
1.為內(nèi)容視圖添加代理,并在scrollViewDidEndDecelerating:方法中實(shí)現(xiàn)
2.通過內(nèi)容視圖偏移量的X除以屏幕寬度來獲得角標(biāo)
3.通過角標(biāo)來選中按鈕和獲取子控制器的View
4.在獲取子控制器View的方法內(nèi)判斷當(dāng)前視圖是否存在superview,如果存在就return,這段代碼可以實(shí)現(xiàn)最開始切換在該視圖時(shí)有個(gè)占位圖片,實(shí)現(xiàn)懶加載按鈕居中處理
1.通過被選中按鈕中心點(diǎn)的X值減去屏幕寬度的一半來計(jì)算偏移量
2.通過偏移量來判斷如果小于0或者大于最大滾動(dòng)寬度時(shí)不移動(dòng),否則會(huì)造成每個(gè)標(biāo)題都居中標(biāo)題縮放
1.通過偏移量除以屏幕寬度來獲得左邊按鈕角標(biāo),左邊按鈕角標(biāo)加一來獲得右邊按鈕角標(biāo)
2.在設(shè)置標(biāo)題按鈕方法中,將每個(gè)按鈕加入可變數(shù)組
3.通過角標(biāo)來獲得2個(gè)按鈕,這里需要判斷如果左邊按鈕角標(biāo)為5時(shí),不取右邊按鈕
4.通過CGAffineTransformMakeScale方法來對(duì)2個(gè)按鈕縮放-
標(biāo)題文字漸變
- 為什么文字顏色能漸變?通過RGB來實(shí)現(xiàn),更改R的值就能實(shí)現(xiàn)黑色和紅色的漸變
具體實(shí)現(xiàn)請(qǐng)看源碼,若有疑問,會(huì)第一時(shí)間解答
還在學(xué)習(xí)中,若有錯(cuò)誤請(qǐng)大家指出,謝謝!
