【 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

Common attributes of the Cell style

Indicator Common attribute description

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