JXSegmentedView

A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview)

Advantages compared to other similar tripartite libraries:

• Indicator logic use Protocol Oriented Programming, which can be easily to extension;
• Provide more comprehensive and rich effects, and support almost all popular APP effects;
• Use subclassing to manage cell styles, with clearer logic and simpler extensions;

Objective-C Version

If you are looking for the Objective-C version, please click to view
JXCategoryView

Preview

Indicator Preview

Description	Gif
Line fixed width
Line flexible width
Line lengthen
Line lengthen and offset
RainbowLine
DotLine
DoubleLine
Triangle bottom
Triangle top
Background
Background with shadow
Background mask
Background mask without bottom view
Background gradient (fixed)
Gradient (change with position)
Image bottom
Image background
mixed indicators

The following indicators support up and down position switching：
JXSegmentedIndicatorLineView、JXSegmentedIndicatorRainbowLineView、JXSegmentedIndicatorDotLineView、JXSegmentedIndicatorDoubleLineView、JXSegmentedIndicatorTriangleView、JXSegmentedIndicatorImageView

Cell Preview

Description	Gif
title color gradient
text color gradient
transform zoom
transform zoom + stroke width
transform zoom + selected animation
transform zoom + cell width zoom
TitleImage_Top
TitleImage_Left
TitleImage_Bottom
TitleImage_Right
TitleImage_OnlyImage
TitleOrImage
number
dot
attributed text
mixed cells

Special Preview

Description	Gif
less data isItemSpacingAverageEnabled is true
less data isItemSpacingAverageEnabled is false
SegmentedControl referenceSegmentedControlViewController
SegmentedControl referenceSegmentedControlViewController
use in navigation bar referenceNaviSegmentedControlViewController
nestable referenceNestViewController
user profile page referencePagingViewController more styles just clickJXPagingView
data load & refresh referenceLoadDataViewController

Requirements

• iOS 9.0+
• Xcode 9+
• Swift 4.2、5.0

Installation

Manual

Clone the code and drag the Sources folder into the project to use it.

CocoaPods

target '<Your Target Name>' do
    pod 'JXSegmentedView'
end

Execute pod repo update first, then execute pod install

Usage

JXSegmentedView example

1.JXSegmentedView initialize

self.segmentedView = JXSegmentedView()
self.segmentedView.delegate = self
self.view.addSubview(self.segmentedView)

2.dataSource initialize

The dataSouce type is the JXSegmentedViewDataSource protocol. Use a separate class to implement the JXSegmentedViewDataSource protocol for code isolation. By selecting different class assignments to dataSource, you can control the JXSegmentedView display effect and implement plugin. For example, selecting the JXSegmentedTitleImageDataSource class as the dataSource selects the display effect of the text image; selecting the JXSegmentedNumberDataSource class as the dataSource selects the display effect of the text & number;

//segmentedDataSource must be strongly held by the property, or it will be released
self.segmentedDataSource = JXSegmentedTitleDataSource()
//Configuring data source related properties
self.segmentedDataSource.titles = ["猴哥", "青蛙王子", "旺财"]
self.segmentedDataSource.isTitleColorGradientEnabled = true
//The reloadData(selectedIndex:) method must be called, and the method will internally refresh the data source array.
self.segmentedDataSource.reloadData(selectedIndex: 0)
//Associated dataSource
self.segmentedView.dataSource = self.segmentedDataSource

3.Indicator initialize

let indicator = JXSegmentedIndicatorLineView()
indicator.indicatorWidth = 20
self.segmentedView.indicators = [indicator]

4.Implement JXSegmentedViewDelegate

//This method is called when you click to select or scroll to select. Applicable to only care about selected events, regardless of whether it is click or scroll.
func segmentedView(_ segmentedView: JXSegmentedView, didSelectedItemAt index: Int) {}

// This method will be called when the selected condition is clicked.
func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {}

// This method is called when the scroll is selected.
func segmentedView(_ segmentedView: JXSegmentedView, didScrollSelectedItemAt index: Int) {}

// Then callback when scrolling
func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {}

contentScrollView list container usage example

Use the UIScrollView custom usage example directly

Because the code is scattered and the amount of code is large, it is not recommended. There are many places to pay attention to when using it properly, especially for students who are new to iOS.

Do not directly paste the code, click LoadDataCustomViewController to view the source code.

As an alternative, the official use & is highly recommended to use the following in this way 👇👇👇.

