Skip to content

JNDisrupter/JNSegmentedControl

Repository files navigation

JNSegmentedControl

CI Status Version License Platform

JNSegmentedControl is an easy to use, animated segmented control for iOS written in Swift.
JNSegmentedControl supports 3 main styles of segments: text only, image only, text with image on (under, above, before and after text).

Preview

Requirements:

  • Xcode 9
  • iOS 9.0+
  • Swift 4.2+

Installation

JNSegmentedControl is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'JNSegmentedControl'

Usage:

  • Import JNSegmentedControl module
import JNSegmentedControl
  • Initalization:

    • Storyboard: Manually, you can add a UIView instance to your Xib, set 'JNSegmentedControl' class and connect @IBOutlet reference.

    • Programmatically: Init ‘JNSegmentedControl’ UIView instance programatically.

        let segmentedControlView = JNSegmentedCollectionView()
        self.view.addSubview(segmentedControlView)
  • Setup:

    • JNSegmentedControl Setup:
        self.segmentedControlView.setup(
            items: [NSAttributedString],
            selectedItems: [NSAttributedString],
            options: JNSegmentedCollectionOptions(),
            badgeCounts: [Int]
        )

    To start with default options you can pass (nil) value to the options parameter.

        self.segmentedControlView.setup(
            items: [NSAttributedString],
            selectedItems: [NSAttributedString],
            options: nil,
            badgeCounts: []
        )
    • Configuring items:

    The Segmented Control items & selected items are array of NSAttributedString. In order to set items you need to provide an instance of [NSAttributedString].

    • Default Items:

          var items = [NSAttributedString]()
          let item  = NSAttributedString(string: “Default Item", attributes: [])
          items.append(item)
      
    • Selected Items:

          var items = [NSAttributedString]()
          let item  = NSAttributedString(string: “Selected Item", attributes: [])
          items.append(item)
      
  • Handling callback:

        self.segmentedControlView.didSelectItem = { segment in
            print("Selected item: ", segment)
        }
  • Options Customization:

    • backgroundColor: Segmented control background color.
    • itemOptionType: case value from JNSegmentedCollectionItemOptionType enumeration.
    • layoutType: case value from JNSegmentedCollectionLayoutType enumeration.
    • verticalSeparatorOptions: instance from JNSegmentedCollectionItemVerticalSeparatorOptions struct as vertical separator between segments.
    • scrollEnabled: segmented control is scrolling enabled.
    • contentItemLayoutMargins: Content item layout margins from Left and Right.
        JNSegmentedCollectionOptions(
            backgroundColor: UIColor.white,
            itemOptionType: JNSegmentedCollectionItemOptionType, 
            layoutType: JNSegmentedCollectionLayoutType.dynamic, 
            verticalSeparatorOptions: JNSegmentedCollectionItemVerticalSeparatorOptions? = nil,
            scrollEnabled: true,
            contentItemLayoutMargins: 10.0
        )
  • JNSegmented Collection Item Option Type:

    The Segmented Control Item has two types of layout for items:

    • single(option: JNSegmentedCollectionItemOptions): Single option for all items.
    • multiple(options: [JNSegmentedCollectionItemOptions]): Multiple option for all items.
        enum  JNSegmentedCollectionItemOptionType {
            case single(option: JNSegmentedCollectionItemOptions) 
            case multiple(options: [JNSegmentedCollectionItemOptions]) 
        }
  • JNSegmented Collection Item Options:

    The Segmented Control has the ability to configure each item, that has the following settings:

    • CornerRadius: Corner radius for container view.
    • BackgroundColor: Background color for container view.
    • SelectedBackgroundColor: Selected background color for container view.
    • BadgeBackgroundColor: Badge background color for badge count.
    • SelectedBadgeBackgroundColor: Selected badge background color for badge count.
    • BadgeFont: Badge count font.
    • SelectedBadgeFont: Selected badge count font.
    • BadgeTextColor: Badge count text color.
    • SelectedBadgeTextColor: Selected badge count text color.
        JNSegmentedCollectionItemOptions(cornerRadius: 10.0, 
                backgroundColor: #colorLiteral(red: 0.456212461, green: 0.7545028329, blue: 0.8568375707, alpha: 1),
                selectedBackgroundColor: #colorLiteral(red: 0.1984777451, green: 0.7956866622, blue: 1, alpha: 1),
                badgeBackgroundColor: .white, 
                selectedBadgeBackgroundColor: .white,
                badgeFont: UIFont.systemFont(ofSize: 16.0), 
                selectedBadgeFont: UIFont.systemFont(ofSize: 16.0), 
                badgeTextColor: .gray, selectedBadgeTextColor: .gray)
  • JNSegmented Collection Layout Type:

    The Segmented Control has two types of layout for items:

    • Dynamic: The width of each item will be according to its content.
    • Fixed: The width of each item will be fixed according to max visible Items.
        enum  JNSegmentedCollectionLayoutType {
            case dynamic
            case fixed(maxVisibleItems: Int)
        }
  • JNSegmented Vertical Separator Options:

    The Segmented Control has the ability to show separator line between items, that has the following settings:

    • HeigthRatio: Separator view height Ratio accroding to collection view height, max value is 1 and min is 0.
    • Width: Separator view width.
    • Color: Separator view background color.
        JNSegmentedCollectionItemVerticalSeparatorOptions (
            heigthRatio: 0.3, 
            width: 1.0,
            color: UIColor.blue
        )

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Author

Jayel Zaghmoutt, Mohammad Nabulsi & Mohammad Ihmouda

License

JNSegmentedControl is available under the MIT license. See the LICENSE file for more info.