RangeUISlider 4.0.1

RangeUISlider 4.0.1

×

测试已测试✗
语言语言 SwiftSwift
许可证 MIT
发布最后发布2023年11月
SPM支持 SPM✓

由 Fabrizio Duroni 维护。

RangeUISlider 4.0.1

RangeUISlider

Build iOS SwiftLint Supported platform CocoaPods Version CocoaPods Doc Coverage Percentage codebeat badge GitHub license

一个兼容 UIKit 和 SwiftUI 的 iOS 范围选择滑块。使用 autolayout 开发，并且可以通过 @IBDesignable 和 @IBInspectable 或编程方式高度自定义。它也自动支持 RTL（从右到左）语言。

安装

有三种方式可以将 RangeUISlider 安装到您的项目中：手动安装、作为一个独立的框架或使用 CocoaPods。

手动安装

要手动安装 RangeUISlider，只需将 源代码文件夹 中的所有文件拖放到您的项目中。

框架

RangeUISlider 也可以作为一个框架提供。要安装它，请遵循安装自定义 CocoaTouch 框架的标准程序：

  • 将 RangeUISlider.xcodeproj 拖放到您的项目中
  • 在项目的嵌入式二进制文件/链接框架和库部分中添加它。

请参阅 RangeUISliderDemo 示例项目/目标，了解框架设置示例。

CocoaPods

RangeUISlider 也可以在 CocoaPods 上作为 pod 提供。在 Podfile 中添加依赖项，如下所示：

target 'MyApp' do
    pod 'RangeUISlider', '~> 3.0'
end

然后运行 pod install（或 pod update）。

Swift Package Manager (SPM)

RangeUISlider 也可以作为一个 SPM 包提供。使用项目配置从 GitHub 仓库中添加它。选择 master 或一个标签。如果选择标签，它必须 >= 1.11.0。

spm 1 spm 2 spm 3

使用方法

您可以使用 RangeUISlider 的三种方式

  • 在一个使用 Interface Builder 的 UIKit 项目中
  • 在一个使用代码的 UIKit 项目中
  • 在一个使用 UIViewRepresentable 创建的 RangeSlider 包装器的 SwiftUI 项目中

Interface Builder

要充分发挥 Interface Builder 下 RangeUISlider 的功能

  • 将 UIView 拖拽到你的故事板中
  • 将 RangeUISlider 设置为该视图的定制类
    • 重要：如果您使用了 cocoapods 或在安装期间使用了框架版本，请确保也将模块设置为 RangeUISlider
  • 开始使用 Interface Builder 编辑它（并充分发挥 @IBDesignabled 和 @IBInspectable 的功能）

这里 可以找到使用 Interface Builder 设置的视频教程。

代码方式

您还可以通过设置所有需要的属性将 RangeUISlider 作为程序性 UI 组件使用。请查看 RangeUISliderDemo 项目，以查看多个示例（例如，查看 此控制器。特别是，请记住为滑块设置 translatesAutoresizingMaskIntoConstraints = false 以使用自动布局。以下是一个简单的示例。

override func viewDidLoad() {
    // ...other code

    super.viewDidLoad()
    rangeSlider = RangeUISlider(frame: CGRect(origin: CGPoint(x: 20, y: 20), size: CGSize(width: 100, height: 50)))
    rangeSlider.translatesAutoresizingMaskIntoConstraints = false
    rangeSlider.delegate = self
    rangeSlider.barHeight = 20
    rangeSlider.barCorners = 10
    rangeSlider.leftKnobColor = #colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)
    rangeSlider.leftKnobWidth = 40
    rangeSlider.leftKnobHeight = 40
    rangeSlider.leftKnobCorners = 20
    rangeSlider.rightKnobColor = #colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)
    rangeSlider.rightKnobWidth = 40
    rangeSlider.rightKnobHeight = 40
    rangeSlider.rightKnobCorners = 20
    self.view.addSubview(rangeSlider)
    
    // ...other code
}

SwiftUI

您还可以通过使用 UIViewRepresentable 创建的 RangeSlider 包装器，在 SwiftUI 应用/屏幕中实现 RangeUISlider。以下是一个简单屏幕中使用的示例。您可以在 RangeUISliderDemo 演示项目中找到更多示例（请查看 这里）。

var body: some View {
        VStack {
            // ...other code
    
            RangeSlider(minValueSelected: <binding value>, maxValueSelected: <binding value>)
                .leftKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
                .leftKnobWidth(40)
                .leftKnobHeight(40)
                .leftKnobCorners(20)
                .rightKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
                .rightKnobWidth(40)
                .rightKnobHeight(40)
                .rightKnobCorners(20)
                
             // ...other code
        }
}

访问范围值

您可以通过两种方式访问范围值，具体取决于您是在使用 RangeUISlider 的 UIKit 或 SwiftUI 视图

  • 对于 UIKit，请使用 RangeUISliderDelegate 和代理属性
  • 对于 SwiftUI，请使用 RangeSlider.minValueSelected 和 RangeSlider.maxValueSelected 绑定值

UIKit - RangeUISliderDelegate

要获取 UIKit 项目中滑块的当前值，请设置滑块的代理属性。`RangeUISlider` 的代理必须实现 RangeUISliderDelegate 协议，该协议有三个方法。请看以下代码。

@objc public protocol RangeUISliderDelegate {
    /**
     Calls the delegate when the user has started the change of the range.
     */
    @objc optional func rangeChangeStarted()

    /**
     Calls the delegate when the user is changing the range by moving the knobs.
     
     - parameter event: the change event data. See `RangeUISliderChangeEvent`.
     */
    @objc optional func rangeIsChanging(event: RangeUISliderChangeEvent)

