• Results show

    • Effect display – Basic styles
    • Effect display – combination
    • Effect display – Other styles

  • The installation

  • The sample

  • Supported Configurations

  • Version of the record

  • support

  • The license

Results show

Effect display – Basic styles

Basic styles GIF
00-00. Color Effect – RGB gradient
00-01. Color Effects – Fill gradient
00-02. Color Effect – No gradient
00-03. Switch styles – Font enlargement
00-04. Toggle styles – Underline
00-05. Switching styles – Masks
00-06. Switching styles – Font Enlargement – Delay
00-07. Toggle styles – Underline – Delay
00-08. Switching styles – Masks – Delay
00-09. Additional Effects – A dividing line below the title bar
00-10. Additional effects – Dividing line between heading text
00-11. Alignment — Left aligned
00-12. Alignment — Justify right
00-13. Alignment — Centered
00-14. Alignment — SpaceAround
00-15. How to use font for zoom effect – center alignment
00-16. The way to zoom in the font – align it up
00-17. The way to enlarge the font – align it down

Effect display – Combined styles

According to the above basic style can be freely combined, so as to achieve the effect you want; Due to the excessive combination of styles, some are listed below

Combination style GIF
01-00. Font enlargement – Color RGB gradient
01-01. Font Enlargement – Color fill gradient
01-02. Font Enlargement – Color without gradient
01-03. Font enlargement (delay) – Color RGB gradient
01-04. Font Enlargement (delay) – Color fill gradient
01-05. Font Enlargement (delay) – Color without gradient
01-06. Underline – Color RGB gradient
01-07. Underline – Color fill gradient
01-08. Underline – Color without gradient
01-09. Underline (delay) – Color RGB gradient
01-10. Underline (delay) – Color fill gradient
01-11. Underline (delay) – Color without gradient
01-12. Underline (fixed width) – Color RGB gradient
01-13. Underline (fixed width) – Color fill gradient
01-14. Underline (fixed width) – Color without gradient
01-15. Underline (delay && fixed width) – Color RGB gradient
01-16. Underline (delay && fixed width) – Color fill gradient
01-17. Underline (delay && fixed width) – Color without gradient
01-18. Underline (scale width) – Color RGB gradient
01-19. Underline (proportional width) – Color fill gradient
01-20. Underline (proportional width) – Color without gradient
01-21. Underline (delay && scale width) – Color RGB gradient
01-22. Underline (delay && proportional width) – Color fill gradient
01-23. Underline (delay && scale width) – Color without gradient
01-24. Underline (stretch) – Color RGB gradient
01-25. Underline (stretch) – Color fill gradient
01-26. Underline (stretch) – Color without gradient
01-27. Underline (stretch && fixed width) – Color RGB gradient
01-28. Underline (stretch && fixed width) – Color fill gradient
01-29. Underline (stretch && fixed width) – Color without gradient
01-30. Underline (stretch && scale width) – Color RGB gradient
01-31. Underline (stretch && scale width) – Color fill gradient
01-32. Underline (stretch && scale width) – Color without gradient
01-33. Mask – Color RGB gradient
01-34. Mask – Color fill gradient
01-35. Mask – Color without gradient
01-36. Mask (Delay) – Color RGB gradient
01-37. Mask (Delay) – Color fill gradient
01-38. Mask (Delay) – Color without gradient
01-39. Mask (fixed width) – Color RGB gradient
01-40. Mask (fixed width) – Color fill gradient
01-41. Mask (fixed width) – Color without gradient
01-42. Mask (delay && fixed width) – Color RGB gradient
01-43. Mask (delay && fixed width) – Color fill gradient
01-44. Mask (delay && fixed width) – Color without gradient
01-45. Font enlargement && underline – Color fill gradient
01-46. Font enlargement && Underline && delay – Color without gradient
01-47. Font enlargement && underline (stretch) – Color fill gradient
01-48. Font enlargement && Underline (extended && fixed width) – Color fill gradient
01-49. Font enlargement && underline (stretch && proportional width) – Color fill gradient
01-50. Font enlarge && underline (align when extending && enlarging) – Color fill gradient
01-51. Font enlarge && underline (stretch && enlarge aligned && left aligned) – Color fill gradient

