ניהול אירועי מגע ב-ViewGroup

כדאי לנסות את התכונה 'כתיבה מהירה'
Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. מידע על תנועות ב'כתיבה מהירה'
תנועות →

חשוב להיזהר בטיפול באירועי מגע ב-ViewGroup, כי לרוב ל-ViewGroup יש צאצאים שהם יעדים לאירועי מגע שונים מאלה של ה-ViewGroup עצמו. כדי לוודא שכל תצוגה מקבלת בצורה נכונה את אירועי המגע שמיועדים לה, צריך לשנות את השיטה onInterceptTouchEvent().

תיעוד אירועי מגע ב-ViewGroup

השיטה onInterceptTouchEvent() נקראת בכל פעם שזוהה אירוע מגע על פני השטח של ViewGroup, כולל על פני השטח של הצאצאים שלו. אם הפונקציה onInterceptTouchEvent() מחזירה את הערך true, הקריאה ל-MotionEvent נתפסת, כלומר היא לא מועברת לצאצא אלא ל-method‏ onTouchEvent() של ההורה.

השיטה onInterceptTouchEvent() מאפשרת להורה לראות אירועי מגע לפני שהילדים שלו רואים אותם. אם מחזירים את הערך true מ-onInterceptTouchEvent(), תצוגת הצאצא שהייתה מטפלת באירועי המגע מקבלת את הערך ACTION_CANCEL, והאירועים מאותו רגע ואילך נשלחים לשיטה onTouchEvent() של ההורה לטיפול הרגיל. onInterceptTouchEvent() יכול גם להחזיר את false ולעקוב אחרי אירועים בזמן שהם עוברים במורד היררכיית התצוגה ליעדים הרגילים שלהם, שמטפלים באירועים באמצעות onTouchEvent() משלהם.

בקטע הקוד הבא, הכיתה MyViewGroup היא תת-מחלקה של ViewGroup. MyViewGroup מכיל כמה תצוגות צאצא. אם גוררים את האצבע על תצוגת הצאצא באופן אופקי, תצוגת הצאצא לא מקבלת יותר אירועי מגע, ו-MyViewGroup מטפל באירועי המגע על ידי גלילה של התוכן שלה. עם זאת, אם מקישים על לחצנים בתצוגת הצאצא או גוללים בתצוגת הצאצא אנכית, אירועי המגע האלה לא ייחסמו על ידי הרכיב ההורה כי הצאצא הוא היעד המיועד. במקרים כאלה, onInterceptTouchEvent() מחזירה את הערך false ולא מתבצעת קריאה ל-onTouchEvent() של הכיתה MyViewGroup.

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.
        ...
    }
}

שימו לב ש-ViewGroup מספק גם שיטה requestDisallowInterceptTouchEvent(). ה-ViewGroup קורא לשיטה הזו כשהילד לא רוצה שהאב והאבות הקדמונים שלו יפריעו לאירועי מגע באמצעות onInterceptTouchEvent().

עיבוד אירועי ACTION_OUTSIDE

אם ViewGroup מקבל MotionEvent עם ACTION_OUTSIDE, האירוע לא נשלח לצאצאים שלו כברירת מחדל. כדי לעבד MotionEvent עם ACTION_OUTSIDE, צריך לשנות את dispatchTouchEvent(MotionEvent event) כדי לשלוח אותו ל-View המתאים או לטפל בו ב-Window.Callback הרלוונטי – לדוגמה, Activity.

שימוש בערכי קבועים של ViewConfiguration

קטע הקוד הקודם משתמש ב-ViewConfiguration הנוכחי כדי לאתחל משתנה בשם mTouchSlop. אפשר להשתמש בכיתה ViewConfiguration כדי לגשת למרחקים, למהירויות ולזמנים נפוצים שבהם נעשה שימוש במערכת Android.

'הזזה לא מכוונת' מתייחסת למרחק בפיקסלים שהמשתמש יכול לזוז ממנו במהלך המגע לפני שהמחווה תפורש כגלילה. בדרך כלל משתמשים ב-Touch Slop כדי למנוע גלילה מקרית כשהמשתמש מבצע פעולת מגע אחרת, כמו נגיעה ברכיבים במסך.

שתי שיטות נפוצות נוספות של ViewConfiguration הן getScaledMinimumFlingVelocity() ו-getScaledMaximumFlingVelocity(). השיטות האלה מחזירות את המהירות המינימלית והמהירות המקסימלית, בהתאמה, כדי להתחיל תנועה מהירה, שנמדדת בפיקסלים לשנייה. לדוגמה:

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.
    }
}

הרחבת האזור שניתן לגעת בו בתצוגת הצאצא

מערכת Android מספקת את הכיתה TouchDelegate כדי לאפשר להורה להרחיב את האזור שניתן לגעת בו בתצוגת הצאצא מעבר לגבולות של הצאצא. האפשרות הזו שימושית כשהילד או הילדה צריכים להיות קטנים אבל צריכים אזור מגע גדול יותר. אפשר גם להשתמש בשיטה הזו כדי לצמצם את אזור המגע של הילד או הילדה.

בדוגמה הבאה, ImageButton הוא _התצוגה המשויכת_ – כלומר הצאצא ששטח המגע שלו מורחב על ידי ההורה. זהו קובץ הפריסה:

<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>

קטע הקוד הבא מבצע את המשימות האלה:

  • הפונקציה מקבלת את תצוגת ההורה ומפרסמת Runnable בשרשור של ממשק המשתמש. כך מוודאים שהרכיב ההורה פורס את הצאצאים שלו לפני שהוא קורא לשיטה getHitRect(). השיטה getHitRect() מקבלת את ריבוע ההיט (או את האזור שניתן לגעת בו) של הצאצא בקואורדינטות של ההורה.
  • מאתר את תצוגת הצאצא ImageButton וקורא ל-getHitRect() כדי לקבל את גבולות האזור שניתן לגעת בו בצאצא.
  • הרחבת הגבולות של ריבוע ההיט של תצוגת הצאצא ImageButton.
  • יצירת מופע של TouchDelegate, עם העברת ריבוע ההיט המורחב ותצוגת הצאצא ImageButton כפרמטרים.
  • מגדיר את TouchDelegate בתצוגת ההורה כך שהקשות בתוך גבולות הענקת הגישה למגע מנותבות לצאצא.

בתפקידו כ-TouchDelegate של תצוגת הצאצא ImageButton, תצוגת ההורה מקבלת את כל אירועי המגע. אם אירוע המגע מתרחש בתוך ריבוע ההיט של הצאצא, הורה מעביר את אירוע המגע לצאצא לטיפול.

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);
                }
            }
        });
    }
}