40
iOS标题栏/菜单栏：一分钟集成类似抖音，新浪微博，腾讯视频，网易新闻，今日头条等常...
source link: https://juejin.im/post/5e0d632bf265da5d661a107d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
效果展示
效果展示 - 基本样式
| 基本样式 | 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
- 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.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
支持
许可
CMPageTitleView 基于MIT许可
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK