Zarządzanie zdarzeniami dotknięcia w grupie widoków

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi UI dla Androida. Dowiedz się więcej o gestach w Compose.
Gesty →

Obsługa zdarzeń dotykowych w ViewGroup wymaga szczególnej uwagi, ponieważ często zdarza się, że ViewGroup ma elementy podrzędne, które są celami innych zdarzeń dotykowych niż sam ViewGroup. Aby mieć pewność, że każdy widok prawidłowo odbiera zdarzenia dotykowe przeznaczone dla niego, zastąp metodę onInterceptTouchEvent().

Przechwytywanie zdarzeń dotykowych w ViewGroup

Metoda onInterceptTouchEvent() jest wywoływana za każdym razem, gdy na powierzchni ViewGroup zostanie wykryte zdarzenie dotknięcia, w tym na powierzchni jego elementów podrzędnych. Jeśli onInterceptTouchEvent() zwróci wartość true, MotionEvent zostanie przechwycony, co oznacza, że nie zostanie przekazany do elementu podrzędnego, ale do metody onTouchEvent() elementu nadrzędnego.

Metoda onInterceptTouchEvent() daje elementowi nadrzędnemu możliwość zobaczenia zdarzeń dotykowych, zanim zobaczą je jego elementy podrzędne. Jeśli metoda onInterceptTouchEvent() zwróci wartość true, widok dziecka, który wcześniej obsługiwał zdarzenia dotykowe, otrzyma ACTION_CANCEL, a zdarzenia od tego momentu będą wysyłane do metody onTouchEvent() elementu nadrzędnego w celu ich zwykłej obsługi. Metoda onInterceptTouchEvent() może też zwrócić wartość false i śledzić zdarzenia, gdy przechodzą one w dół hierarchii widoków do swoich zwykłych celów, które obsługują zdarzenia za pomocą własnej metody onTouchEvent().

W tym fragmencie kodu klasa MyViewGroup rozszerza ViewGroup. MyViewGroup zawiera wiele elementów podrzędnych. Jeśli przeciągniesz palcem poziomo po widoku dziecka, widok dziecka nie będzie już otrzymywać zdarzeń dotykowych, a MyViewGroup będzie obsługiwać zdarzenia dotykowe, przewijając swoją zawartość. Jeśli jednak klikniesz przyciski w widoku dziecka lub przewiniesz widok dziecka w pionie, element nadrzędny nie przechwyci tych zdarzeń dotknięcia, ponieważ widok dziecka jest ich docelowym odbiorcą. W takich przypadkach metoda onInterceptTouchEvent() zwraca wartość false, a metoda onTouchEvent() klasy MyViewGroup nie jest wywoływana.

Kotlin

class MyViewGroup @JvmOverloads constructor(
        context: Context,
        private val mTouchSlop: Int = ViewConfiguration.get(context).scaledTouchSlop
) : ViewGroup(context) {
    ...
    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        // This method only determines whether you want to intercept the motion.
        // If this method returns true, onTouchEvent is called and you can do
        // the actual scrolling there.
        return when (ev.actionMasked) {
            // Always handle the case of the touch gesture being complete.
            MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
                // Release the scroll.
                mIsScrolling = false
                false // Don't intercept the touch event. Let the child handle it.
            }
            MotionEvent.ACTION_MOVE -> {
                if (mIsScrolling) {
                    // You're currently scrolling, so intercept the touch event.
                    true
                } else {

                    // If the user drags their finger horizontally more than the
                    // touch slop, start the scroll.

                    // Left as an exercise for the reader.
                    val xDiff: Int = calculateDistanceX(ev)

                    // Touch slop is calculated using ViewConfiguration constants.
                    if (xDiff > mTouchSlop) {
                        // Start scrolling!
                        mIsScrolling = true
                        true
                    } else {
                        false
                    }
                }
            }
            ...
            else -> {
                // In general, don't intercept touch events. The child view
                // handles them.
                false
            }
        }
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        // Here, you actually handle the touch event. For example, if the action
        // is ACTION_MOVE, scroll this container. This method is only called if
        // the touch event is intercepted in onInterceptTouchEvent.
        ...
    }
}

Java

public class MyViewGroup extends ViewGroup {

    private int mTouchSlop;
    ...
    ViewConfiguration vc = ViewConfiguration.get(view.getContext());
    mTouchSlop = vc.getScaledTouchSlop();
    ...
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // This method only determines whether you want to intercept the motion.
        // If this method returns true, onTouchEvent is called and you can do
        // the actual scrolling there.

        final int action = MotionEventCompat.getActionMasked(ev);

