Gestos de Android con ejemplos

Android admite una variedad de gestos táctiles, como tocar , tocar dos veces , pellizcar , deslizar , desplazar , presionar prolongadamente , arrastrar y arrojar . Arrastrar y arrojar puede parecer similar, pero arrastrar es el tipo de desplazamiento que ocurre cuando un usuario arrastra el dedo por la pantalla táctil, mientras que un gesto de arrojar ocurre cuando el usuario arrastra y luego levanta el dedo rápidamente. Un MotionEvent describe el estado del evento táctil a través de un código de acción. Android admite  una larga lista de códigos de acción :

  • ACTION_DOWN: Ha comenzado un evento táctil.
  • ACTION_MOVE: Un cambio que ha ocurrido durante el evento táctil (entre ACTION_DOWN y ACTION_UP) .
  • ACTION_UP: El evento táctil ha finalizado. Contiene la ubicación de lanzamiento final.
  • ACTION_CANCEL: El gesto fue cancelado.

Nota: debe realizar la misma acción durante el evento ACTION_CANCEL y ACTION_UP.

Métodos importantes

  • getAction() : extrae la acción que el usuario realizó del parámetro del evento.

Interfaces importantes

  • GestureDetector.OnGestureListener : notifica a los usuarios cuando se ha producido un evento táctil en particular.
  • GestureDetector.OnDoubleTapListener : notifica a los usuarios cuando se produce un evento de doble toque.

Ejemplo 1

Veamos la forma de realizar algunas acciones simples en eventos como ACTION_DOWN, ACTION_UP, etc.

Paso 1 : Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Seleccione Kotlin como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/gesture"
        android:layout_width="398dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:hint="Gestures"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="50sp"></TextView>
  
</FrameLayout>

Paso 3: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

Kotlin

import android.os.Bundle
import android.util.Log
import android.view.MotionEvent
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
  
// logs are added for better understanding. 
private const val TAG = "Gestures"
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
  
    override fun onTouchEvent(event: MotionEvent): Boolean {
  
        return when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                // when we touch or tap on the screen
                Log.d(TAG, "Action was DOWN")
                gesture.text = "Action was DOWN"
                true
            }
            MotionEvent.ACTION_MOVE -> {
                // while pressing on the screen, 
                // we move our finger
                Log.d(TAG, "Action was MOVE")
                gesture.text = "Action was MOVE"
  
                true
            }
            MotionEvent.ACTION_UP -> {
                // Lifting up the finger after
                // pressing on the screen
                Log.d(TAG, "Action was UP")
                gesture.text = "Action was UP"
  
                true
            }
            MotionEvent.ACTION_CANCEL -> {
                Log.d(TAG, "Action was CANCEL")
                gesture.text = "Action was CANCEL"
  
                true
            }
            MotionEvent.ACTION_OUTSIDE -> {
                Log.d(TAG, "Movement occurred outside of screen element")
                gesture.text = "Movement occurred screen element"
  
                true
            }
            else -> super.onTouchEvent(event)
        }
    }
}

Nota: Es posible que obtenga un error en la siguiente línea:

importar kotlinx.android.synthetic.main.activity_main.*

Consulte esto para corregir este error.

Producción:  

Explicación de la salida: 

  • Cuando hacemos clic en la pantalla o presionamos en la pantalla, puede ver en el video que dice La acción estaba ABAJO 
  • Cuando movemos el mouse o el dedo mientras lo presionamos, TextView dice Action was Move .
  • Cuando suelto el mouse o levanto el dedo, dice que la acción estaba ARRIBA

Ejemplo 2 

Ahora veamos la forma de realizar algunas acciones en eventos como un solo toque, doble toque, pulsación prolongada, etc. El siguiente código usa el mismo archivo activity_main.xml que se usó anteriormente.  

Trabajar con el archivo MainActivity.kt: 

Kotlin

import android.os.Bundle
import android.util.Log
import android.view.GestureDetector
import android.view.MotionEvent
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.GestureDetectorCompat
import kotlinx.android.synthetic.main.activity_main.*
  
// logs are added for better understanding. 
private const val TAG = "Gestures"
  
// We have to implement the members as well
// because we are implementing the interfaces.
class MainActivity : AppCompatActivity(), GestureDetector.OnGestureListener, 
                                       GestureDetector.OnDoubleTapListener {
  
    private lateinit var detectorCompat: GestureDetectorCompat
  
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // Instantiate the gesture detector with the
        // application context and an implementation of
        // GestureDetector.OnGestureListener
        // since we have implemented these 
        // interfaces we can simply us the
        // this keyword to refer to the current activity
        detectorCompat = GestureDetectorCompat(this, this)
    }
  
    // this function connects touch events to gestures
    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (detectorCompat.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }
  
    override fun onDown(event: MotionEvent): Boolean {
        Log.d(TAG, "onDown: $event")
        return true
    }
  
    override fun onFling(
            event1: MotionEvent,
            event2: MotionEvent,
            velocityX: Float,
            velocityY: Float
    ): Boolean {
        Log.d(TAG, "onFling: $event1 $event2")
        return true
    }
  
    override fun onLongPress(event: MotionEvent) {
        Log.d(TAG, "onLongPress: $event")
        gesture.text = "Long Press"
    }
  
    override fun onScroll(
            event1: MotionEvent,
            event2: MotionEvent,
            distanceX: Float,
            distanceY: Float
    ): Boolean {
        Log.d(TAG, "onScroll: $event1 $event2")
        return true
    }
  
    override fun onShowPress(event: MotionEvent) {
        Log.d(TAG, "onShowPress: $event")
        gesture.text = "Press"
    }
  
    override fun onSingleTapUp(event: MotionEvent): Boolean {
        Log.d(TAG, "onSingleTapUp: $event")
        gesture.text = "Single Tap"
  
        return true
    }
  
    override fun onDoubleTap(event: MotionEvent): Boolean {
        Log.d(TAG, "onDoubleTap: $event")
        gesture.text = "DoubleTap"
  
        return true
    }
  
    override fun onDoubleTapEvent(event: MotionEvent): Boolean {
        Log.d(TAG, "onDoubleTapEvent: $event")
          
          // simple toast
        Toast.makeText(this, "Double Tap", Toast.LENGTH_SHORT).show() 
        return true
    }
  
    override fun onSingleTapConfirmed(event: MotionEvent): Boolean {
        Log.d(TAG, "onSingleTapConfirmed: $event")
        gesture.text = "Single Tap Confirmed"
  
        return true
    }
}

Producción: 

Explicación de la salida:  

  • Cuando hacemos un solo toque en la pantalla, dice un solo toque y luego un solo toque confirmado porque el evento no se canceló
  • Cuando pulsamos en la pantalla dice pulsar y si sigo pulsando más tiempo dice pulsación larga.
  • Cuando hacemos doble toque, el doble toque se muestra en la Vista de texto, así como en Toast.

Nota: onTouchEvent() es para la actividad, pero puede adjuntar un objeto View.OnTouchListener a cualquier objeto View mediante el método setOnTouchListener() .

Con este método, puede realizar acciones cuando se activan eventos dentro de una vista porque OnTouchListener está adjunto a esa vista en particular. Por ejemplo, para un ImageView con id «imp». 

img.setOnTouchListener { ver, evento de movimiento ->

           // … Responder a eventos táctiles

           verdadero

}    

// para vista general   

findViewById<View>(R.id.my_view).setOnTouchListener { v, evento ->

            // … Responder a eventos táctiles

           verdadero

 }

Publicación traducida automáticamente

Artículo escrito por chetankhanna767 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *