iOS 标题栏/菜单栏:一分钟集成类似抖音,新浪微博,腾讯视频,网易新闻,今日头条等常见的标题栏样式

另外一个三方库《UITextView输入时高度自适应(优化增强版)》

项目中经常会用到各种各样的标题栏,索性将自己之前的功能模块抽离开源出来,如果觉得该三方库还不错,可以★Star支持一下你的★Star就是我最大的动力,如果觉得哪些地方还有优化的空间,也希望您能不吝赐教。

效果展示

效果展示 - 基本样式

基本样式 GIF
00-00.颜色效果 - RGB渐变 [图片上传失败...(image-fe81ba-1577937287326)]
00-01.颜色效果 - 填充渐变 [图片上传失败...(image-f385a0-1577937287326)]
00-02.颜色效果 - 无渐变 [图片上传失败...(image-9ce9c1-1577937287326)]
00-03.切换样式 - 字体放大 [图片上传失败...(image-412358-1577937287326)]
00-04.切换样式 - 下划线 [图片上传失败...(image-3dbf2d-1577937287326)]
00-05.切换样式 - 遮罩 [图片上传失败...(image-d498cd-1577937287326)]
00-06.切换样式 - 字体放大 - 延迟 [图片上传失败...(image-85279c-1577937287326)]
00-07.切换样式 - 下划线 - 延迟 [图片上传失败...(image-c95559-1577937287326)]
00-08.切换样式 - 遮罩 - 延迟 [图片上传失败...(image-249a58-1577937287326)]
00-09.附加效果 - 标题栏下方分割线 [图片上传失败...(image-8e9e64-1577937287326)]
00-10.附加效果 - 标题文字之间分割线 [图片上传失败...(image-dc99c0-1577937287326)]
00-11.对齐方式 -- 左对齐 [图片上传失败...(image-35a908-1577937287326)]
00-12.对齐方式 -- 右对齐 [图片上传失败...(image-d1db9c-1577937287326)]
00-13.对齐方式 -- 居中 [图片上传失败...(image-80261c-1577937287326)]
00-14.对齐方式 -- SpaceAround [图片上传失败...(image-437a8-1577937287326)]
00-15.字体放大效果时对其方式 -- 居中对齐 [图片上传失败...(image-3920e3-1577937287326)]
00-16.字体放大效果时对其方式 -- 上对齐 [图片上传失败...(image-cc6389-1577937287326)]
00-17.字体放大效果时对其方式 -- 下对齐 [图片上传失败...(image-fe24aa-1577937287326)]

效果展示 - 组合样式

根据上方的基本样式可以进行自由组合,从而达到你想要的效果;因组合样式过多,下方列出了部分