Effect display – Other styles

Other style GIF
02-00. Title bar background color
02-01. Title bar background picture
02-02.rightView

The installation

CocoaPods installation:

  • For iOS8+:
use_frameworks!
target '<Your Target Name>' do
    pod 'CMPageTitleView'
end
Copy the code

Manual installation:

Will CMPageTitleView CMPageTitleView/Class path all drag and drop files to your project.

The sample

First, import the.h header file.

If cocoaposd is installed:

#import <CMPageTitleView/CMPageTitleView.h>
Copy the code

If manually installed:

#import "CMPageTitleView.h"

Copy the code

After creating the CMPageTitleView, create the CMPageTitleConfig object and set the required configuration:

CMPageTitleView *pageView = [[CMPageTitleView alloc] initWithFrame:frame]; pageView.delegate = self; CMPageTitleConfig *config = [CMPageTitleConfig defaultConfig]; config.cm_childControllers = self.childControllers; // Mandatory parameter [self.view addSubview:pageView];Copy the code

Also supports the navigation layout, with the following code:

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; // Mandatory pageview. cm_config = config;Copy the code

Following the code above, you have created a simple menu bar 🎉

Supported Configurations

configuration describe
cm_gradientStyle Color gradient style

CMTitleColorGradientStyle_None(Color without gradient)

CMTitleColorGradientStyle_RGB(RGB color gradient)

CMTitleColorGradientStyle_Fill(Fill color gradient)
cm_switchMode Title Switch style

CMPageTitleSwitchMode_Scale(Font enlargement)

CMPageTitleSwitchMode_Underline(Underline style)

CMPageTitleSwitchMode_Cover(Mask Style)

CMPageTitleSwitchMode_Delay(Sliding switching delay, used with other styles)
cm_additionalMode Title bar append style

CMPageTitleAdditionalMode_Seperateline(Line below the title bar)

CMPageTitleAdditionalMode_Splitter(Dividing line between heading text)
cm_contentMode alignment

CMPageTitleContentMode_Center(Left and right margins consistent with title spacing)

CMPageTitleContentMode_SpaceAround(The left and right margins are equal to half the title spacing)

CMPageTitleContentMode_Left(Left aligned)

CMPageTitleContentMode_Right(Right aligned)
cm_scaleGradientContentMode Alignment in the vertical direction

CMPageTitleScaleGradientContentMode_Center(center)

CMPageTitleScaleGradientContentMode_Top(Top aligned)

CMPageTitleScaleGradientContentMode_Bottom(Bottom aligned)

Note:Only attributescm_switchModecontainsCMPageTitleSwitchMode_ScaleIt only works
cm_childControllers Array of child view controllers
cm_titles Title array
cm_font Normal font for headings

Default font size:[UIFont systemFontOfSize:15]
cm_selectedFont Title selected font

Default selected font size:cm_font1.15 times the
cm_backgroundColor The background color of the view

Default color:[UIColor whiteColor]
cm_normalColor Title normal color

Default color:[UIColor blackColor]
cm_selectedColor Title selected color

Default color:[UIColor redColor]
cm_titleHeight Height of the title

Default height: 44
cm_slideGestureEnable Whether sideslip is supported

Default value:YES
cm_titleMargin The spacing between headings
cm_minTitleMargin Minimum title spacing

The default value is 20
cm_defaultIndex Index selected by default

The default value is 0
cm_seperaterLineColor The color of the dividing line below the title bar

Default color:[UIColor grayColor]
cm_seperateLineHeight The height of the title divider

Default value: 1px
cm_splitterColor The color of the dividing line between headings

The default value is:[UIColor lightGrayColor]
cm_splitterSize The dividing line size between headings

Default width: 1px

Default height: half the title bar height
cm_animationDruction Underline and mask, the interval between animations when clicking on the title

The default value is 0.25

Note:Value range: 0.25 to 0.8(The default value is used if the value exceeds the range)
cm_rightView Alignment in the vertical direction

Default value:CMPageTitleVerticalContentMode_Center

