AdaptiveSlider

SwiftUI 的灵活且时尚的滑块

CircularSlider

CircularSlider 是一款完全可定制的圆形滑块，旨在满足 iOS 生态系统中对圆形设计的滑块的常见需求。无论您是处理时间选择、音量调节还是角度设置，CircularSlider 都提供了无与伦比的灵活性。自定义选项包括渐变进度条、触觉反馈、刻度线和标签支持，使其成为创建精致且用户友好界面的不可或缺的工具。

安装

软件包 URL

要包含该软件包，请使用以下 URL

https://github.com/Hovig90/AdaptiveSlider.git

此仓库以 Swift 包的形式提供。要将其包含在您的项目中

在 Xcode 中，转到File > Add Package Dependencies。
添加仓库 URL。
将 AdaptiveSlider 导入到您将要使用它的 Swift 文件中

import AdaptiveSlider

用法

基本 CircularSlider 示例

添加 import AdaptiveSlider 以在您的项目中使用 CircularSlider。然后，使用以下参数初始化它

value: 一个 Binding，表示滑块的当前值。
in: 滑块操作的范围。默认为 0...1。
step: 滑块值的增量步长。默认为 0.01。
label: （可选）滑块的自定义标签。默认为 EmptyView()。

import AdaptiveSlider

struct ContentView: View {
    @State private var sliderValue: Double = 50

    var body: some View {
        CircularSlider(value: $sliderValue, in: 0...100) {
            Text(String(format: "%.0f", sliderValue))
        }
    }
}

自定义示例

以下是如何使用 CircularSlider 的强大修饰符进行自定义的示例

自定义半径、颜色和线条宽度

调整 CircularSlider 的外观以适应您应用的设计

CircularSlider(value: $sliderValue, in: 0...100)
    .radius(120) // Sets the radius of the circular slider.
    .tint(.yellow) // Customizes the color of the progress track.
    .trackStyle(lineWidth: 10, color: .gray) // Configures the track’s width and color.
    .thumbStyle(radius: 8, color: .red) // Sets the thumb's radius and color.

将刻度线与步长结合使用

添加刻度线以可视化关键值以及步长增量。这通过提供清晰的视觉标记来增强用户交互。

CircularSlider(value: $sliderValue, in: 0...100, step: 10) {
    Text(String(format: "%.0f", sliderValue))
        .font(.title3)
        .fontWeight(.semibold)
}
.radius(60)
.trackStyle(lineWidth: 8)
.showTicks(count: 10) // Adds ticks to the slider for better visualization.

渐变进度条

创建具有渐变进度条的视觉上吸引人的滑块

CircularSlider(value: $sliderValue, in: 0...100) {
				Text("\(Int(sliderValue1))")
		}
    .tint(LinearGradient(colors: [.red, .orange, .yellow], startPoint: .top, endPoint: .bottom))

添加触觉反馈

添加触觉反馈以获得触觉用户体验

CircularSlider(value: $sliderValue, in: 0...100)
    .hapticFeedback(.medium)

辅助功能自定义

CircularSlider 已经启用了辅助功能支持。但是，您可以通过添加描述性的辅助功能属性来进一步增强它

CircularSlider(value: $sliderValue, in: 0...100)
    .accessibilityValue("75 percent", hint: "Adjust the temperature setting", label: "Temperature Control")

此修饰符允许您为 VoiceOver 等辅助技术定义自定义值、提示和标签。

发现 Bug 了吗？

如果您遇到问题或对改进此项目有建议，请提交 issue 或 pull request。欢迎您的贡献！