        // Always handle the case of the touch gesture being complete.
        if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
            // Release the scroll.
            mIsScrolling = false;
            return false; // Don't intercept touch event. Let the child handle it.
        }

        switch (action) {
            case MotionEvent.ACTION_MOVE: {
                if (mIsScrolling) {
                    // You're currently scrolling, so intercept the touch event.
                    return true;
                }

                // If the user drags their finger horizontally more than the
                // touch slop, start the scroll.

                // Left as an exercise for the reader.
                final int xDiff = calculateDistanceX(ev);

                // Touch slop is calculated using ViewConfiguration constants.
                if (xDiff > mTouchSlop) {
                    // Start scrolling.
                    mIsScrolling = true;
                    return true;
                }
                break;
            }
            ...
        }

        // In general, don't intercept touch events. The child view handles them.
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // Here, you actually handle the touch event. For example, if the
        // action is ACTION_MOVE, scroll this container. This method is only
        // called if the touch event is intercepted in onInterceptTouchEvent.
        ...
    }
}

Pamiętaj, że ViewGroup udostępnia też metodę requestDisallowInterceptTouchEvent(). ViewGroup wywołuje tę metodę, gdy element podrzędny nie chce, aby element nadrzędny i jego przodkowie przechwytywali zdarzenia dotykowe za pomocą metody onInterceptTouchEvent().

Przetwarzanie zdarzeń ACTION_OUTSIDE

Jeśli ViewGroup otrzyma MotionEvent z ACTION_OUTSIDE, zdarzenie domyślnie nie jest wysyłane do jego elementów podrzędnych. Aby przetworzyć MotionEvent z ACTION_OUTSIDE, zastąp dispatchTouchEvent(MotionEvent event) w celu wysłania do odpowiedniego View lub obsłuż je w odpowiednim Window.Callback – na przykład Activity.

Korzystanie ze stałych ViewConfiguration

Poprzedni fragment kodu używa bieżącego ViewConfiguration do zainicjowania zmiennej o nazwie mTouchSlop. Za pomocą klasy ViewConfiguration możesz uzyskać dostęp do typowych odległości, prędkości i czasów używanych przez system Android.

„Touch slop” to odległość w pikselach, o jaką może się przesunąć dotyk użytkownika, zanim gest zostanie zinterpretowany jako przewijanie. Touch slop jest zwykle używany do zapobiegania przypadkowemu przewijaniu, gdy użytkownik wykonuje inną operację dotykową, np. dotyka elementów na ekranie.

Dwie inne często używane metody ViewConfiguration to getScaledMinimumFlingVelocity() i getScaledMaximumFlingVelocity(). Te metody zwracają odpowiednio minimalną i maksymalną prędkość, aby zainicjować szybkie przesunięcie mierzone w pikselach na sekundę. Przykład:

Kotlin

private val vc: ViewConfiguration = ViewConfiguration.get(context)
private val mSlop: Int = vc.scaledTouchSlop
private val mMinFlingVelocity: Int = vc.scaledMinimumFlingVelocity
private val mMaxFlingVelocity: Int = vc.scaledMaximumFlingVelocity
...
MotionEvent.ACTION_MOVE -> {
    ...
    val deltaX: Float = motionEvent.rawX - mDownX
    if (Math.abs(deltaX) > mSlop) {
        // A swipe occurs, do something.
    }
    return false
}
...
MotionEvent.ACTION_UP -> {
    ...
    if (velocityX in mMinFlingVelocity..mMaxFlingVelocity && velocityY < velocityX) {
        // The criteria are satisfied, do something.
    }
}

Java

ViewConfiguration vc = ViewConfiguration.get(view.getContext());
private int mSlop = vc.getScaledTouchSlop();
private int mMinFlingVelocity = vc.getScaledMinimumFlingVelocity();
private int mMaxFlingVelocity = vc.getScaledMaximumFlingVelocity();
...
case MotionEvent.ACTION_MOVE: {
    ...
    float deltaX = motionEvent.getRawX() - mDownX;
    if (Math.abs(deltaX) > mSlop) {
        // A swipe occurs, do something.
    }
...
case MotionEvent.ACTION_UP: {
    ...
    } if (mMinFlingVelocity <= velocityX && velocityX <= mMaxFlingVelocity
            && velocityY < velocityX) {
        // The criteria are satisfied, do something.
    }
}

Rozszerzanie obszaru dotykowego elementu podrzędnego

