Learn Courses My Dashboard

Swift UI - tap vs. long tap on a text element or shape element

Hy guys out there!

i do have a question regarding controlling the behavior of visual elements in dependence on how the user taps on it.

Background information: I started the development of a scoring App to score Baseball games. All available Scoring Apps are too high sophisticated and you need scoring knowledge and experience. My intended App should just show the innings, the score itself and maybe the balls, strikes and outs - more than enough during a live game. This App transfers the actual score to a Firestore database and can get shown on any website and/or gets directly transferred on our video wall.

To keep the usage as simple as possible - so parents can score there youth games too - I want to implement the following functionality:

a normal tap on an element like the score (text element) should increase the score by 1. If the user has made a mistake, he should be able to correct or to decrease the score. So, if the user presses on the score for more than x … milliseconds a picker (or any other element) should show up which allows the user to change the score value. The highest available number in the picker shall be the actual one shown on the screen.

Does anyone of you has an idea how to implement this functionality? Will it work for shape elements too (eg. the circles for balls, strikes and outs)?

Thanks for your help and your ideas are very much appreciated!

Best regards

Peter from Austria - yes baseball is played in Austria too !! (http://www.indians.at)

Enclosed a preview of my functional design screen. It’s an absolutely pre stage to implement/test the basic functionality …

//
// ContentView.swift
// ScoreboardApp
//
// Created by Peter Luger on 07.11.21.
//

import SwiftUI

struct ContentView: View {

@State var intBalls = 0
@State var runsHome = 0
@State var runsGuest = 0
@State var inningHalf = "top"
@State var intInning = 1

//@State var statusBall1 = false
//@State var statusBall2 = false
//@State var statusBall3 = false

var body: some View {
    
    VStack {
        
        HStack {
            Image(systemName: "arrowtriangle.up.fill")
                .resizable()
                .frame(width: 64.0, height: 64.0)
                .foregroundColor(Color("IndiansYellow"))
                .padding()
            Text("Inning")
                .padding()
            Text(String(intInning))
                .padding()
            Image(systemName: "arrowtriangle.down")
                .resizable()
                .frame(width: 50, height: 50)
                .foregroundColor(Color("IndiansGrey"))
        }
        .font(.custom("FaceOffM54", size: 48))
        
        HStack {
            Text(String(runsGuest))
                .font(.custom("FaceOffM54", size: 144))
                .padding()
            Text(":")
                .padding()
            Text(String(runsHome))
                .font(.custom("FaceOffM54", size: inningHalf == "bottom" ? 144 : 122))
                .foregroundColor(inningHalf == "bottom" ? Color("IndiansRed") : Color.gray)
            
        }
        .font(.system(size: 108.0))
        .foregroundColor(Color("IndiansRed"))
        .padding()
        
        HStack {
            Text("Balls")
                .foregroundColor(Color("IndiansBlue"))
                .onTapGesture {
                    intBalls += 1
                    if intBalls > 3 {
                        intBalls = 0
                    }
                }
                .padding()
            
            Text(String(intBalls))
                .padding()
            
            ZStack {
                Circle()
                    .stroke(Color.gray, lineWidth: 5)
                    .frame(width: 50, height: 50)

                Circle()
                    .fill((intBalls >= 1) ? Color("IndiansGreen") : Color.white)
                    .frame(width: 45, height: 45)
                    .onTapGesture {
                        if (intBalls == 1) {
                            intBalls = 0
                        } else {
                            intBalls = 1
                        }
                    }
                
            }
            
            .padding()
            
            ZStack {
                Circle()
                    .stroke(Color.gray, lineWidth: 5)
                    .frame(width: 40, height: 40)

                Circle()
                    .fill((intBalls >= 2) ? Color("IndiansGreen") : Color.white)
                    .frame(width: 35, height: 35)
                    .onTapGesture {
                        if (intBalls == 2) {
                            intBalls -= 1
                        } else {
                            intBalls = 2
                        }
                    }
                
            }
            
            .padding()
            
            ZStack {
                Circle()
                    .stroke(Color.gray, lineWidth: 5)
                    .frame(width: 40, height: 40)

                Circle()
                    .fill((intBalls >= 3) ? Color("IndiansGreen") : Color.white)
                    .frame(width: 35, height: 35)
                    .onTapGesture {
                        if (intBalls == 3) {
                            intBalls -= 1
                        } else {
                            intBalls = 3
                        }
                    }
                
            }
            
            .padding()
        }
            
    }
    
}

}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
ContentView()
}
}
}

Welcome to the community @peter_luger !! Use

.onLongPressGesture(minimumDuration: numHere) {
}

Here’s a similar question beware that the order of the modifiers matters!

2 Likes