另外一個(gè)三方庫(kù)《UITextView輸入時(shí)高度自適應(yīng)(優(yōu)化增強(qiáng)版)》
項(xiàng)目中經(jīng)常會(huì)用到各種各樣的標(biāo)題欄,索性將自己之前的功能模塊抽離開源出來(lái)逻杖,如果覺得該三方庫(kù)還不錯(cuò)奋岁,可以★Star支持一下你的★Star就是我最大的動(dòng)力,如果覺得哪些地方還有優(yōu)化的空間荸百,也希望您能不吝賜教闻伶。
效果展示
效果展示 - 基本樣式
基本樣式 | GIF |
---|---|
00-00.顏色效果 - RGB漸變 | [圖片上傳失敗...(image-fe81ba-1577937287326)] |
00-01.顏色效果 - 填充漸變 | [圖片上傳失敗...(image-f385a0-1577937287326)] |
00-02.顏色效果 - 無(wú)漸變 | [圖片上傳失敗...(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.附加效果 - 標(biāo)題欄下方分割線 | [圖片上傳失敗...(image-8e9e64-1577937287326)] |
00-10.附加效果 - 標(biāo)題文字之間分割線 | [圖片上傳失敗...(image-dc99c0-1577937287326)] |
00-11.對(duì)齊方式 -- 左對(duì)齊 | [圖片上傳失敗...(image-35a908-1577937287326)] |
00-12.對(duì)齊方式 -- 右對(duì)齊 | [圖片上傳失敗...(image-d1db9c-1577937287326)] |
00-13.對(duì)齊方式 -- 居中 | [圖片上傳失敗...(image-80261c-1577937287326)] |
00-14.對(duì)齊方式 -- SpaceAround | [圖片上傳失敗...(image-437a8-1577937287326)] |
00-15.字體放大效果時(shí)對(duì)其方式 -- 居中對(duì)齊 | [圖片上傳失敗...(image-3920e3-1577937287326)] |
00-16.字體放大效果時(shí)對(duì)其方式 -- 上對(duì)齊 | [圖片上傳失敗...(image-cc6389-1577937287326)] |
00-17.字體放大效果時(shí)對(duì)其方式 -- 下對(duì)齊 | [圖片上傳失敗...(image-fe24aa-1577937287326)] |
效果展示 - 組合樣式
根據(jù)上方的基本樣式可以進(jìn)行自由組合,從而達(dá)到你想要的效果够话;因組合樣式過(guò)多蓝翰,下方列出了部分
組合樣式 | GIF |
---|---|
01-00.字體放大 - 顏色RGB漸變 | [圖片上傳失敗...(image-b47473-1577937287326)] |
01-01.字體放大 - 顏色填充漸變 | [圖片上傳失敗...(image-706d46-1577937287326)] |
01-02.字體放大 - 顏色無(wú)漸變 | [圖片上傳失敗...(image-95d7c2-1577937287326)] |
01-03.字體放大(延遲) - 顏色RGB漸變 | [圖片上傳失敗...(image-7cfe36-1577937287326)] |
01-04.字體放大(延遲) - 顏色填充漸變 | [圖片上傳失敗...(image-b9fd4c-1577937287326)] |
01-05.字體放大(延遲) - 顏色無(wú)漸變 | [圖片上傳失敗...(image-36bddd-1577937287326)] |
01-06.下劃線 - 顏色RGB漸變 | [圖片上傳失敗...(image-c95d5e-1577937287326)] |
01-07.下劃線 - 顏色填充漸變 | [圖片上傳失敗...(image-afd430-1577937287326)] |
01-08.下劃線 - 顏色無(wú)漸變 | [圖片上傳失敗...(image-9b394f-1577937287326)] |
01-09.下劃線(延遲) - 顏色RGB漸變 | [圖片上傳失敗...(image-78fb10-1577937287326)] |
01-10.下劃線(延遲) - 顏色填充漸變 | [圖片上傳失敗...(image-bd428c-1577937287326)] |
01-11.下劃線(延遲) - 顏色無(wú)漸變 | [圖片上傳失敗...(image-6c7acd-1577937287326)] |
01-12.下劃線(固定寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-53527b-1577937287326)] |
01-13.下劃線(固定寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-6af4b2-1577937287326)] |
01-14.下劃線(固定寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-ffb8d3-1577937287326)] |
01-15.下劃線(延遲 && 固定寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-763cc3-1577937287326)] |
01-16.下劃線(延遲 && 固定寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-194e47-1577937287326)] |
01-17.下劃線(延遲 && 固定寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-589416-1577937287326)] |
01-18.下劃線(比例寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-14bda8-1577937287326)] |
01-19.下劃線(比例寬度)- 顏色填充漸 | [圖片上傳失敗...(image-24d664-1577937287326)] |
01-20.下劃線(比例寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-2e376c-1577937287326)] |
01-21.下劃線(延遲 && 比例寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-f49b01-1577937287326)] |
01-22.下劃線(延遲 && 比例寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-f55ebe-1577937287326)] |
01-23.下劃線(延遲 && 比例寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-864245-1577937287326)] |
01-24.下劃線(延展)- 顏色RGB漸變 | [圖片上傳失敗...(image-fc8171-1577937287326)] |
01-25.下劃線(延展)- 顏色填充漸變 | [圖片上傳失敗...(image-d7aefd-1577937287326)] |
01-26.下劃線(延展)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-fac78-1577937287326)] |
01-27.下劃線(延展 && 固定寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-210137-1577937287326)] |
01-28.下劃線(延展 && 固定寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-383138-1577937287326)] |
01-29.下劃線(延展 && 固定寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-ce048-1577937287326)] |
01-30.下劃線(延展 && 比例寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-f76cd3-1577937287326)] |
01-31.下劃線(延展 && 比例寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-4243db-1577937287326)] |
01-32.下劃線(延展 && 比例寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-2721f1-1577937287326)] |
01-33.遮罩 - 顏色RGB漸變 | [圖片上傳失敗...(image-d1f083-1577937287326)] |
01-34.遮罩 - 顏色填充漸變 | [圖片上傳失敗...(image-1869e5-1577937287326)] |
01-35.遮罩 - 顏色無(wú)漸變 | [圖片上傳失敗...(image-d7b556-1577937287326)] |
01-36.遮罩(延遲) - 顏色RGB漸變 | [圖片上傳失敗...(image-a39a48-1577937287326)] |
01-37.遮罩(延遲) - 顏色填充漸變 | [圖片上傳失敗...(image-b00093-1577937287326)] |
01-38.遮罩(延遲) - 顏色無(wú)漸變 | [圖片上傳失敗...(image-9c4947-1577937287326)] |
01-39.遮罩(固定寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-e82ced-1577937287326)] |
01-40.遮罩(固定寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-4f9090-1577937287326)] |
01-41.遮罩(固定寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-1985df-1577937287326)] |
01-42.遮罩(延遲 && 固定寬度)- 顏色RGB漸變 | [圖片上傳失敗...(image-9857af-1577937287327)] |
01-43.遮罩(延遲 && 固定寬度)- 顏色填充漸變 | [圖片上傳失敗...(image-fa2174-1577937287327)] |
01-44.遮罩(延遲 && 固定寬度)- 顏色無(wú)漸變 | [圖片上傳失敗...(image-686010-1577937287327)] |
01-45.字體放大 && 下劃線 - 顏色填充漸變 | [圖片上傳失敗...(image-644e7-1577937287327)] |
01-46.字體放大 && 下劃線 && 延遲 - 顏色無(wú)漸變 | [圖片上傳失敗...(image-b458e7-1577937287327)] |
01-47.字體放大 && 下劃線(延展)- 顏色填充漸變 | [圖片上傳失敗...(image-5aa047-1577937287327)] |
01-48.字體放大 && 下劃線(延展 && 固定寬度 )- 顏色填充漸變 | [圖片上傳失敗...(image-6fd25-1577937287327)] |
01-49.字體放大 && 下劃線(延展 && 比例寬度 )-顏色填充漸變 | [圖片上傳失敗...(image-83c4cf-1577937287327)] |
01-50.字體放大 && 下劃線(延展 && 放大時(shí)下對(duì)齊 )-顏色填充漸變 | [圖片上傳失敗...(image-d3fbb4-1577937287327)] |
01-51.字體放大 && 下劃線(延展 && 放大時(shí)下對(duì)齊 && 左對(duì)齊)-顏色填充漸變 | [圖片上傳失敗...(image-4dfef4-1577937287327)] |
效果展示 - 其他樣式
其他樣式 | GIF |
---|---|
02-00.標(biāo)題欄背景色 | [圖片上傳失敗...(image-5fdecb-1577937287327)] |
02-01.標(biāo)題欄背景圖片 | [圖片上傳失敗...(image-8de7e3-1577937287327)] |
02-02.rightView | [圖片上傳失敗...(image-9e1dcc-1577937287327)] |
安裝
CocoaPods安裝:
- For iOS8+:
use_frameworks!
target '<Your Target Name>' do
pod 'CMPageTitleView'
end
手動(dòng)安裝:
將 CMPageTitleView/CMPageTitleView/Class
路徑下的所有文件拖拽到你的項(xiàng)目中.
示例
首先, 先要導(dǎo)入.h頭文件.
如果cocoaposd安裝:
#import <CMPageTitleView/CMPageTitleView.h>
如果手動(dòng)安裝:
#import "CMPageTitleView.h"
創(chuàng)建CMPageTitleView 后,創(chuàng)建CMPageTitleConfig 對(duì)象并設(shè)置所需配置:
CMPageTitleView *pageView = [[CMPageTitleView alloc] initWithFrame:frame];
pageView.delegate = self;
CMPageTitleConfig *config = [CMPageTitleConfig defaultConfig];
config.cm_childControllers = self.childControllers; //必傳參數(shù)
[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;//必傳參數(shù)
pageView.cm_config = config;
按照上方代碼畜份,你已經(jīng)創(chuàng)建了一個(gè)最簡(jiǎn)單的菜單欄??
支持的配置
配置 | 描述 |
---|---|
cm_gradientStyle | 顏色漸變樣式CMTitleColorGradientStyle_None ( 顏色無(wú)漸變)CMTitleColorGradientStyle_RGB (RGB顏色漸變) CMTitleColorGradientStyle_Fill (填充色顏色漸變) |
cm_switchMode | 標(biāo)題切換樣式CMPageTitleSwitchMode_Scale (字體放大)CMPageTitleSwitchMode_Underline (下劃線樣式)CMPageTitleSwitchMode_Cover (遮罩樣式)CMPageTitleSwitchMode_Delay (滑動(dòng)切換時(shí)延遲,配合其他樣式使用) |
cm_additionalMode | 標(biāo)題欄附加樣式CMPageTitleAdditionalMode_Seperateline (標(biāo)題欄下方的分割線)CMPageTitleAdditionalMode_Splitter (標(biāo)題文字之間的分割線) |
cm_contentMode | 對(duì)齊方式CMPageTitleContentMode_Center (左右邊距與標(biāo)題間距一致)CMPageTitleContentMode_SpaceAround (左右邊距等于標(biāo)題間距的一半)CMPageTitleContentMode_Left (左對(duì)齊)CMPageTitleContentMode_Right (右對(duì)齊) |
cm_scaleGradientContentMode | 垂直方向上的對(duì)齊方式CMPageTitleScaleGradientContentMode_Center (居中)CMPageTitleScaleGradientContentMode_Top (上對(duì)齊)CMPageTitleScaleGradientContentMode_Bottom (下對(duì)齊)注意: 只有屬性cm_switchMode 包含CMPageTitleSwitchMode_Scale 下才有效果 |
cm_childControllers | 子視圖控制器數(shù)組 |
cm_titles | 標(biāo)題數(shù)組 |
cm_font | 標(biāo)題正常字體 默認(rèn)字體大行滥帷: [UIFont systemFontOfSize:15]
|
cm_selectedFont | 標(biāo)題選中字體 默認(rèn)選中字體大斜ⅰ: cm_font 的1.15倍 |
cm_backgroundColor | 視圖的背景色 默認(rèn)顏色: [UIColor whiteColor]
|
cm_normalColor | 標(biāo)題正常顏色 默認(rèn)顏色: [UIColor blackColor]
|
cm_selectedColor | 標(biāo)題選中顏色 默認(rèn)顏色: [UIColor redColor]
|
cm_titleHeight | 標(biāo)題高度 默認(rèn)高度:44 |
cm_slideGestureEnable | 是否支持側(cè)滑 默認(rèn)值: YES
|
cm_titleMargin | 標(biāo)題之間的間隔 |
cm_minTitleMargin | 最小的標(biāo)題間距 默認(rèn)值為 20 |
cm_defaultIndex | 默認(rèn)選擇的index 默認(rèn)選擇第0個(gè) |
cm_seperaterLineColor | 標(biāo)題欄下方分割線的顏色 默認(rèn)顏色: [UIColor grayColor]
|
cm_seperateLineHeight | 標(biāo)題分割線的高度 默認(rèn)值:1px |
cm_splitterColor | 標(biāo)題之間的分割線顏色 默認(rèn)為: [UIColor lightGrayColor]
|
cm_splitterSize | 標(biāo)題之間的分割線size 默認(rèn)寬度:1px 默認(rèn)高度:標(biāo)題欄高度的一半 |
cm_animationDruction | 下劃線和遮罩停蕉,在點(diǎn)擊標(biāo)題時(shí),動(dòng)畫的時(shí)間間隔 默認(rèn)值為:0.25 注意: 取值范圍 0.25~0.8(超出范圍會(huì)使用默認(rèn)值) |
cm_rightView | 垂直方向上的對(duì)齊方式 默認(rèn)值: CMPageTitleVerticalContentMode_Center 注意: 只有屬性cm_switchMode 包含CMPageTitleSwitchMode_Scale 下有效果 |
cm_parentController | 父視圖控制器 |
cm_scale | 標(biāo)題的縮放等級(jí) 默認(rèn)為 1.15注意: 不建議依賴該屬性钙态,后期可能會(huì)廢棄慧起,可以使用cm_selectedFont 配合cm_font 屬性進(jìn)行設(shè)置) |
cm_titleWidths | 標(biāo)題寬度數(shù)組注意:readonly
|
cm_minContentWidth | 標(biāo)題的總寬度 + 左右邊距 + 所有的標(biāo)題最小間距注意:readonly
|
cm_titlesWidth | 所有標(biāo)題的總寬度注意: readonnly ) |
cm_underlineBorder | 下劃線視圖是否圓角 默認(rèn)值: NO
|
cm_underlineHeight | 下劃線高度 默認(rèn)值:2 |
cm_underlineWidth | 下劃線寬度 默認(rèn)情況下跟隨文字寬度,但是設(shè)置該屬性后下劃線會(huì)固定使用該寬度 |
cm_underlineWidthScale | 下劃線跟隨文字寬度 * cm_underlineWidthScale 注意: 比例范圍 0 ~ 1.3(超出 1.3 按 1.0 處理) |
cm_underlineColor | 下劃線顏色 默認(rèn)跟隨標(biāo)題的選中顏色 |
cm_underlineStretch | 下劃線是否延長(zhǎng) 默認(rèn)值: NO (具體效果可以看github效果展示) |
cm_coverColor | 遮罩顏色 |
cm_coverRadius | 遮罩圓角半徑 默認(rèn)為 cover高度的一半 |
cm_coverWidth | 遮罩固定寬度 注意: 未做最大最小限制册倒,請(qǐng)根據(jù)實(shí)際情況妥善設(shè)置 |
cm_coverVerticalMargin | 遮罩垂直方向邊距注意: 未做最大最小限制蚓挤,請(qǐng)根據(jù)實(shí)際情況妥善設(shè)置 |
cm_coverHorizontalMargin | 遮罩水平方向邊距注意: 未做最大最小限制,請(qǐng)根據(jù)實(shí)際情況妥善設(shè)置 |
注意: 倘若需要復(fù)雜效果驻子,可以通過(guò)創(chuàng)建CMPageTitleConfig
對(duì)象中的 cm_gradientStyle
(顏色漸變樣式)灿意、cm_switchMode
(標(biāo)題切換樣式)、cm_additionalMode
(附加效果)拴孤、cm_contentMode
(對(duì)齊方式)脾歧、cm_scaleGradientContentMode
(放大效果時(shí)的對(duì)齊樣式)等基本樣式的組合實(shí)現(xiàn)各種復(fù)雜效果甲捏,可以下載Demo查看具體效果演熟,但是能實(shí)現(xiàn)的組合遠(yuǎn)遠(yuǎn)不止這些,更多組合可以集成到項(xiàng)目中嘗試??
版本
- 2018-08-13 初始化項(xiàng)目
- 2019-04-26 版本 0.3.0 新增 下劃線比例寬度跟隨標(biāo)題文字寬度
- 2019-05-03 版本 0.3.1
- cm_scale可以繼續(xù)使用司顿,新增
cm_selectedFont
屬性芒粹,便于設(shè)置選中字體大小大溜; - 支持Masonry
- cm_scale可以繼續(xù)使用司顿,新增
- 2019-05-09 版本 0.4.0
- 新增設(shè)置標(biāo)題分割線Size以及Color功能
- 新增對(duì)外暴露的代理方法化漆,便于用戶做對(duì)應(yīng)處理
- 新增斷言異常提示;新增設(shè)置是否允許側(cè)滑功能
- 2019-05-16 版本 0.4.1 修復(fù)
cm_seperateLineHeight
為0時(shí)無(wú)效的問(wèn)題 - 2019-05-17 版本 0.4.2 新增
cm_animationDruction
屬性钦奋,便于用戶設(shè)置動(dòng)畫時(shí)間 - 2019-05-23 版本 0.5.0
- 新增
cm_verticalContentMode
座云,可以設(shè)置標(biāo)題文字垂直方向的對(duì)齊方式 - 新增
cm_additionalMode
,便于設(shè)置分割線 - 優(yōu)化
cm_backgroundColor
效果付材; - 優(yōu)化相關(guān)代碼調(diào)用時(shí)機(jī)
- 新增
2019-07-13 版本 0.5.1CMPageTitleView
中新增-(void)cm_reloadConfig
方法朦拖,便于用戶刷新配置- 2019-07-13 版本 0.5.2
-
CMPageTitleView
中新增-(void)cm_reloadConfig
方法,便于用戶刷新配置厌衔; - 修復(fù)0.5.1中的布局bug璧帝;修復(fù)部分情況下
CMPageTitleContentView
對(duì)象尺寸不準(zhǔn)確問(wèn)題
-
- 2019-08-14 版本 0.6.0
- 新增cm_rightView屬性
- 使用
NSLayoutConstraint
優(yōu)化界面布局 - 優(yōu)化
CMPageTitleConfig
類的getter
方法,大幅提高三方庫(kù)性能 - 解決與導(dǎo)航欄側(cè)滑手勢(shì)沖突的問(wèn)題
- 修復(fù)設(shè)置
cm_defaultIndex
為非0時(shí)富寿,界面動(dòng)畫閃動(dòng)問(wèn)題 - 新增示例
- 2019-12-21 版本 0.6.1
- 手動(dòng)管理childController的生命周期
- 優(yōu)化rightView展示樣式
- 新增childController中跳轉(zhuǎn)邏輯demo
支持
許可
CMPageTitleView 基于MIT許可