NLSegmentControl

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

NLSegmentControl

★ 10 Open GitHub ↗

A drop-in replacement for UISegmentControl. Written in swift 3.0. It's heavily inspired by HMSegmentedControl

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

NLSegmentControl
===

A drop-in replacement for UISegmentControl.  Written in swift 3.0. It's heavily inspired by [HMSegmentedControl](https://github.com/HeshamMegid/HMSegmentedControl)

# Features

- Support both text, images and text + image (easy to set image position: left, right, top, bottom)
- Support attributed title
- Based on protocol, support custom data model as the data source
- Support horizontal scrolling
- Support advanced title styling with text attributes for font, color, kerning, shadow, etc.
- Support selection indicator both on top and bottom, and box indicator
- Support blocks
- Works with ARC and iOS >= 8

# Usage

Just like the code below
```objc
let segment = NLSegmentControl(frame: CGRect(x: 0, y: 80, width: UIScreen.main.bounds.width, height: 40))
segment.segments = ["One Day", "Two", "Three", "Four dogs", "Five fingers", "Six trees", "Seven", "Eight", "Nine", "Ten"]
segment.indexChangedHandler = {
            (index) in
            print("index changed: \(index)")
        }
self.view.addSubview(segment)
segment.reloadSegments()
```
See more in the demo project.

# Example
- **text only**: 
```objc
segment.segments = ["Trending", "News", "Library"]
```

- **image only**: 
```objc
segment.segments = [UIImage(named: "baby")!,UIImage(named: "bag")!,UIImage(named: "diamond")!]
```
if you want to set the selected image for the selected segment, try this:
```objc
let item1 = NLSegmentItem(image: UIImage(named: "baby"), selectedImage: UIImage(named: "baby_s"))
let item2 = NLSegmentItem(image: UIImage(named: "bag"), selectedImage: UIImage(named: "bag_s"))
let item3 = NLSegmentItem(image: UIImage(named: "diamond"), selectedImage:UIImage(named: "diamond_s"))
segment.segments = [item1, item2, item3]
```

- **text and image**:

1.use NLSegmentItem struct

Note: ```title```, ```image```, ```selectedImage``` are all optional
```objc
let item1 = NLUISegmentItem(title: "Baby", image: UIImage(named: "baby"), selectedImage: UIImage(named: "baby_s"))
let item2 = NLUISegmentItem(title: "Bag", image: UIImage(named: "bag"), selectedImage: UIImage(named: "bag_s"))
let item3 = NLUISegmentItem(title: "Diamond", image: UIImage(named: "diamond"), selectedImage: UIImage(named: "diamond_s"))
segment.segments = [item1, item2, item3]
```

2.use your own data model, just make it implements ```NLSegment``` protocol.
```objc
struct Category {
    var categoryTitle: String?
    var categoryImage: String?
    var categorySelectedImage: String?
    
    init(title: String? = nil, image: String? = nil, selectedImage: String? = nil) {
        self.categoryTitle = title
        self.categoryImage = image
        self.categorySelectedImage = selectedImage
    }
}

extension Category: NLSegment {
    var segmentTitle: String? {
        return categoryTitle
    }
    var segmentImage: UIImage? {
        if let img = categoryImage {
            return UIImage(named: img)
        }
        return nil
    }
    var segmentSelectedImage: UIImage? {
        if let img = categorySelectedImage {
            return UIImage(named: img)
        }
        return nil
    }
}
let item1 = Category(title: "Baby", image: "baby", selectedImage: "baby_s")
let item2 = Category(title: "Bag", image: "bag", selectedImage: "bag_s")
let item3 = Category(title: "Diamond", image: "diamond", selectedImage: "diamond_s")
segment.segments = [item1, item2, item3]
```

- **attributed title**:

Set the ```segmentTitleFormatter``` property, you can set any attribute to the segment as you want.
If return nil, the segment will use the common ```titleTextAttributes``` property.
```
attrSegment.segmentTitleFormatter = {
            (segment, selected) -> NSAttributedString? in
            if let cate = segment as? Category {
                let title = cate.categoryTitle ?? ""
                let desc = cate.categoryDesc != nil ? "\n" + cate.categoryDesc! : ""
                let titleRange = NSRange(location: 0, length: title.count)
                let descRange = NSRange(location: title.count, length: desc.count)
                let attr = NSMutableAttributedString(string: title + desc)
                attr.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: 18), range: titleRange)
                attr.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: 10), range: descRange)
                if selected {
                    attr.addAttribute(NSForegroundColorAttributeName, value: UIColor.red, range: descRange)
                } else {
                    attr.addAttribute(NSForegroundColorAttributeName, value: UIColor.blue, range: descRange)
                }
                return attr
            }
            return nil
        }
```

# Custom properties

- segment width style
  * ```fixed```: Each segment has equal width, equal to the widest segment.
  * ```dynamic```: Each segment has different width, depends on it's content.
  * ```equal(width)```: Each segment has equal width, equal to the width param.

- selection indicator
  * ```selectionIndicatorStyle```: style of the selection indicator, support ```textWidthStripe```, ```fullWidthStripe```, ```box```
  * ```selectionIndicatorHeight```: Height of the selection indicator
  * ```selectionIndicatorEdgeInset```: Edge insets of the selection indicator
  * ```selectionIndicatorColor```: Color of the selection indicator
  * ```selectionIndicatorPosition```: Position of the selection indicator, support ```top```, ```bottom```, ```none```
  * ```selectionBoxColor```: Color of selection box
  
- font & color
  * ```titleTextAttributes```: Text attributes to apply to labels of the unselected segments
  * ```selectedTitleTextAttributes```: Text attributes to apply to labels of the selected segments

- vertical divider
  * ```enableVerticalDivider```: enable vertical divider between the segments
  * ```verticalDividerColor```: Color of vertical divider
  * ```verticalDividerWidth```: Width of vertical divider
  * ```verticalDividerInset```: Inset top and bottom of vertical divider

- image and text 
  * ```imagePosition```: image position relative to text
  * ```imageTitleSpace```: space between image and title

# Change Log

## version 1.3.0
- support attributed title

## version 1.2.0
- refactor segment data source, use ```NLSegment``` protocol as data source
- remove ```titles```, ```images```, ```selectedImages``` properties
- support custom data model

## version 1.1.0
- update ```selectedSegmentIndex``` property to public

NLSegmentControl

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README