Recreating the Xcode style value input

Hi all,

Total SwiftUI beginner here.

I'd like to create a prototype that copies the Xcode style value input field in a Mac app.

By 'Xcode style' I mean:

  • Hovering on the field changes the cursor to the left-right arrows
  • You can scrub the value with the mouse by clicking and dragging left/right
  • If you click without dragging, the field gets focus and you can enter a number

Can anyone provide any advice on where to start with this? Or even better, let me know if you've seen any examples that might be able to help me learn how to approach this.

Many thanks! Matt

clicking and dragging: use a .gesture modifier on a view

click to enter a number: that's the behavior of a TextField

change cursor on hover: onContinuourHover and the methods on NSCursor should get you started

Step1 : Create A SwiftUI View

step2 : Use Gesture And Gesture state property I hope You Know How Too Add

this is the way -->

`struct CounterView: View { @GestureState private var isDetectingLongPress = false

var body: some View {
    let press = LongPressGesture(minimumDuration: 1)
        .updating($isDetectingLongPress) { currentState, gestureState, transaction in
            gestureState = currentState
        }
    
    return Circle()
        .fill(isDetectingLongPress ? Color.yellow : Color.green)
        .frame(width: 100, height: 100, alignment: .center)
        .gesture(press)
}

} this is example from [https://developer.apple.com/documentation/swiftui/adding-interactivity-with-gestures) just you can go through this

step3: You can gesture for scrubbing like you can use drag gesture

    @State private var isDragging = false


    var drag: some Gesture {
        DragGesture()
            .onChanged { _ in self.isDragging = true }
            .onEnded { _ in self.isDragging = false }
    }


    var body: some View {
        Circle()
            .fill(self.isDragging ? Color.red : Color.blue)
            .frame(width: 100, height: 100, alignment: .center)
            .gesture(drag)
    }
}

this is way to add gesture I hope you find it beneficial mate .

Step4: Then You Create Custom Field


var body: some View {
    TextField(
        "User name (email address)",
        text: $username
    )

This Is the Way You Can Add Custom Text Field for That You Have To Use @State As I Have Given In code Like It Depends What You Want To Name Its Depend On you

Step 5 : Add Cursor Modification Step 6: Then .onReceive modifier in SwiftUI allows you to listen to changes in a publisher and react to those changes. In the context of your Xcode-style value input field, you can use .onReceive to handle keyboard input for the text field and ensure that it responds to numeric input, updating the value accordingly.


struct XcodeStyleValueField: View {
    // State to keep track of the value displayed in the field
    @State private var value: Double = 0
    
    // State to manage whether the field is focused
    @State private var isFocused: Bool = false
    
    // Gesture state to track if the user is scrubbing (dragging) the field
    @GestureState private var scrubbing: Bool = false
    
    var body: some View {
        TextField("", value: $value, format: "%.2f")
            .textFieldStyle(.roundedBorder) // Apply a rounded border style to the text field
            .focused($isFocused) // Bind the focus state of the text field
            
            // Gesture to enable scrubbing (dragging) functionality
            .gesture(
                DragGesture(minimumDistance: 0)
                    .updating($scrubbing) { value, state, _ in
                        state = true
                    }
                    .onChanged { value in
                        if isFocused {
                            // Update the value while scrubbing
                            self.value += Double(value.translation.width) / 10
                        }
                    }
            )
            
            // Change cursor style based on focus state
            .cursor(isFocused ? .resizeLeftRight : .arrowCursor)
            
            // Toggle focus state when the field is tapped
            .onTapGesture {
                isFocused.toggle()
            }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            XcodeStyleValueField() // Use the custom value field
            Spacer()
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Set the main content view
        }
    }
}
// Code With Comment Might Help You Understand Better 

This Is Way I hope This Will Be Helpful To You Friend I tried my best To Make You Understand As Beginner. Keep Learning .

Recreating the Xcode style value input
 
 
Q