iOS標題欄/菜單欄：一分鐘集成相似抖音，新浪微博，騰訊視頻，網易新聞，今日頭條等常見的標題欄樣式

• 效果展現

  • 效果展現 - 基本樣式
  • 效果展現 - 組合
  • 效果展現 - 其餘樣式

• 安裝

• 示例

• 支持的配置

• 版本記錄

• 支持

• 許可

效果展現

效果展現 - 基本樣式

基本樣式	GIF
00-00.顏色效果 - RGB漸變
00-01.顏色效果 - 填充漸變
00-02.顏色效果 - 無漸變
00-03.切換樣式 - 字體放大
00-04.切換樣式 - 下劃線
00-05.切換樣式 - 遮罩
00-06.切換樣式 - 字體放大 - 延遲
00-07.切換樣式 - 下劃線 - 延遲
00-08.切換樣式 - 遮罩 - 延遲
00-09.附加效果 - 標題欄下方分割線
00-10.附加效果 - 標題文字之間分割線
00-11.對齊方式 -- 左對齊
00-12.對齊方式 -- 右對齊
00-13.對齊方式 -- 居中
00-14.對齊方式 -- SpaceAround
00-15.字體放大效果時對其方式 -- 居中對齊
00-16.字體放大效果時對其方式 -- 上對齊
00-17.字體放大效果時對其方式 -- 下對齊

效果展現 - 組合樣式

根據上方的基本樣式能夠進行自由組合，從而達到你想要的效果；因組合樣式過多，下方列出了部分

組合樣式	GIF
01-00.字體放大 - 顏色RGB漸變
01-01.字體放大 - 顏色填充漸變
01-02.字體放大 - 顏色無漸變
01-03.字體放大(延遲) - 顏色RGB漸變
01-04.字體放大(延遲) - 顏色填充漸變
01-05.字體放大(延遲) - 顏色無漸變
01-06.下劃線 - 顏色RGB漸變
01-07.下劃線 - 顏色填充漸變
01-08.下劃線 - 顏色無漸變
01-09.下劃線(延遲) - 顏色RGB漸變
01-10.下劃線(延遲) - 顏色填充漸變
01-11.下劃線(延遲) - 顏色無漸變
01-12.下劃線（固定寬度）- 顏色RGB漸變
01-13.下劃線（固定寬度）- 顏色填充漸變
01-14.下劃線（固定寬度）- 顏色無漸變
01-15.下劃線（延遲 && 固定寬度）- 顏色RGB漸變
01-16.下劃線（延遲 && 固定寬度）- 顏色填充漸變
01-17.下劃線（延遲 && 固定寬度）- 顏色無漸變
01-18.下劃線（比例寬度）- 顏色RGB漸變
01-19.下劃線（比例寬度）- 顏色填充漸
01-20.下劃線（比例寬度）- 顏色無漸變
01-21.下劃線（延遲 && 比例寬度）- 顏色RGB漸變
01-22.下劃線（延遲 && 比例寬度）- 顏色填充漸變
01-23.下劃線（延遲 && 比例寬度）- 顏色無漸變
01-24.下劃線（延展）- 顏色RGB漸變
01-25.下劃線（延展）- 顏色填充漸變
01-26.下劃線（延展）- 顏色無漸變
01-27.下劃線（延展 && 固定寬度）- 顏色RGB漸變
01-28.下劃線（延展 && 固定寬度）- 顏色填充漸變
01-29.下劃線（延展 && 固定寬度）- 顏色無漸變
01-30.下劃線（延展 && 比例寬度）- 顏色RGB漸變
01-31.下劃線（延展 && 比例寬度）- 顏色填充漸變
01-32.下劃線（延展 && 比例寬度）- 顏色無漸變
01-33.遮罩 - 顏色RGB漸變
01-34.遮罩 - 顏色填充漸變
01-35.遮罩 - 顏色無漸變
01-36.遮罩(延遲) - 顏色RGB漸變
01-37.遮罩(延遲) - 顏色填充漸變
01-38.遮罩(延遲) - 顏色無漸變
01-39.遮罩（固定寬度）- 顏色RGB漸變
01-40.遮罩（固定寬度）- 顏色填充漸變
01-41.遮罩（固定寬度）- 顏色無漸變
01-42.遮罩（延遲 && 固定寬度）- 顏色RGB漸變
01-43.遮罩（延遲 && 固定寬度）- 顏色填充漸變
01-44.遮罩（延遲 && 固定寬度）- 顏色無漸變
01-45.字體放大 && 下劃線 - 顏色填充漸變
01-46.字體放大 && 下劃線 && 延遲 - 顏色無漸變
01-47.字體放大 && 下劃線（延展）- 顏色填充漸變
01-48.字體放大 && 下劃線（延展 && 固定寬度 ）- 顏色填充漸變
01-49.字體放大 && 下劃線（延展 && 比例寬度 ）-顏色填充漸變
01-50.字體放大 && 下劃線（延展 && 放大時下對齊 ）-顏色填充漸變
01-51.字體放大 && 下劃線（延展 && 放大時下對齊 && 左對齊）-顏色填充漸變

