简单的类似滑块的控件,使用 CoreAnimation 图层将其路径描绘成弧形。支持 iOS 和 macOS 平台。
![]() |
![]() |
像滑块一样,控件中的触摸移动会改变值。 对于此实现
touchSensitivity
参数的文档。上面的图片来自我的 SoundFonts iOS 应用程序,其中的旋钮控制各种音频效果设置。
包含一个 playground 以供使用旋钮。
有两个主要版本在 API 上略有变化。 最初(直到 v1.6.0),旋钮轨道和指示器的宽度被给出为假定的像素值。 从 v2.0.0 开始,这变为因子,该因子与边界宽度和高度值的最小值相乘,以得出要使用的宽度值。 这允许随着旋钮边界的变化而缩放旋钮特征。
minimumValue
-- 控件将报告出的最低值。maximumValue
-- 控件将报告出的最高值。value
-- 控件的当前值(可设置)。travelDistance
-- 在鼠标/触摸事件距离计算中使用的像素数。 默认情况下,这是框架宽度/高度中较小的一个。touchSensitivity
-- 触摸移动和值变化之间的缩放因子。 默认值为 1
,这意味着必须拖动 1 倍的 travelDistance
才能将值从 miminimumValue
更改为 maximumValue
;值为 2
则需要 2 倍的 travelDistance
。maxChangeRegionWidthPercentage
-- 始终产生最大值变化的 travelDistance
的百分比。 这定义了视图中心的垂直区域。 此区域之外的鼠标/触摸事件将具有更高的灵敏度,因为事件 X 距离视图中心 X 越远,相同的值变化需要更多的移动。trackWidthFactor
-- 旋钮弧线的线宽,显示为进度指示器的轨道。 这乘以最小宽度/高度边界值。 允许随着尺寸的增加而缩放旋钮。trackColor
-- 从当前值绘制到末尾的弧线的颜色。progressWidthFactor
-- 旋钮弧线的线宽,从起点绘制到当前值。 这乘以最小宽度/高度边界值。 允许随着尺寸的增加而缩放旋钮。progressColor
-- 从起点绘制到当前值的弧线的颜色。indicatorWidthFactor
-- 从当前值向旋钮中心绘制的旋钮指示器的线宽。 请参阅 progressWidthFactor
。indicatorColor
-- 从当前值绘制到中心的线的颜色。indicatorLineLength
-- 从当前值绘制到中心的线的长度,其中 0.0 表示不绘制任何线,0.5 表示结果是一条到达旋钮中心点一半的线。startAngle
-- 弧的起始点(以弧度为单位)(参见下文)endAngle
-- 弧的结束点(以弧度为单位)tickCount
-- 要显示的刻度数tickLineLength
-- 要绘制的半径分数 (0.0 - 1.0)tickLineWidth
-- 刻度线的宽度tickColor
-- 刻度线的颜色valueLabel
-- 一个可选的 UILabel/NSText,用于显示当前值的格式化文本表示形式。valueName
-- 可选名称,用于在未操作旋钮时在 valueLabel
中显示。 如果为 nil
,则始终显示旋钮值。valueFormatter
-- 可选的 NumberFormatter,用于生成在 valueLabel
中显示的文本表示形式。valuePersistence
-- 在显示 valueName
(如果非 nil)之前,要保留上次显示的值的秒数。 仅在鼠标或触摸事件结束后应用。UIBezierPath 文档中对弧角的解释很好。 简而言之,角度为 0 将沿 X 轴延伸,而角度为 π/2 将沿负 Y 轴延伸。
用于渲染旋钮弧形路径的 draw
方法以顺时针方式绘制,因此结束弧形角度必须大于起始弧形角度。 默认值将弧形路径中的开口以负 Y 轴(指向下方)为中心,弧形距离为圆周的 2/16。
正如人们所期望的那样,跟踪旋钮视图区域中的触摸,并将任何更改报告给任何已注册的操作
value
更新的 touchSensitivity
值,并且触摸水平方向距离中心越远,垂直移动的灵敏度就越低 -- 必须移动更大的垂直距离才能实现相同的值变化。该软件包还包括一个 SwiftUI 实现:KnobView
。 默认值应该足以开始,但是您可以将修饰符应用于您的 KnobView 以配置您想要的外观。 KnobView
构造函数需要两个状态绑定,一个用于旋钮的值,另一个用于旋钮的操作标志。 此外,您可以提供 minimumValue
和 maximumValue
值来覆盖默认值 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
视图连接起来。