Note:Only attributescm_switchModecontainsCMPageTitleSwitchMode_ScaleThe effective
cm_parentController Superview controller
cm_scale The default zoom level for headings is 1.15

Note:You are not advised to rely on this attribute because it may be discarded latercm_selectedFontCooperate withcm_fontProperties to set)
cm_titleWidths Title width array

Note: readonly
cm_minContentWidth Total header width + left and right margins + minimum spacing for all headers

Note: readonly
cm_titlesWidth The total width of all headings

Note: readonnly)
cm_underlineBorder Whether the underlined view is rounded

Default value:NO
cm_underlineHeight Underline height

Default value: 2
cm_underlineWidth Underline width

By default, the text width is followed, but when this property is set, the underline is fixed to that width
cm_underlineWidthScale The underline follows the text width *cm_underlineWidthScale

Note:Proportion range 0 ~ 1.3 (if the proportion exceeds 1.3, it will be treated as 1.0)
cm_underlineColor Underline color

The default follows the selected color of the title
cm_underlineStretch Whether the underscore is extended

Default value:NO(See github effect display for details)
cm_coverColor Mask color
cm_coverRadius Mask fillet radius

The default is half of the cover height
cm_coverWidth Mask fixed width

Note:No maximum or minimum limit is set. Set the maximum or minimum limit as required
cm_coverVerticalMargin Mask vertical margin

Note:No maximum or minimum limit is set. Set the maximum or minimum limit as required
cm_coverHorizontalMargin Mask horizontal margin

Note:No maximum or minimum limit is set. Set the maximum or minimum limit as required

Note: If you want to have a complicated effect, You can do this by creating a CMPageTitleConfig object Cm_gradientcontentmode cm_scaleGradientContentMode cm_additionalMode cm_switchMode cm_additionalMode cm_contentMode cm_scaleGradientContentMode cm_scaleGradientContentMode You can download the Demo to see the specific effects, but there are far more combinations that can be achieved. More combinations can be integrated into the project and try 😊

version

  • 2018-08-13 Initialize the project
  • 2019-04-26 version 0.3.0 added underline proportional width to follow the title text width
  • The 2019-05-03 version0.3.1
    • Cm_scale can continue to be used, newcm_selectedFontProperty to set the selected font size;
    • Support Masonry
  • The 2019-05-09 version0.4.0
    • Added the ability to set the Size and Color of the title line
    • Added exposed proxy methods to facilitate user processing
    • New assertion exception prompt; Added whether to allow the sideslip function
  • The 2019-05-16 version0.4.1repaircm_seperateLineHeightInvalid problem when 0
  • The 2019-05-17 version0.4.2newcm_animationDructionProperty for the user to set the animation time
  • The 2019-05-23 version0.5.0
    • newcm_verticalContentMode, you can set the vertical alignment of the title text
    • newcm_additionalMode, easy to set the dividing line
    • To optimize thecm_backgroundColorThe effect;
    • Optimize the timing of relevant code calls
  • The 2019-07-13 version0.5.1 CMPageTitleViewIn the new-(void)cm_reloadConfigMethod for users to refresh the configuration
  • The 2019-07-13 version0.5.2
    • CMPageTitleViewIn the new-(void)cm_reloadConfigMethod, easy for users to refresh the configuration;
    • repair0.5.1Layout bug in; Fixed some casesCMPageTitleContentViewThe object size is incorrect
  • The 2019-08-14 version0.6.0
    • Added cm_rightView property
    • useNSLayoutConstraintOptimize the interface layout
    • To optimize theCMPageTitleConfigOf the classgetterMethod, greatly improve the performance of the tripartite library
    • Resolve a conflict with the navigation bar swipe gesture
    • Repair setcm_defaultIndexIs not 0, the interface animation flash problem
    • The new sample
  • The 2019-12-21 version0.6.1
    • Manually manage the life cycle of childController
    • Optimize the rightView presentation style
    • Added jump logic demo in childController

support

  • If you think the tripartite library is good, you can support your ★Star is my biggest motivation
  • If you find bugs or want to have other new features, you can issue me

The license

CMPageTitleView is licensed under MIT