效果展現 - 其餘樣式

其餘樣式	GIF
02-00.標題欄背景色
02-01.標題欄背景圖片
02-02.rightView

安裝

CocoaPods安裝:

• For iOS8+:

use_frameworks!
target '<Your Target Name>' do
    pod 'CMPageTitleView'
end
複製代碼

手動安裝:

將 CMPageTitleView/CMPageTitleView/Class 路徑下的全部文件拖拽到你的項目中.

示例

首先, 先要導入.h頭文件.

若是cocoaposd安裝:

#import <CMPageTitleView/CMPageTitleView.h>
複製代碼

若是手動安裝:

#import "CMPageTitleView.h"

複製代碼

建立CMPageTitleView 後，建立CMPageTitleConfig 對象並設置所需配置：

CMPageTitleView *pageView = [[CMPageTitleView alloc] initWithFrame:frame];
    pageView.delegate = self;
    
    CMPageTitleConfig *config = [CMPageTitleConfig defaultConfig];
    config.cm_childControllers = self.childControllers; //必傳參數
    
    [self.view addSubview:pageView];
複製代碼

一樣支持Masonry佈局，代碼以下：

CMPageTitleView *pageView = [[CMPageTitleView alloc] init];
    [self.view addSubview:pageView];
    
    [pageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.mas_equalTo(0);
        make.top.mas_equalTo(CM_NAVI_BAR_H);
        make.height.mas_equalTo(CM_SCREEN_H - CM_NAVI_BAR_H);
        
    }];
    pageView.delegate = self;
    
    CMPageTitleConfig *config = [CMPageTitleConfig defaultConfig];
    config.cm_childControllers = self.childControllers;//必傳參數
    
    pageView.cm_config = config;

複製代碼

按照上方代碼，你已經建立了一個最簡單的菜單欄🎉

支持的配置

配置	描述
cm_gradientStyle	顏色漸變樣式 CMTitleColorGradientStyle_None（ 顏色無漸變） CMTitleColorGradientStyle_RGB（RGB顏色漸變） CMTitleColorGradientStyle_Fill（填充色顏色漸變）
cm_switchMode	標題切換樣式 CMPageTitleSwitchMode_Scale(字體放大) CMPageTitleSwitchMode_Underline（下劃線樣式） CMPageTitleSwitchMode_Cover （遮罩樣式） CMPageTitleSwitchMode_Delay（滑動切換時延遲，配合其餘樣式使用）
cm_additionalMode	標題欄附加樣式 CMPageTitleAdditionalMode_Seperateline（標題欄下方的分割線） CMPageTitleAdditionalMode_Splitter（標題文字之間的分割線）
cm_contentMode	對齊方式 CMPageTitleContentMode_Center（左右邊距與標題間距一致） CMPageTitleContentMode_SpaceAround(左右邊距等於標題間距的一半) CMPageTitleContentMode_Left（左對齊） CMPageTitleContentMode_Right（右對齊）
cm_scaleGradientContentMode	垂直方向上的對齊方式 CMPageTitleScaleGradientContentMode_Center（居中） CMPageTitleScaleGradientContentMode_Top（上對齊） CMPageTitleScaleGradientContentMode_Bottom（下對齊） 注意：只有屬性cm_switchMode包含CMPageTitleSwitchMode_Scale下才有效果
cm_childControllers	子視圖控制器數組
cm_titles	標題數組
cm_font	標題正常字體 默認字體大小：[UIFont systemFontOfSize:15]
cm_selectedFont	標題選中字體 默認選中字體大小：cm_font的1.15倍
cm_backgroundColor	視圖的背景色 默認顏色：[UIColor whiteColor]
cm_normalColor	標題正常顏色 默認顏色：[UIColor blackColor]
cm_selectedColor	標題選中顏色 默認顏色：[UIColor redColor]
cm_titleHeight	標題高度 默認高度：44
cm_slideGestureEnable	是否支持側滑 默認值：YES
cm_titleMargin	標題之間的間隔
cm_minTitleMargin	最小的標題間距 默認值爲 20
cm_defaultIndex	默認選擇的index 默認選擇第0個
cm_seperaterLineColor	標題欄下方分割線的顏色 默認顏色：[UIColor grayColor]
cm_seperateLineHeight	標題分割線的高度 默認值：1px
cm_splitterColor	標題之間的分割線顏色 默認爲：[UIColor lightGrayColor]
cm_splitterSize	標題之間的分割線size 默認寬度：1px 默認高度：標題欄高度的一半
cm_animationDruction	下劃線和遮罩，在點擊標題時，動畫的時間間隔 默認值爲：0.25 注意：取值範圍 0.25~0.8(超出範圍會使用默認值)
cm_rightView	垂直方向上的對齊方式 默認值：CMPageTitleVerticalContentMode_Center 注意：只有屬性cm_switchMode包含CMPageTitleSwitchMode_Scale下有效果
cm_parentController	父視圖控制器
cm_scale	標題的縮放等級 默認爲 1.15 注意：不建議依賴該屬性，後期可能會廢棄，可使用cm_selectedFont配合cm_font屬性進行設置）
cm_titleWidths	標題寬度數組 注意：readonly
cm_minContentWidth	標題的總寬度 + 左右邊距 + 全部的標題最小間距 注意：readonly
cm_titlesWidth	全部標題的總寬度 注意： readonnly）
cm_underlineBorder	下劃線視圖是否圓角 默認值:NO
cm_underlineHeight	下劃線高度 默認值：2
cm_underlineWidth	下劃線寬度 默認狀況下跟隨文字寬度，可是設置該屬性後下劃線會固定使用該寬度
cm_underlineWidthScale	下劃線跟隨文字寬度 * cm_underlineWidthScale 注意：比例範圍 0 ~ 1.3（超出 1.3 按 1.0 處理）
cm_underlineColor	下劃線顏色 默認跟隨標題的選中顏色
cm_underlineStretch	下劃線是否延長 默認值：NO （具體效果能夠看github效果展現）
cm_coverColor	遮罩顏色
cm_coverRadius	遮罩圓角半徑 默認爲 cover高度的一半
cm_coverWidth	遮罩固定寬度 注意：未作最大最小限制，請根據實際狀況妥善設置
cm_coverVerticalMargin	遮罩垂直方向邊距 注意：未作最大最小限制，請根據實際狀況妥善設置
cm_coverHorizontalMargin	遮罩水平方向邊距 注意：未作最大最小限制，請根據實際狀況妥善設置

