如何使用SwiftUI创建自定义滑块?

ukxgm1gy  于 2023-05-16  发布在  Swift
关注(0)|答案(4)|浏览(220)

我可以使用SwiftUI创建滑块,但无法更改滑块的样式,如下图所示。
问题:我无法在SwiftUI中找到任何选项来更改滑块样式。

注意:我只想使用SwiftUI创建这个。我已经在Swift中使用“https://github.com/daprice/iOS-Tactile-Slider“创建了这个滑块

我试过了,但这不是解决方案:

1. Slider(value: .constant(0.3)).accentColor(Color.white)

2. Slider(value: $age, in: 18...20, step: 1, minimumValueLabel: Text("18"), maximumValueLabel: Text("20")) { Text("") }

3. Slider(value: $age, in: 18...20, step: 1, minimumValueLabel: Image(systemName: "18.circle"), maximumValueLabel: Image(systemName: "20.circle")) { Text("") }

如何仅使用SwiftUI创建具有如图所示样式的滑块?

uwopmtnx

uwopmtnx1#

我发现强调颜色取决于上下文和框架,所以我们不需要处理这个问题。
至于控件,我做了一个非常简单的示例。请不要把这当作一个解决方案,而是一个开始。

struct CustomView: View {

    @Binding var percentage: Float // or some value binded

    var body: some View {
        GeometryReader { geometry in
            // TODO: - there might be a need for horizontal and vertical alignments
            ZStack(alignment: .leading) {
                Rectangle()
                    .foregroundColor(.gray)
                Rectangle()
                    .foregroundColor(.accentColor)
                    .frame(width: geometry.size.width * CGFloat(self.percentage / 100))
            }
            .cornerRadius(12)
            .gesture(DragGesture(minimumDistance: 0)
                .onChanged({ value in
                    // TODO: - maybe use other logic here
                    self.percentage = min(max(0, Float(value.location.x / geometry.size.width * 100)), 100)
                }))
        }
    }
}

你可以用它就像

@State var percentage: Float = 50

    ...
    var body: some View {
    ...
            CustomView(percentage: $percentage)
                .accentColor(.red)
                .frame(width: 200, height: 44)
    ...
w8rqjzmb

w8rqjzmb2#

在我的情况下,我不得不定制拇指。(例如屏幕锁)
我为一个类似的问题留下了答案。

LockerSlider.swift

import SwiftUI

struct LockerSlider<V>: View where V : BinaryFloatingPoint, V.Stride : BinaryFloatingPoint {

    // MARK: - Value
    // MARK: Private
    @Binding private var value: V
    private let bounds: ClosedRange<V>
    private let step: V.Stride

    private let length: CGFloat    = 50
    private let lineWidth: CGFloat = 2

    @State private var ratio: CGFloat   = 0
    @State private var startX: CGFloat? = nil

    // MARK: - Initializer
    init(value: Binding<V>, in bounds: ClosedRange<V>, step: V.Stride = 1) {
        _value  = value
    
        self.bounds = bounds
        self.step   = step
    }

    // MARK: - View
    // MARK: Public
    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                // Track
                RoundedRectangle(cornerRadius: length / 2)
                    .foregroundColor(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)))
            
                // Thumb
                Circle()
                    .foregroundColor(.white)
                    .frame(width: length, height: length)
                    .offset(x: (proxy.size.width - length) * ratio)
                    .gesture(DragGesture(minimumDistance: 0)
                                .onChanged({ updateStatus(value: $0, proxy: proxy) })
                                .onEnded { _ in startX = nil })
            }
            .frame(height: length)
            .overlay(overlay)
            .simultaneousGesture(DragGesture(minimumDistance: 0)
                                    .onChanged({ update(value: $0, proxy: proxy) }))
            .onAppear {
                ratio = min(1, max(0,CGFloat(value / bounds.upperBound)))
            }
        }
    }

    // MARK: Private
    private var overlay: some View {
        RoundedRectangle(cornerRadius: (length + lineWidth) / 2)
            .stroke(Color.gray, lineWidth: lineWidth)
            .frame(height: length + lineWidth)
    }

    // MARK: - Function
    // MARK: Private
    private func updateStatus(value: DragGesture.Value, proxy: GeometryProxy) {
        guard startX == nil else { return }
    
        let delta = value.startLocation.x - (proxy.size.width - length) * ratio
        startX = (length < value.startLocation.x && 0 < delta) ? delta : value.startLocation.x
    }

    private func update(value: DragGesture.Value, proxy: GeometryProxy) {
        guard let x = startX else { return }
        startX = min(length, max(0, x))
    
        var point = value.location.x - x
        let delta = proxy.size.width - length
    
        // Check the boundary
        if point < 0 {
            startX = value.location.x
            point = 0
        
        } else if delta < point {
            startX = value.location.x - delta
            point = delta
        }
    
        // Ratio
        var ratio = point / delta
    
    
        // Step
        if step != 1 {
            let unit = CGFloat(step) / CGFloat(bounds.upperBound)
        
            let remainder = ratio.remainder(dividingBy: unit)
            if remainder != 0 {
                ratio = ratio - CGFloat(remainder)
            }
        }
    
        self.ratio = ratio
        self.value = V(bounds.upperBound) * V(ratio)
    }
}