Android udostępnia klasę TouchDelegate, która umożliwia elementowi nadrzędnemu rozszerzenie obszaru dotykowego elementu podrzędnego poza granice elementu podrzędnego. Jest to przydatne, gdy element podrzędny musi być mały, ale potrzebuje większego obszaru dotykowego. Możesz też użyć tego podejścia, aby zmniejszyć obszar dotykowy elementu podrzędnego.

W tym przykładzie ImageButton jest _widokiem delegowanym_ – czyli elementem podrzędnym, którego obszar dotykowy jest rozszerzany przez element nadrzędny. Oto plik układu:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/parent_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity" >

     <ImageButton android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="@null"
          android:src="@drawable/icon" />
</RelativeLayout>

Ten fragment kodu wykonuje te zadania:

  • Pobiera widok rodzica i publikuje Runnable w wątku UI. Dzięki temu element nadrzędny układa swoje elementy podrzędne przed wywołaniem metody getHitRect(). Metoda getHitRect() pobiera prostokąt trafienia (czyli obszar dotykowy) elementu podrzędnego we współrzędnych elementu nadrzędnego.
  • Znajduje element podrzędny ImageButton i wywołuje getHitRect(), aby uzyskać granice obszaru dotykowego elementu podrzędnego.
  • Rozszerza granice prostokąta trafienia elementu podrzędnego ImageButton.
  • Tworzy instancję TouchDelegate, przekazując jako parametry rozszerzony prostokąt trafienia i element podrzędny ImageButton.
  • Ustawia TouchDelegate w widoku rodzica, aby dotknięcia w granicach delegata dotyku były kierowane do elementu podrzędnego.

Jako delegat dotyku elementu podrzędnego ImageButton widok nadrzędny otrzymuje wszystkie zdarzenia dotykowe. Jeśli zdarzenie dotykowe wystąpi w prostokącie trafienia elementu podrzędnego, element nadrzędny przekazuje zdarzenie dotykowe do elementu podrzędnego w celu jego obsługi.

Kotlin

public class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Post in the parent's message queue to make sure the parent lays out
        // its children before you call getHitRect().
        findViewById<View>(R.id.parent_layout).post {
            // The bounds for the delegate view, which is an ImageButton in this
            // example.
            val delegateArea = Rect()
            val myButton = findViewById<ImageButton>(R.id.button).apply {
                isEnabled = true
                setOnClickListener {
                    Toast.makeText(
                            this@MainActivity,
                            "Touch occurred within ImageButton touch region.",
                            Toast.LENGTH_SHORT
                    ).show()
                }

                // The hit rectangle for the ImageButton.
                getHitRect(delegateArea)
            }

            // Extend the touch area of the ImageButton beyond its bounds on the
            // right and bottom.
            delegateArea.right += 100
            delegateArea.bottom += 100

            // Set the TouchDelegate on the parent view so that touches within
            // the touch delegate bounds are routed to the child.
            (myButton.parent as? View)?.apply {
                // Instantiate a TouchDelegate. "delegateArea" is the bounds in
                // local coordinates of the containing view to be mapped to the
                // delegate view. "myButton" is the child view that receives
                // motion events.
                touchDelegate = TouchDelegate(delegateArea, myButton)
            }
        }
    }
}

Java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Get the parent view.
        View parentView = findViewById(R.id.parent_layout);

        parentView.post(new Runnable() {
            // Post in the parent's message queue to make sure the parent lays
            // out its children before you call getHitRect().
            @Override
            public void run() {
                // The bounds for the delegate view, which is an ImageButton in
                // this example.
                Rect delegateArea = new Rect();
                ImageButton myButton = (ImageButton) findViewById(R.id.button);
                myButton.setEnabled(true);
                myButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this,
                                "Touch occurred within ImageButton touch region.",
                                Toast.LENGTH_SHORT).show();
                    }
                });

                // The hit rectangle for the ImageButton.
                myButton.getHitRect(delegateArea);

                // Extend the touch area of the ImageButton beyond its bounds on
                // the right and bottom.
                delegateArea.right += 100;
                delegateArea.bottom += 100;

                // Instantiate a TouchDelegate. "delegateArea" is the bounds in
                // local coordinates of the containing view to be mapped to the
                // delegate view. "myButton" is the child view that receives
                // motion events.
                TouchDelegate touchDelegate = new TouchDelegate(delegateArea,
                        myButton);

                // Set the TouchDelegate on the parent view so that touches
                // within the touch delegate bounds are routed to the child.
                if (View.class.isInstance(myButton.getParent())) {
                    ((View) myButton.getParent()).setTouchDelegate(touchDelegate);
                }
            }
        });
    }
}