注意： 假若須要複雜效果，能夠經過建立CMPageTitleConfig對象中的 cm_gradientStyle（顏色漸變樣式）、cm_switchMode（標題切換樣式）、cm_additionalMode（附加效果）、cm_contentMode（對齊方式）、cm_scaleGradientContentMode（放大效果時的對齊樣式）等基本樣式的組合實現各類複雜效果，能夠下載Demo查看具體效果，可是能實現的組合遠遠不止這些，更多組合能夠集成到項目中嘗試😊

版本

• 2018-08-13 初始化項目
• 2019-04-26 版本 0.3.0 新增 下劃線比例寬度跟隨標題文字寬度
• 2019-05-03 版本 0.3.1
  • cm_scale能夠繼續使用，新增cm_selectedFont屬性，便於設置選中字體大小；
  • 支持Masonry
• 2019-05-09 版本 0.4.0
  • 新增設置標題分割線Size以及Color功能
  • 新增對外暴露的代理方法，便於用戶作對應處理
  • 新增斷言異常提示；新增設置是否容許側滑功能
• 2019-05-16 版本 0.4.1 修復cm_seperateLineHeight爲0時無效的問題
• 2019-05-17 版本 0.4.2 新增cm_animationDruction屬性，便於用戶設置動畫時間
• 2019-05-23 版本 0.5.0
  • 新增cm_verticalContentMode，能夠設置標題文字垂直方向的對齊方式
  • 新增cm_additionalMode，便於設置分割線
  • 優化cm_backgroundColor效果；
  • 優化相關代碼調用時機
• 2019-07-13 版本 0.5.1 CMPageTitleView中新增-(void)cm_reloadConfig方法，便於用戶刷新配置
• 2019-07-13 版本 0.5.2
  • CMPageTitleView中新增-(void)cm_reloadConfig方法，便於用戶刷新配置；
  • 修復0.5.1中的佈局bug；修復部分狀況下CMPageTitleContentView對象尺寸不許確問題
• 2019-08-14 版本 0.6.0
  • 新增cm_rightView屬性
  • 使用NSLayoutConstraint優化界面佈局
  • 優化CMPageTitleConfig類的getter方法，大幅提升三方庫性能
  • 解決與導航欄側滑手勢衝突的問題
  • 修復設置cm_defaultIndex爲非0時，界面動畫閃動問題
  • 新增示例
• 2019-12-21 版本 0.6.1
  • 手動管理childController的生命週期
  • 優化rightView展現樣式
  • 新增childController中跳轉邏輯demo

支持

• 若是以爲該三方庫還不錯，能夠★Star支持一下你的★Star就是我最大的動力
• 若是發現bug或想有其餘的新功能，能夠 issue 我

許可

CMPageTitleView 基於MIT許可