Swift自定义范围滑块 - NHRangeSlider

2016-12-17      82      Swift
项目简介

NHRangeSlider

一个自定义范围滑块,使用Swift编写。

环境需求

  • iOS: 8.0+
  • Xcode 8.1+
  • Swift 3.0+

安装

CocoaPods

需要CocoaPods 1.1.0+ 来创建NHRangeSlider.

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'NHRangeSlider', '~> 0.1.1'
end

然后运行:

$ pod install

Carthage

将下列代码加入到你的Cartfile中:

github "thehung111/NHRangeSlider" ~> 0.1.1

运行carthage update --platform iOS --no-use-binaries

Manual

你可以将NHRangeSlider/NHRangeSlider下的两个源文件NHRangeSlider和NHRangeSliderView 复制到你的项目中。

使用方法

默认滑块

默认的,标题标签不会显示,左右thumb将会是圆形的 。你可以在代码中通过storyboard来添加视图:

override func viewDidLoad() {
    super.viewDidLoad()

    // default slider. Configure the frame
    let sliderView = NHRangeSliderView(frame: CGRect(x: 16, y: 20, width: self.view.bounds.width - 32, height: 80) )
    // call size to fit to resize the height to fit exactly
    sliderView.sizeToFit()
    self.view.addSubview(sliderView)

}

带有Square Thumbs的滑块

let sliderSquareView = NHRangeSliderView(frame: ...)

// set to 0 for square
sliderSquareView.curvaceousness = 0.0

sliderSquareView.trackHighlightTintColor = UIColor.red
sliderSquareView.lowerValue = 20.0
sliderSquareView.upperValue = 80.0
sliderSquareView.sizeToFit()
self.view.addSubview(sliderSquareView)

带有标题的滑块

let sliderSquareWithLabelView = NHRangeSliderView(frame: ...)
sliderSquareWithLabelView.curvaceousness = 0.0
sliderSquareWithLabelView.trackHighlightTintColor = UIColor.brown
sliderSquareWithLabelView.lowerValue = 20.0
sliderSquareWithLabelView.upperValue = 80.0

// set title text
sliderSquareWithLabelView.titleLabel?.text = "Slider with title label"

sliderSquareWithLabelView.sizeToFit()
self.view.addSubview(sliderSquareWithLabelView)

带有下列设置的标签的滑块

let sliderWithLabelFollowView = NHRangeSliderView(frame: ...)
sliderWithLabelFollowView.trackHighlightTintColor = UIColor.black
sliderWithLabelFollowView.lowerValue = 30.0
sliderWithLabelFollowView.upperValue = 70.0
sliderWithLabelFollowView.gapBetweenThumbs = 5

// set style to follow
sliderWithLabelFollowView.thumbLabelStyle = .FOLLOW

sliderWithLabelFollowView.titleLabel?.text = "Slider with labels follow thumbs"
sliderWithLabelFollowView.sizeToFit()
self.view.addSubview(sliderWithLabelFollowView)