【 Dry goods 】 SegmentView that every APP can use

Tencent Toutiao news, QQ Music, netease Cloud Music, JINGdong, IQiyi, Taobao, Tmall, Jianshu, Weibo and other mainstream apps category switching rolling view

Advantages compared with other similar tripartite libraries:

• Use POP(Protocol Oriented Programming) to encapsulate the indicator logic, and you can customize the effect of the indicator.
• Provide more comprehensive and rich effects, more smooth interaction;
• Subclassing the management cell style for clearer logic and easier extension;

Making the address

Download the source code and have a look! JXCategoryView

Results the preview

Indicator effect preview

instructions	Gif
Indicator LineView
Indicator LineView JINGdong style
Indicator LineView iqiyi style
Indicator EllipseLayer
Indicator EllipseLayer mask
Pointer EllipseLayer mask (Shadow)
Indicator ImageView(boat)
Indicator scrolling effect (soccer)
QQ sticky red dot
Bottom of triangle
Top of triangle
Text mask (no background view)
Background chart
Rectangular indicator
A mixture of
Custom Indicator example – dotted line

Cell Style effect preview

instructions	Gif
Color gradient
The size of the scale
The divider
TitleImage_Top
TitleImage_Left
TitleImage_Bottom
TitleImage_Right
TitleImage_OnlyImage
A mixture of graphic
Custom – A number
Custom cell- Red dot
Custom cell- Background color gradient
Tencent Video Effects
Custom Cell Example – Multi-line + rich text

Special Effects Preview