    /**
     Calls the delegate when the user has finished the change of the range.
     
     - parameter event: the change finish event data. See `RangeUISliderChangeFinishedEvent`.
     */
    @objc func rangeChangeFinished(event: RangeUISliderChangeFinishedEvent)
}

SwiftUI - 绑定值

您可以通过将两个绑定属性传递给 RangeSlider 构造函数来在 SwiftUI 项目中访问滑块的值。请看以下示例。

struct SwiftUIHostingView: View {
    @State private var minValueSelected: CGFloat = 10
    @State private var maxValueSelected: CGFloat = 40

    var body: some View {
        VStack {
            RangeSlider(minValueSelected: self.$minValueSelected, maxValueSelected: self.$maxValueSelected)
                .scaleMinValue(5)
                .scaleMaxValue(80)
                .defaultValueLeftKnob(10)
                .defaultValueRightKnob(40)
                .leftKnobWidth(40)
                .leftKnobHeight(40)
                .leftKnobCorners(20)
                .rightKnobColor(Color(#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1)))
                .rightKnobWidth(40)
                .rightKnobHeight(40)
                .rightKnobCorners(20)
        }
    }
}

以编程方式更改旋钮当前值（仅限 UIKit）

您也可以通过调用这两个 API 来更改滑块的值：

  • func changeLeftKnob(value: CGFloat) 用于以编程方式更改左旋钮值
  • func changeRightKnob(value: CGFloat) 用于以编程方式更改右旋钮值

传递给这些方法 value 应在滑块的值范围内（请参阅下一节文档，了解如何自定义滑块范围）。请参考 文档 了解如何使用这些 API。查看 示例项目中的 ChangeProgrammaticViewController 以了解如何使用这些 API。

可定制属性

以下是从 Interface Builder/程序（UIKit）或使用 RangeSlider 访问修饰符（SwiftUI）直接获取的 RangeUISlider 的可定制属性列表

  • 滑动条标识符（Int）
  • 范围最小值（CGFloat）
  • 范围最大值（CGFloat）
  • 步进增量值（CGFloat）
  • 左侧默认起始值（CGFloat）
  • 右侧默认起始值（CGFloat）
  • 选定的范围颜色
  • 选定范围图像（覆盖选定范围颜色属性）
  • 选定范围边缘内边距：顶部、左侧、底部、右侧（仅在设置选定范围图像时使用）
  • 选定范围渐变颜色 1（覆盖选定范围颜色和图像）
  • 选定范围渐变颜色 1（覆盖选定范围颜色和图像）
  • 选定范围渐变起始点（仅在选择选定范围渐变色时使用）
  • 选定范围渐变结束点（仅在选择选定范围渐变色时使用）
  • 未选定的范围颜色
  • 未选定范围图像（覆盖未选定范围颜色属性）
  • 未选定范围边缘内边距：顶部、左侧、底部、右侧（仅在设置未选定范围图像时使用）
  • 未选定范围渐变颜色 1（覆盖未选定范围颜色和图像）
  • 未选定范围渐变颜色 1（覆盖未选定范围颜色和图像）
  • 未选定范围渐变起始点（仅在选择未选定范围渐变色时使用）
  • 未选定范围渐变结束点（仅在选择未选定范围渐变色时使用）
  • 左侧旋钮宽度
  • 左侧旋钮高度
  • 左侧旋钮圆角半径
  • 左侧旋钮颜色
  • 左侧旋钮图像（覆盖颜色）
  • 左侧旋钮阴影不透明度
  • 左侧旋钮阴影颜色
  • 左侧旋钮阴影偏移量
  • 左侧旋钮阴影半径
  • 左侧旋钮渐变颜色 1（覆盖左侧旋钮颜色和图像）
  • 左侧旋钮渐变颜色 2（覆盖左侧旋钮颜色和图像）
  • 左侧旋钮渐变起始点（仅在选择左侧旋钮渐变色时使用）
  • 左侧旋钮渐变结束点（仅在选择左侧旋钮渐变色时使用）
  • 左侧旋钮边框宽度
  • 左侧旋钮边框颜色
  • 右侧旋钮宽度
  • 右侧旋钮高度
  • 右侧旋钮圆角半径
  • 右侧旋钮颜色
  • 右侧旋钮图像（覆盖颜色）
  • 右侧旋钮阴影不透明度
  • 右侧旋钮阴影颜色
  • 右侧旋钮阴影偏移量
  • 右侧旋钮阴影半径
  • 右侧旋钮渐变颜色 1（覆盖右侧旋钮颜色和图像）
  • 右侧旋钮渐变颜色 2（覆盖右侧旋钮颜色和图像）
  • 右侧旋钮渐变起始点（仅在选择右侧旋钮渐变色时使用）
  • 右侧旋钮渐变结束点（仅在选择右侧旋钮渐变色时使用）
  • 右侧旋钮边框宽度
  • 右侧旋钮边框颜色
  • 栏高度
  • 栏与容器视图的 leading 距离
  • 栏与容器视图的 trailing 距离
  • 栏圆角
  • 栏阴影不透明度
  • 栏阴影颜色
  • 栏阴影偏移量
  • 栏阴影半径
  • 栏边框宽度
  • 栏边框颜色
  • 显示旋钮标签
  • 旋钮标签顶部位置
  • 旋钮标签字体大小
  • 旋钮标签字体颜色
  • 旋钮标签小数位数

文档

您可以在 fabrizioduroni.it 上找到完整的API文档。

示例

以下屏幕截图展示了一些可以实现的定制化程度示例。您可以在 演示项目 中找到这些示例。