项目作者: JNDisrupter

项目描述 :
Segment Control
高级语言: Swift
项目地址: git://github.com/JNDisrupter/JNSegmentedControl.git
创建时间: 2018-12-18T15:07:12Z
项目社区:https://github.com/JNDisrupter/JNSegmentedControl

开源协议:MIT License

下载


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:

  1. pod 'JNSegmentedControl'

Usage:

  • Import JNSegmentedControl module

    1. 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.

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

    • JNSegmentedControl Setup:

      1. self.segmentedControlView.setup(
      2. items: [NSAttributedString],
      3. selectedItems: [NSAttributedString],
      4. options: JNSegmentedCollectionOptions(),
      5. badgeCounts: [Int]
      6. )

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

      1. self.segmentedControlView.setup(
      2. items: [NSAttributedString],
      3. selectedItems: [NSAttributedString],
      4. options: nil,
      5. badgeCounts: []
      6. )
    • 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:

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

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

    1. self.segmentedControlView.didSelectItem = { segment in
    2. print("Selected item: ", segment)
    3. }
  • 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.

      1. JNSegmentedCollectionOptions(
      2. backgroundColor: UIColor.white,
      3. itemOptionType: JNSegmentedCollectionItemOptionType,
      4. layoutType: JNSegmentedCollectionLayoutType.dynamic,
      5. verticalSeparatorOptions: JNSegmentedCollectionItemVerticalSeparatorOptions? = nil,
      6. scrollEnabled: true,
      7. contentItemLayoutMargins: 10.0
      8. )
  • 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.

      1. enum JNSegmentedCollectionItemOptionType {
      2. case single(option: JNSegmentedCollectionItemOptions)
      3. case multiple(options: [JNSegmentedCollectionItemOptions])
      4. }
  • 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.

      1. JNSegmentedCollectionItemOptions(cornerRadius: 10.0,
      2. backgroundColor: #colorLiteral(red: 0.456212461, green: 0.7545028329, blue: 0.8568375707, alpha: 1),
      3. selectedBackgroundColor: #colorLiteral(red: 0.1984777451, green: 0.7956866622, blue: 1, alpha: 1),
      4. badgeBackgroundColor: .white,
      5. selectedBadgeBackgroundColor: .white,
      6. badgeFont: UIFont.systemFont(ofSize: 16.0),
      7. selectedBadgeFont: UIFont.systemFont(ofSize: 16.0),
      8. 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.

      1. enum JNSegmentedCollectionLayoutType {
      2. case dynamic
      3. case fixed(maxVisibleItems: Int)
      4. }
  • 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.

      1. JNSegmentedCollectionItemVerticalSeparatorOptions (
      2. heigthRatio: 0.3,
      3. width: 1.0,
      4. color: UIColor.blue
      5. )

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.