instructions	Gif
SegmentedControl
Navigation bar use
Personal homepage (scroll up, down, left and right, header suspension)
Use nested
Vertical list scrolling High imitation Tencent video (Abnormal background color is a screen recording software bug
Data source refresh & list data load example

requirements

• IOS 8.0 +
• Xcode 9+
• Objective-C

The installation

manual

Clone code, drag the Sources folder into the project, #import “jxcategoryView.h”, and use it.

CocoaPods

target '<Your Target Name>' do
    pod 'JXCategoryView'
end
Copy the code

chart

• Designator style customization: Encapsulate designator logic using Protocol Oriented Programming (POP), as long as you followJXCategoryIndicatorProtocolProtocol, you can implement your indicator effect. Reference: JXCategoryIndicatorLineView;
• Cell style customization: Use subclassing, base class to build the foundation, and subclass to achieve special effects. Easy code management, function expansion; Reference: JXCategoryNumberView;

Special instructions

• Customization: Even with flexible extensions, my source code is unlikely to satisfy all cases, so I recommend that you maintain your own set of effects through the fork repository. You can also drag it directly into the source file to modify it.
• Personal homepage effect: scroll up, down, left and right and HeaderView floating implementation, using the library I wrote JXPagingView.
• Vertical list scrolling: refer to demo projectVerticalListViewController, did not do function encapsulation, refer to the code inside to do, pay more attention to annotations, you can achieve.

The POP show

By the behavior of the indicator of abstracting, and then through the JXCategoryIndicatorProtocol agreement constraints. In this way, the indicator effect can be extended indefinitely, adding indicators as you like, no longer constrained by the inheritance of the previous version. For more POP content, I recommend meow God’s article on protocol-oriented programming’s encounter with Cocoa

Common Attributes

JXCategoryView Common attribute description

attribute	instructions
defaultSelectedIndex	Index selected by default. Used to specify an index to be selected during initialization
selectedIndex	Read-only property, currently selected index
cellWidth	The width of the cell, the default: JXCategoryViewAutomaticDimension
cellSpacing	Space between cells. The default value is 20
cellWidthIncrement	Compensation value for cell width. Default value: 0
averageCellWidthEnabled	Whether to divide cellWidth evenly when the total width of cell content is smaller than the width of JXCategoryBaseView. The default value is YES.
contentScrollView	Need associated contentScrollView, internal listenercontentOffset

Common attributes of the Cell style

attribute	instructions
titleColor	TitleLabel unselected color Default: [UIColor blackColor]
titleSelectedColor	TitleLabel Select color Default: [UIColor redColor]
titleFont	TitleLabel font default: [UIFont systemFontOfSize:15]
titleColorGradientEnabled	Does the color of the title transition gradually? The default value is NO
titleLabelMaskEnabled	TitleLabel Mask filter Or not Default: NO
titleLabelZoomEnabled	TitleLabel Whether to scale Default: NO
titleLabelZoomScale	CitleLabel Scale Default: 1.2
imageZoomEnabled	ImageView zoom Or not Default: NO
imageZoomScale	ImageView Zoom default: 1.2
separatorLineShowEnabled	Default: NO (color, width and height can be set)
JXCategoryTitleImageType	Image Location: top, left, bottom, right Default: left

Indicator Common attribute description

attribute	instructions
JXCategoryIndicatorComponentView.componentPosition	The default position of the indicator is Bottom
JXCategoryIndicatorComponentView.scrollEnabled	The default value is YES
JXCategoryIndicatorLineView.lineStyle	Normal, JINGdong, iQiyi effect default: Normal
JXCategoryIndicatorLineView.lineScrollOffsetX	Iqiyi effect special, the offset of X when line scrolls, default is 10;
JXCategoryIndicatorLineView.indicatorLineWidth	The default JXCategoryViewAutomaticDimension (cellWidth equal)
JXCategoryIndicatorLineView.indicatorLineViewHeight	Default: 3
JXCategoryIndicatorLineView.indicatorLineViewCornerRadius	The default JXCategoryViewAutomaticDimension (equal to the self. IndicatorLineViewHeight / 2)
JXCategoryIndicatorLineView.indicatorLineViewColor	Default is [UIColor redColor]
JXCategoryIndicatorTriangleView.triangleViewSize	Default: CGSizeMake(14, 10)
JXCategoryIndicatorTriangleView.triangleViewColor	Default is [UIColor redColor]
JXCategoryIndicatorImageView.indicatorImageView	Set up the image
JXCategoryIndicatorImageView.indicatorImageViewRollEnabled	Whether to allow scrolling. Default: NO
JXCategoryIndicatorImageView.indicatorImageViewSize	Default: CGSizeMake(30, 20)
JXCategoryIndicatorBackgroundView.backgroundViewWidth	The default JXCategoryViewAutomaticDimension (cellWidth equal)
JXCategoryIndicatorBackgroundView.backgroundViewWidthIncrement	Width increment compensation, because backgroundEllipseLayer tends to be larger than the actual content. The default 10
JXCategoryIndicatorBackgroundView.backgroundViewHeight	The default JXCategoryViewAutomaticDimension (equals the cell height)
JXCategoryIndicatorBackgroundView.backgroundViewCornerRadius	The default JXCategoryViewAutomaticDimension (namely backgroundViewHeight / 2)
JXCategoryIndicatorBackgroundView.backgroundViewColor	Default is [UIColor redColor]
JXCategoryIndicatorBallView.ballViewSize	Default: CGSizeMake(15, 15)
JXCategoryIndicatorBallView.ballScrollOffsetX	The offset of the little red dot defaults to 20
JXCategoryIndicatorBallView.ballViewColor	Default is [UIColor redColor]

Can be used with multiple IndicatorView, but the effect needs to be controlled by themselves, the effect is not the more the better. Reference mixed use;

use

JXCategoryTitleView self.categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 0, WindowsSize.width, categoryViewHeight)]; self.categoryView.delegate = self; / / 2, add and configure the indicator / / lineView JXCategoryIndicatorLineView * lineView = [[JXCategoryIndicatorLineView alloc] init]; lineView.indicatorLineViewColor = [UIColor redColor]; lineView.indicatorLineWidth = JXCategoryViewAutomaticDimension; //backgroundView JXCategoryIndicatorBackgroundView *backgroundView = [[JXCategoryIndicatorBackgroundView alloc] init]; backgroundView.backgroundViewColor = [UIColor redColor]; backgroundView.backgroundViewWidth = JXCategoryViewAutomaticDimension; titleCategoryView.indicators = @[lineView, backgroundView]; //3, bind contentScrollView. Self. ScrollView initialization details refer to the source code. self.categoryView.contentScrollView = self.scrollView; [self.view addSubview:self.categoryView];Copy the code

• Single cell refresh: as in the red dot example, call- (void)reloadCell:(NSUInteger)index
• All state resets: called when data source, property configuration changes (such as pulling data back from the server)reloadDataMethod to refresh the state.

Designator styles are custom

Warehouse with: JXCategoryIndicatorLineView, JXCategoryIndicatorTriangleView, JXCategoryIndicatorImageView, JXCategoryIndicatorBackgroundVi Ew, JXCategoryIndicatorBallView

