項(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)容視圖一開(kā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)算來(lái)判斷y值(根據(jù)是否存在導(dǎo)航控制器)

• 設(shè)置標(biāo)題
  1.通過(guò)遍歷所有的子控制器來(lái)創(chuàng)建對(duì)應(yīng)標(biāo)題
  2.設(shè)置標(biāo)題按鈕的X值時(shí),使用下標(biāo)乘以按鈕寬度獲得
  3.標(biāo)題也可以通過(guò)label來(lái)實(shí)現(xiàn),只需要為label添加點(diǎn)按手勢(shì),并且將userInteractionEnabled設(shè)置為YES

• 監(jiān)聽(tīng)標(biāo)題按鈕點(diǎn)擊
  1.通過(guò)下標(biāo)來(lái)為按鈕tag賦值,并且給按鈕添加一個(gè)監(jiān)聽(tīng)方法
  2.在監(jiān)聽(tīng)方法中恢復(fù)上一個(gè)按鈕文字顏色并將被點(diǎn)擊按鈕顏色變紅,記錄下當(dāng)前被點(diǎn)擊按鈕
  3.通過(guò)按鈕tag來(lái)獲取對(duì)應(yīng)子控制器并設(shè)置frame
  4.設(shè)置內(nèi)容控制器的偏移量

• 監(jiān)聽(tīng)內(nèi)容視圖滾動(dòng)
  1.為內(nèi)容視圖添加代理,并在scrollViewDidEndDecelerating:方法中實(shí)現(xiàn)
  2.通過(guò)內(nèi)容視圖偏移量的X除以屏幕寬度來(lái)獲得角標(biāo)
  3.通過(guò)角標(biāo)來(lái)選中按鈕和獲取子控制器的View
  4.在獲取子控制器View的方法內(nèi)判斷當(dāng)前視圖是否存在superview,如果存在就return,這段代碼可以實(shí)現(xiàn)最開(kāi)始切換在該視圖時(shí)有個(gè)占位圖片,實(shí)現(xiàn)懶加載

• 按鈕居中處理
  1.通過(guò)被選中按鈕中心點(diǎn)的X值減去屏幕寬度的一半來(lái)計(jì)算偏移量
  2.通過(guò)偏移量來(lái)判斷如果小于0或者大于最大滾動(dòng)寬度時(shí)不移動(dòng),否則會(huì)造成每個(gè)標(biāo)題都居中

• 標(biāo)題縮放
  1.通過(guò)偏移量除以屏幕寬度來(lái)獲得左邊按鈕角標(biāo),左邊按鈕角標(biāo)加一來(lái)獲得右邊按鈕角標(biāo)
  2.在設(shè)置標(biāo)題按鈕方法中,將每個(gè)按鈕加入可變數(shù)組
  3.通過(guò)角標(biāo)來(lái)獲得2個(gè)按鈕,這里需要判斷如果左邊按鈕角標(biāo)為5時(shí),不取右邊按鈕
  4.通過(guò)CGAffineTransformMakeScale方法來(lái)對(duì)2個(gè)按鈕縮放

• 標(biāo)題文字漸變

  • 為什么文字顏色能漸變?通過(guò)RGB來(lái)實(shí)現(xiàn),更改R的值就能實(shí)現(xiàn)黑色和紅色的漸變

具體實(shí)現(xiàn)請(qǐng)看源碼,若有疑問(wèn),會(huì)第一時(shí)間解答

還在學(xué)習(xí)中,若有錯(cuò)誤請(qǐng)大家指出,謝謝!