另外一个三方库《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
- cm_scale可以继续使用,新增
- 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.1CMPageTitleView
中新增-(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
支持
许可
CMPageTitleView 基于MIT许可