Main implementation methods:

• Inheritance JXCategoryIndicatorComponentView, internal complianceJXCategoryIndicatorProtocolAgreement;
• Implement protocol method, custom effect:
  • - (void)jx_refreshState:(CGRect)selectedCellFrameInitialize or reloadData, resetting state;
  • - (void)jx_contentScrollViewDidScrollWithLeftCellFrame:(CGRect)leftCellFrame rightCellFrame:(CGRect)rightCellFrame selectedPosition:(JXCategoryCellClickedPosition)selectedPosition percent:(CGFloat)percentContentScrollView handles the UI logic of the indicator following the gesture when sliding;
  • - (void)jx_selectedCell:(CGRect)cellFrame clickedRelativePosition:(JXCategoryCellClickedPosition)clickedRelativePositionProcess transition effects based on a selected cell;

Specific instance: refer to the demo project JXCategoryIndicatorDotLineView inside

Cell subclassing Precautions

The repository comes with JXCategoryTitleView, JXCategoryTitleImageView, JXCategoryNumberView, JXCategoryDotView, JXCategoryImageView

Main implementation methods:

• - (Class)preferredCellClassReturns a custom cell.
• - (void)refreshDataSourceRefresh data source, use custom cellModel;
• - (void)refreshCellModel:(JXCategoryBaseCellModel *)cellModel index:(NSInteger)indexResetting the data source when initializing and reloadData;
• - (CGFloat)preferredCellWidthAtIndex:(NSInteger)indexReturns the corresponding width based on the contents of the cell;
• - (void)refreshSelectedCellModel:(JXCategoryBaseCellModel *)selectedCellModel unselectedCellModel:(JXCategoryBaseCellModel *)unselectedCellModelThe status is refreshed when the cell is selected.
• - (void)refreshLeftCellModel:(JXCategoryBaseCellModel *)leftCellModel rightCellModel:(JXCategoryBaseCellModel *)rightCellModel ratio:(CGFloat)ratioThe status of the cell is refreshed when the cell switches from left to right.

Specific instance: refer to the demo project JXCategoryTitleAttributeView inside

Inheritance prompt

• Any subclassing, view, cell, cellModel, should be subclassed, even if a cell subclass does nothing. Used to maintain inheritance chains in case subclasses don’t know who to inherit from later;
• If you want to completely customize the contents of a cell, then inheritJXCategoryIndicatorView, JXCategoryIndicatorCell, JXCategoryIndicatorCellModel, likeJXCategoryTitleView, JXCategoryTitleCell, JXCategoryTitleCellModelDo that;
• If you are just making tweaks to the parent class, inherit the target View, cell, cellModel, tweak the cell’s existing controls, or add new ones. Just likeJXCategoryTitleImageView series, JXCategoryTitleAttributeView seriesDo that;

Lateral spreads gestures

First, add the following code to viewDidAppear:

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.navigationController.interactivePopGestureRecognizer.enabled = (self.categoryView.selectedIndex == 0);
}
Copy the code

Item is returned by default

• Click processing:

#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    self.navigationController.interactivePopGestureRecognizer.enabled = (index == 0);
}
Copy the code

Custom navigation bar returns Item

• Set the proxy: the self. The navigationController. InteractivePopGestureRecognizer. Delegate = (id) the self;
• Implement proxy methods:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    return YES;
}
Copy the code

• Click processing:

#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    self.navigationController.interactivePopGestureRecognizer.enabled = (index == 0);
}
Copy the code

contentScrollView

• Flexible layout: JXCategoryView is not strongly associated with contentScrollView, and you can even leave this property out and use it as a simple SegmentedControl. There are no layout requirements between them, and you can put JXCategoryView in the navigation bar, UITableViewSectionHeader, or anywhere you want.
• Click-to-process: Because it’s fully decoupled, in the JXCategoryView click-to-callback, you need to add the following code to scroll through the content:

#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    [self.scrollView setContentOffset:CGPointMake(self.scrollView.bounds.size.width*index, 0) animated:YES];
}
Copy the code

supplement

The warehouse keeps updated at any time, and the effect of the mainstream new classification selection will be supported in the first time. If you have any suggestions or questions, please contact me by email: [email protected] QQ group: 112440151

Making the address

Download the source code and have a look! JXCategoryView