Demo.swift

import SwiftUI

struct Demo: View {

    // MARK: - Value
    // MARK: Private
    @State private var number = 150000.0

    // MARK - View
    // MARK: Public
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Number\n\(number)")
                .bold()
                .padding(.bottom, 20)
        
            Text("OS Slider")
            Slider(value: $number, in: 0...1050000, step: 0.02)
                .padding(.bottom, 20)
        
            Text("Custom Slider")
            LockerSlider(value: $number, in: 0...1050000, step: 0.02)
                .padding(.bottom, 20)
        }
        .padding(20)
    }
}
e4eetjau

e4eetjau3#

这里是一个很好的解决方案自定义滑块。https://swiftuirecipes.com/blog/custom-slider-in-swiftui
我可以确定这是有效的。另外,如果你想让它更快,你应该添加onEnded闭包如下

.onEnded({ _ in
      // once the gesture ends, trigger `onEditingChanged` again
        xOffset = (trackSize.width - thumbSize.width) * CGFloat(percentage)
        lastOffset = xOffset
      onEditingChanged?(false)
    })
omhiaaxx

omhiaaxx4#

这可以满足你的需要

let width = UIScreen.main.bounds.width

struct Home: View {
    
    @State var maxWidth: CGFloat = width - 32

    @State var sliderProgress: CGFloat = 0
    @State var sliderWidth: CGFloat = 0
    @State var lastDragValue: CGFloat = 0
    
    var body: some View {
        NavigationView {
            VStack {
                ZStack(alignment: .leading, content: {
                    Rectangle()
                        .fill(.blue.opacity(0.2))
                        
                    Rectangle()
                        .fill(.blue)
                        .frame(width: sliderWidth)
                })
                .frame(width: maxWidth, height: 32)
                .cornerRadius(35)

                .overlay(alignment: .leading) {
                    Text("\(Int(sliderProgress * 100))%")
                        .fontWeight(.semibold)
                        .foregroundColor(.black)
                        .offset(x: sliderWidth - 16, y: -64)
                }
                .gesture(DragGesture(minimumDistance: 0).onChanged({ (value) in
                    
                    let translation = value.translation
                    
                    sliderWidth = translation.width + lastDragValue
                    
                    sliderWidth = sliderWidth > maxWidth ? maxWidth : sliderWidth
                    
                    sliderWidth = sliderWidth >= 0 ? sliderWidth : 0
                                        
                    let progress = sliderWidth / maxWidth
                    
                    sliderProgress = progress <= 1.0 ? progress : 1
                    
                }).onEnded({ (value) in
                    
                    sliderWidth = sliderWidth > maxWidth ? maxWidth : sliderWidth
                    
                    // Negative Height....
                    sliderWidth = sliderWidth >= 0 ? sliderWidth : 0
                    
                    lastDragValue = sliderWidth
                    
                }))
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .navigationTitle("Dashboard")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

相关问题