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许可