Latest 0.5.0
Homepage https://github.com/CrabMen/CMPageTitleView
License MIT
Platforms ios 8.0, requires ARC
Authors

CMPageTitleView

CMPageTitleView
CMPageTitleView
CMPageTitleView

效果展示

效果展示 – 基本样式

基本样式 GIF
00-00.颜色效果 – RGB渐变 CMPageTitleView
00-01.颜色效果 – 填充渐变 CMPageTitleView
00-02.颜色效果 – 无渐变 CMPageTitleView
00-03.切换样式 – 字体放大 CMPageTitleView
00-04.切换样式 – 下划线 CMPageTitleView
00-05.切换样式 – 遮罩 CMPageTitleView
00-06.切换样式 – 字体放大 – 延迟 CMPageTitleView
00-07.切换样式 – 下划线 – 延迟 CMPageTitleView
00-08.切换样式 – 遮罩 – 延迟 CMPageTitleView
00-09.附加效果 – 标题栏下方分割线 CMPageTitleView
00-10.附加效果 – 标题文字之间分割线 CMPageTitleView
00-11.对齐方式 — 左对齐 CMPageTitleView
00-12.对齐方式 — 右对齐 CMPageTitleView
00-13.对齐方式 — 居中 CMPageTitleView
00-14.对齐方式 — SpaceAround CMPageTitleView
00-15.字体放大效果时对其方式 — 居中对齐 CMPageTitleView
00-16.字体放大效果时对其方式 — 上对齐 CMPageTitleView
00-17.字体放大效果时对其方式 — 下对齐 CMPageTitleView

效果展示 – 组合样式

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

组合样式 GIF
01-00.字体放大 – 颜色RGB渐变 CMPageTitleView
01-01.字体放大 – 颜色填充渐变 CMPageTitleView
01-02.字体放大 – 颜色无渐变 CMPageTitleView
01-03.字体放大(延迟) – 颜色RGB渐变 CMPageTitleView
01-04.字体放大(延迟) – 颜色填充渐变 CMPageTitleView
01-05.字体放大(延迟) – 颜色无渐变 CMPageTitleView
01-06.下划线 – 颜色RGB渐变 CMPageTitleView
01-07.下划线 – 颜色填充渐变 CMPageTitleView
01-08.下划线 – 颜色无渐变 CMPageTitleView
01-09.下划线(延迟) – 颜色RGB渐变 CMPageTitleView
01-10.下划线(延迟) – 颜色填充渐变 CMPageTitleView
01-11.下划线(延迟) – 颜色无渐变 CMPageTitleView
01-12.下划线(固定宽度)- 颜色RGB渐变 CMPageTitleView
01-13.下划线(固定宽度)- 颜色填充渐变 CMPageTitleView
01-14.下划线(固定宽度)- 颜色无渐变 CMPageTitleView
01-15.下划线(延迟 && 固定宽度)- 颜色RGB渐变 CMPageTitleView
01-16.下划线(延迟 && 固定宽度)- 颜色填充渐变 CMPageTitleView
01-17.下划线(延迟 && 固定宽度)- 颜色无渐变 CMPageTitleView
01-18.下划线(比例宽度)- 颜色RGB渐变 CMPageTitleView
01-19.下划线(比例宽度)- 颜色填充渐 CMPageTitleView
01-20.下划线(比例宽度)- 颜色无渐变 CMPageTitleView
01-21.下划线(延迟 && 比例宽度)- 颜色RGB渐变 CMPageTitleView
01-22.下划线(延迟 && 比例宽度)- 颜色填充渐变 CMPageTitleView
01-23.下划线(延迟 && 比例宽度)- 颜色无渐变 CMPageTitleView
01-24.下划线(延展)- 颜色RGB渐变 CMPageTitleView
01-25.下划线(延展)- 颜色填充渐变 CMPageTitleView
01-26.下划线(延展)- 颜色无渐变 CMPageTitleView
01-27.下划线(延展 && 固定宽度)- 颜色RGB渐变 CMPageTitleView
01-28.下划线(延展 && 固定宽度)- 颜色填充渐变 CMPageTitleView
01-29.下划线(延展 && 固定宽度)- 颜色无渐变 CMPageTitleView
01-30.下划线(延展 && 比例宽度)- 颜色RGB渐变 CMPageTitleView
01-31.下划线(延展 && 比例宽度)- 颜色填充渐变 CMPageTitleView
01-32.下划线(延展 && 比例宽度)- 颜色无渐变 CMPageTitleView
01-33.遮罩 – 颜色RGB渐变 CMPageTitleView
01-34.遮罩 – 颜色填充渐变 CMPageTitleView
01-35.遮罩 – 颜色无渐变 CMPageTitleView
01-36.遮罩(延迟) – 颜色RGB渐变 CMPageTitleView
01-37.遮罩(延迟) – 颜色填充渐变 CMPageTitleView
01-38.遮罩(延迟) – 颜色无渐变 CMPageTitleView
01-39.遮罩(固定宽度)- 颜色RGB渐变 CMPageTitleView
01-40.遮罩(固定宽度)- 颜色填充渐变 CMPageTitleView
01-41.遮罩(固定宽度)- 颜色无渐变 CMPageTitleView
01-42.遮罩(延迟 && 固定宽度)- 颜色RGB渐变 CMPageTitleView
01-43.遮罩(延迟 && 固定宽度)- 颜色填充渐变 CMPageTitleView
01-44.遮罩(延迟 && 固定宽度)- 颜色无渐变 CMPageTitleView
01-45.字体放大 && 下划线 – 颜色填充渐变 CMPageTitleView
01-46.字体放大 && 下划线 && 延迟 – 颜色无渐变 CMPageTitleView
01-47.字体放大 && 下划线(延展)- 颜色填充渐变 CMPageTitleView
01-48.字体放大 && 下划线(延展 && 固定宽度 )- 颜色填充渐变 CMPageTitleView
01-49.字体放大 && 下划线(延展 && 比例宽度 )-颜色填充渐变 CMPageTitleView
01-50.字体放大 && 下划线(延展 && 放大时下对齐 )-颜色填充渐变 CMPageTitleView
01-51.字体放大 && 下划线(延展 && 放大时下对齐 && 左对齐)-颜色填充渐变 CMPageTitleView