组合样式 GIF
01-00.字体放大 - 颜色RGB渐变 [图片上传失败...(image-b47473-1577937287326)]
01-01.字体放大 - 颜色填充渐变 [图片上传失败...(image-706d46-1577937287326)]
01-02.字体放大 - 颜色无渐变 [图片上传失败...(image-95d7c2-1577937287326)]
01-03.字体放大(延迟) - 颜色RGB渐变 [图片上传失败...(image-7cfe36-1577937287326)]
01-04.字体放大(延迟) - 颜色填充渐变 [图片上传失败...(image-b9fd4c-1577937287326)]
01-05.字体放大(延迟) - 颜色无渐变 [图片上传失败...(image-36bddd-1577937287326)]
01-06.下划线 - 颜色RGB渐变 [图片上传失败...(image-c95d5e-1577937287326)]
01-07.下划线 - 颜色填充渐变 [图片上传失败...(image-afd430-1577937287326)]
01-08.下划线 - 颜色无渐变 [图片上传失败...(image-9b394f-1577937287326)]
01-09.下划线(延迟) - 颜色RGB渐变 [图片上传失败...(image-78fb10-1577937287326)]
01-10.下划线(延迟) - 颜色填充渐变 [图片上传失败...(image-bd428c-1577937287326)]
01-11.下划线(延迟) - 颜色无渐变 [图片上传失败...(image-6c7acd-1577937287326)]
01-12.下划线(固定宽度)- 颜色RGB渐变 [图片上传失败...(image-53527b-1577937287326)]
01-13.下划线(固定宽度)- 颜色填充渐变 [图片上传失败...(image-6af4b2-1577937287326)]
01-14.下划线(固定宽度)- 颜色无渐变 [图片上传失败...(image-ffb8d3-1577937287326)]
01-15.下划线(延迟 && 固定宽度)- 颜色RGB渐变 [图片上传失败...(image-763cc3-1577937287326)]
01-16.下划线(延迟 && 固定宽度)- 颜色填充渐变 [图片上传失败...(image-194e47-1577937287326)]
01-17.下划线(延迟 && 固定宽度)- 颜色无渐变 [图片上传失败...(image-589416-1577937287326)]
01-18.下划线(比例宽度)- 颜色RGB渐变 [图片上传失败...(image-14bda8-1577937287326)]
01-19.下划线(比例宽度)- 颜色填充渐 [图片上传失败...(image-24d664-1577937287326)]
01-20.下划线(比例宽度)- 颜色无渐变 [图片上传失败...(image-2e376c-1577937287326)]
01-21.下划线(延迟 && 比例宽度)- 颜色RGB渐变 [图片上传失败...(image-f49b01-1577937287326)]
01-22.下划线(延迟 && 比例宽度)- 颜色填充渐变 [图片上传失败...(image-f55ebe-1577937287326)]
01-23.下划线(延迟 && 比例宽度)- 颜色无渐变 [图片上传失败...(image-864245-1577937287326)]
01-24.下划线(延展)- 颜色RGB渐变 [图片上传失败...(image-fc8171-1577937287326)]
01-25.下划线(延展)- 颜色填充渐变 [图片上传失败...(image-d7aefd-1577937287326)]
01-26.下划线(延展)- 颜色无渐变 [图片上传失败...(image-fac78-1577937287326)]
01-27.下划线(延展 && 固定宽度)- 颜色RGB渐变 [图片上传失败...(image-210137-1577937287326)]
01-28.下划线(延展 && 固定宽度)- 颜色填充渐变 [图片上传失败...(image-383138-1577937287326)]
01-29.下划线(延展 && 固定宽度)- 颜色无渐变 [图片上传失败...(image-ce048-1577937287326)]
01-30.下划线(延展 && 比例宽度)- 颜色RGB渐变 [图片上传失败...(image-f76cd3-1577937287326)]
01-31.下划线(延展 && 比例宽度)- 颜色填充渐变 [图片上传失败...(image-4243db-1577937287326)]
01-32.下划线(延展 && 比例宽度)- 颜色无渐变 [图片上传失败...(image-2721f1-1577937287326)]
01-33.遮罩 - 颜色RGB渐变 [图片上传失败...(image-d1f083-1577937287326)]
01-34.遮罩 - 颜色填充渐变 [图片上传失败...(image-1869e5-1577937287326)]
01-35.遮罩 - 颜色无渐变 [图片上传失败...(image-d7b556-1577937287326)]
01-36.遮罩(延迟) - 颜色RGB渐变 [图片上传失败...(image-a39a48-1577937287326)]
01-37.遮罩(延迟) - 颜色填充渐变 [图片上传失败...(image-b00093-1577937287326)]
01-38.遮罩(延迟) - 颜色无渐变 [图片上传失败...(image-9c4947-1577937287326)]
01-39.遮罩(固定宽度)- 颜色RGB渐变 [图片上传失败...(image-e82ced-1577937287326)]
01-40.遮罩(固定宽度)- 颜色填充渐变 [图片上传失败...(image-4f9090-1577937287326)]
01-41.遮罩(固定宽度)- 颜色无渐变 [图片上传失败...(image-1985df-1577937287326)]
01-42.遮罩(延迟 && 固定宽度)- 颜色RGB渐变 [图片上传失败...(image-9857af-1577937287327)]
01-43.遮罩(延迟 && 固定宽度)- 颜色填充渐变 [图片上传失败...(image-fa2174-1577937287327)]
01-44.遮罩(延迟 && 固定宽度)- 颜色无渐变 [图片上传失败...(image-686010-1577937287327)]
01-45.字体放大 && 下划线 - 颜色填充渐变 [图片上传失败...(image-644e7-1577937287327)]
01-46.字体放大 && 下划线 && 延迟 - 颜色无渐变 [图片上传失败...(image-b458e7-1577937287327)]
01-47.字体放大 && 下划线(延展)- 颜色填充渐变 [图片上传失败...(image-5aa047-1577937287327)]
01-48.字体放大 && 下划线(延展 && 固定宽度 )- 颜色填充渐变 [图片上传失败...(image-6fd25-1577937287327)]
01-49.字体放大 && 下划线(延展 && 比例宽度 )-颜色填充渐变 [图片上传失败...(image-83c4cf-1577937287327)]
01-50.字体放大 && 下划线(延展 && 放大时下对齐 )-颜色填充渐变 [图片上传失败...(image-d3fbb4-1577937287327)]
01-51.字体放大 && 下划线(延展 && 放大时下对齐 && 左对齐)-颜色填充渐变 [图片上传失败...(image-4dfef4-1577937287327)]

效果展示 - 其他样式

其他样式 GIF
02-00.标题栏背景色 [图片上传失败...(image-5fdecb-1577937287327)]
02-01.标题栏背景图片 [图片上传失败...(image-8de7e3-1577937287327)]
02-02.rightView [图片上传失败...(image-9e1dcc-1577937287327)]

安装

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容