CI COV License: MIT

旋钮

简单的类似滑块的控件,使用 CoreAnimation 图层将其路径描绘成弧形。支持 iOS 和 macOS 平台。

Animation of knob Knobs in SoundFonts app

像滑块一样,控件中的触摸移动会改变值。 对于此实现

上面的图片来自我的 SoundFonts iOS 应用程序,其中的旋钮控制各种音频效果设置。

包含一个 playground 以供使用旋钮。

版本

有两个主要版本在 API 上略有变化。 最初(直到 v1.6.0),旋钮轨道和指示器的宽度被给出为假定的像素值。 从 v2.0.0 开始,这变为因子,该因子与边界宽度和高度值的最小值相乘,以得出要使用的宽度值。 这允许随着旋钮边界的变化而缩放旋钮特征。

配置

UIBezierPath 文档中对弧角的解释很好。 简而言之,角度为 0 将沿 X 轴延伸,而角度为 π/2 将沿负 Y 轴延伸。

用于渲染旋钮弧形路径的 draw 方法以顺时针方式绘制,因此结束弧形角度必须大于起始弧形角度。 默认值将弧形路径中的开口以负 Y 轴(指向下方)为中心,弧形距离为圆周的 2/16。

鼠标/触摸跟踪

正如人们所期望的那样,跟踪旋钮视图区域中的触摸,并将任何更改报告给任何已注册的操作

SwiftUI 支持

该软件包还包括一个 SwiftUI 实现:KnobView。 默认值应该足以开始,但是您可以将修饰符应用于您的 KnobView 以配置您想要的外观。 KnobView 构造函数需要两个状态绑定,一个用于旋钮的值,另一个用于旋钮的操作标志。 此外,您可以提供 minimumValuemaximumValue 值来覆盖默认值 0.0 和 1.0。

KnobView(value: $volumeValue, manipulating: $volumeManipulating, minimum: 0.0, maximum: 1.0)
  .trackStyle(width: trackWidth, color: trackColor)
  .progressStyle(width: progressWidth, color: progressColor)
  .indicatorStyle(width: progressWidth, color: progressColor, length: 0.3)

演示应用程序

KnobDemo 文件夹包含一个 Xcode 项目,您可以打开该项目来构建 macOS 和 iOS 平台的简单演示应用程序。 这些还包含 UI 测试,以确保旋钮正确跟踪并报告其值。

演示应用程序使用 SwiftUI 进行视图定义。 它们都包含一个 ContentView,它正确地将两个 KnobView 实例与显示 KnobView 值的 Text 视图连接起来。