安装

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 new];
    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 new];
    config.cm_childControllers = self.childControllers;//必传参数

    pageView.cm_config = config;

按照上方代码,你已经创建了一个最简单的菜单栏🎉

注意:倘若需要复杂效果,可以通过创建CMPageTitleConfig对象中的 cm_gradientStyle(颜色渐变样式)、cm_switchMode(标题切换样式)、cm_additionalMode(附加效果)、cm_contentMode(对齐方式)、cm_scaleGradientContentMode(放大效果时的对齐样式)等基本样式的组合实现各种复杂效果,可以下载Demo查看具体效果,但是能实现的组合远远不止这些,更多组合可以集成到项目中尝试😊

版本

  • 2018-08-13 初始化项目
  • 2018-04-26 版本 0.3.0 新增 下划线比例宽度跟随标题文字宽度
  • 2018-05-03 版本 0.3.1 cm_scale可以继续使用,新增cm_selectedFont属性,便于设置选中字体大小;支持Masonry
  • 2018-05-09 版本 0.4.0 新增设置标题分割线Size以及Color功能;新增对外暴露的代理方法,便于用户做对应处理;新增断言异常提示;新增设置是否允许侧滑功能
  • 2018-05-16 版本 0.4.1 修复cm_seperateLineHeight为0时无效的问题
  • 2018-05-17 版本 0.4.2 新增cm_animationDruction属性,便于用户设置动画时间
  • 2018-05-23 版本 0.5.0 新增cm_verticalContentMode,可以设置标题文字垂直方向的对齐方式;新增cm_additionalMode,便于设置分割线;优化cm_backgroundColor效果;优化相关代码调用时机

支持

  • 如果觉得该三方库还不错,可以★Star支持一下你的★Star就是我最大的动力
  • 如果发现bug或想有其他的新功能,可以 issue

许可

CMPageTitleView 基于MIT许可

Latest podspec

{
    "name": "CMPageTitleView",
    "version": "0.5.0",
    "summary": "An easy way to use title bar",
    "homepage": "https://github.com/CrabMen/CMPageTitleView",
    "license": "MIT",
    "authors": {
        "CrabMan": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source": {
        "git": "https://github.com/CrabMen/CMPageTitleView.git",
        "tag": "0.5.0"
    },
    "source_files": "**/**/Class/*.{h,m}",
    "requires_arc": true
}

Pin It on Pinterest

Share This