Use the example of the JXSegmentedListContainerView wrapper class

JXSegmentedListContainerView is a highly encapsulated class for list views with the following advantages:

• Compared to the direct use of UIScrollView customization, the package is high, the code is centralized, and the use is simple;
• List lazy loading: List initialization is only performed when a list is displayed. Instead of loading all the lists at once, the performance is better;

1.JXSegmentedListContainerView initialize

self.listContainerView = JXSegmentedListContainerView(dataSource: self)
self.view.addSubview(self.listContainerView)
//Associate the cotentScrollView
self.segmentedView.contentScrollView = self.listContainerView.scrollView

2.Implement JXSegmentedListContainerViewDataSource

//return numbers of lists
func numberOfLists(in listContainerView: JXSegmentedListContainerView) -> Int {
    return self.segmentedDataSource.titles.count
}
//return the instance which comform `JXSegmentedListContainerViewListDelegate`
func listContainerView(_ listContainerView: JXSegmentedListContainerView, initListAt index: Int) -> JXSegmentedListContainerViewListDelegate {
    return ListBaseViewController()
}

3.Implement JXSegmentedListContainerViewListDelegate for list

Regardless of whether the type of the list is UIView or UIViewController

/// If the list is VC, return VC.view
/// If the list is View, return to View itself
/// - Returns: list 
func listView() -> UIView {
    return view
}

//Optional use, when the list is displayed
func listDidAppear() {}

//Optional use, called when the list disappears
func listDidDisappear() {}

4.Tell the key event JXSegmentedListContainerView

In the following two JXSegmentedViewDelegate proxy methods, call the corresponding code, don’t forget this one❗️❗️❗️

func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {
    //Pass the didClickSelectedItemAt event to the listContainerView, which must be called! ! !
    listContainerView.didClickSelectedItem(at: index)
}

func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {
    //Pass the scrolling event to the listContainerView, which must be called! ! !
    listContainerView.segmentedViewScrolling(from: leftIndex, to: rightIndex, percent: percent, selectedIndex: segmentedView.selectedIndex)
}

Click LoadDataViewController to see the source code.

Usage Summary

Because JXSegmentedView supports many features: indicators, cell styles, list containers, etc. How to manage the code orderly becomes a problem. The use of protocols, inheritance, and encapsulation classes greatly simplifies the use, and increases flexibility, making extensions quite easy.

• Core main class：JXSegmentedView
• Data Source & Cell Style Custom Class: Classes that follow the JXSegmentedViewDataSource protocol
• Indicator class: UIView class that complies with the JXSegmentedIndicatorProtocol protocol
• List container: officially recommended JXSegmentedListContainerView class, special case can be customized using UIScrollView

Indicator style customization

• To inherit the JXSegmentedIndicatorProtocol protocol, click on JXSegmentedIndicatorProtocol
• The base class JXSegmentedIndicatorBaseView inheriting the JXSegmentedIndicatorProtocol protocol is provided, which provides many basic properties. Click to see JXSegmentedIndicatorBaseView
• Custom indicator, please refer to the implemented indicator view, try more, think more, please ask Issue or join feedback QQ group if you have any questions.

dataSource and Cell customization

• Need to inherit the JXSegmentedViewDataSource protocol, click on JXSegmentedViewDataSource
• Provides the base class JXSegmentedBaseDataSource that inherits the JXSegmentedViewDataSource protocol, which provides many basic properties. Click to see JXSegmentedBaseDataSource
• Any custom requirements, dataSource, cell, itemModel must be subclassed. Even if a subclass cell does nothing. Used to maintain the inheritance chain, so as not to know who to inherit after subclassing;
• dataSource and Cell customization, please refer to the implemented dataSource, try more, think more, please ask Issue or join feedback QQ group if you have any questions.

Common Attribute Description

Common attribute description document address

Other Usage Tips

Other usage tips document address

Supplement

If you are just starting to use JXSegmentedView, be sure to search for the documentation or source code when you need to support certain features during development. Confirm that you have implemented the features you want to support. Please don’t ask the documentation and source code to see it, just ask questions directly. This is a waste of time for everyone. If you don’t support the features you want, feel free to ask for an discussion, or implement a PullRequest yourself.

If you have any suggestions or questions, you can contact me by：

E-mail：[email protected]

QQ Group： 112440276

If you like, just star❤️ it.

License

JXSegmentedView is released under the MIT license.