NLSegmentControl

UIDefaultSegmentControl 的替换品。使用 Swift 3.0 编写。深受 HMSegmentedControl 启发。

特点

• 支持文字、图像以及文字 + 图像（易于设置图像位置：左、右、上、下）
• 支持富文本标题
• 基于协议，支持自定义数据模型作为数据源
• 支持水平滚动
• 支持高级标题样式，具有字体、颜色、间距、阴影等文本属性
• 支持顶部和底部选择指示符以及框型指示符
• 支持 Blocks
• 与 ARC 和 iOS 8 及以上版本兼容

用法

如下代码所示：

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()

更多示例请查看演示项目。

示例

• 仅文字:

segment.segments = ["Trending", "News", "Library"]

• 仅图像:

segment.segments = [UIImage(named: "baby")!,UIImage(named: "bag")!,UIImage(named: "diamond")!]

如果需要为选中的分段设置选中图像，请尝试以下操作：

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]

• 文字和图像:

1. 使用 NLSegmentItem 结构体

注意：`title`、`image`、`selectedImage` 都是可选的

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. 使用您自己的数据模型，只需使其实现 NLSegment 协议。

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]

• 富文本标题:

设置 `segmentTitleFormatter` 属性，您可以为每个分段设置任何您想要的属性。如果返回 nil，分段将使用常见的 `titleTextAttributes` 属性。

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
        }

自定义属性

• 分段宽度样式

  • fixed：每个分段宽度相等，等于最宽分段的宽度。
  • dynamic：每个分段宽度不同，取决于其内容。
  • equal(width)：每个分段宽度相等，等于宽度参数。

• 选择指示符

  • selectionIndicatorStyle：选择指示符风格，支持 textWidthStripe、fullWidthStripe、box
  • selectionIndicatorHeight：选择指示符的高度
  • selectionIndicatorEdgeInset：选择指示符的边距
  • selectionIndicatorColor：选择指示符的颜色
  • selectionIndicatorPosition：选择指示符的位置，支持 top、bottom、none
  • selectionBoxColor：选择框的颜色

• 字体 & 颜色

  • titleTextAttributes：用于未选择段落标签的文本属性
  • selectedTitleTextAttributes：用于选择段落标签的文本属性

• 垂直分隔线

  • enableVerticalDivider：启用段落间的垂直分隔线
  • verticalDividerColor：垂直分隔线的颜色
  • verticalDividerWidth：垂直分隔线的宽度
  • verticalDividerInset：垂直分隔线的上下边距

• 图片和文本

  • imagePosition：与文本相对的图片位置
  • imageTitleSpace：图片和标题之间的间距

更新日志

版本 1.3.0

• 支持属性化标题

版本 1.2.0

• 重构段数据源，使用 NLSegment 协议作为数据源
• 移除 titles、images、selectedImages 属性
• 支持自定义数据模型

版本 1.1.0

• 将 selectedSegmentIndex 属性更新为公开