如何使用多个 TouchDelegate

Question

我有两个 ImageButtons，每个都位于relativelayout 内，这两个relativelayout 位于另一个relativelayout 中，我想为每个imagebutton 设置TouchDelegate。如果通常我将 TouchDelegate 添加到每个 ImageButton 并且它是父relativeLayout，那么只有一个 ImageButton 可以正常工作，另一个 ImageButton 不会扩展它的点击区域。因此，请帮助我了解如何在两个 ImageButtons 中使用 TouchDelegate。如果不可能，那么扩展视图的点击区域的有效方法是什么？预先感谢......

这是我的xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/FrameContainer"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:layout_alignParentLeft="true"
    android:id="@+id/relativeLayout3" android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <RelativeLayout android:layout_alignParentLeft="true"
        android:id="@+id/relativeLayout1" android:layout_width="113dip"
        android:layout_height="25dip">
        <ImageButton android:id="@+id/tutorial1"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:background="@null" android:src="@drawable/tutorial" />
    </RelativeLayout>
    <RelativeLayout android:layout_alignParentLeft="true"
        android:id="@+id/relativeLayout2" android:layout_width="113dip"
        android:layout_height="25dip" android:layout_marginLeft="100dip">
        <ImageButton android:id="@+id/tutorial2"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:background="@null" android:src="@drawable/tutorial"
            android:layout_marginLeft="50dip" />
    </RelativeLayout>
</RelativeLayout>

我的活动课程：

import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.TouchDelegate;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class TestTouchDelegate extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    View mParent1 = findViewById(R.id.relativeLayout1);
    mParent1.post(new Runnable() {
        @Override
        public void run() {
            Rect bounds1 = new Rect();
            ImageButton mTutorialButton1 = (ImageButton) findViewById(R.id.tutorial1);
            mTutorialButton1.setEnabled(true);
            mTutorialButton1.setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    Toast.makeText(TestTouchDelegate.this, "Test TouchDelegate 1", Toast.LENGTH_SHORT).show();
                }
            });

            mTutorialButton1.getHitRect(bounds1);
            bounds1.right += 50;
            TouchDelegate touchDelegate1 = new TouchDelegate(bounds1, mTutorialButton1);

            if (View.class.isInstance(mTutorialButton1.getParent())) {
                ((View) mTutorialButton1.getParent()).setTouchDelegate(touchDelegate1);
            }
        }
    });

    //View mParent = findViewById(R.id.FrameContainer);
    View mParent2 = findViewById(R.id.relativeLayout2);
    mParent2.post(new Runnable() {
        @Override
        public void run() {
            Rect bounds2 = new Rect();
            ImageButton mTutorialButton2 = (ImageButton) findViewById(R.id.tutorial2);
            mTutorialButton2.setEnabled(true);
            mTutorialButton2.setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    Toast.makeText(TestTouchDelegate.this, "Test TouchDelegate 2", Toast.LENGTH_SHORT).show();
                }
            });

            mTutorialButton2.getHitRect(bounds2);
            bounds2.left += 50;
            TouchDelegate touchDelegate2 = new TouchDelegate(bounds2, mTutorialButton2);

            if (View.class.isInstance(mTutorialButton2.getParent())) {
                ((View) mTutorialButton2.getParent()).setTouchDelegate(touchDelegate2);
            }
        }
    });

}

}

Answer 1

每个视图应该只有一个触摸委托。 View 类中 getTouchDelegate() 的文档如下：

“获取此 View 的 TouchDelegate”。

只能有一个 TouchDelegate。要每个视图仅使用一个 TouchDelegate，您可以将每个可触摸视图包装在一个视图中，其尺寸反映您想要可触摸的内容。 说明如何仅使用一个静态方法对多个视图执行此操作 (http://www.youtube.com/watch?v=jF6Ad4GYjRU&t=37m4s)

  public static void expandTouchArea(final View bigView, final View smallView, final int extraPadding) {
bigView.post(new Runnable() {
    @Override
    public void run() {
        Rect rect = new Rect();
        smallView.getHitRect(rect);
        rect.top -= extraPadding;
        rect.left -= extraPadding;
        rect.right += extraPadding;
        rect.bottom += extraPadding;
        bigView.setTouchDelegate(new TouchDelegate(rect, smallView));
    }
});

：

square 的一位 Android 开发人员给出了一个示例， 不想弄乱你的视图层次结构。我还能想到另外两个选择。您可以定义可触摸视图内可触摸内容的边界，并确保将所有触摸事件从相应的父视图传递到该子视图。或者您可以覆盖可触摸视图的 getHitRect() 。前者会很快使您的代码变得混乱并使其难以理解，因此后者是更好的前进方向。您想要重写 getHitRect。

其中 mPadding 是您希望在视图周围可触摸的额外区域的数量，您可以使用如下所示的内容：

    @Override
public void getHitRect(Rect outRect) {
    outRect.set(getLeft() - mPadding, getTop() - mPadding, getRight() + mPadding, getTop() + mPadding);
}

如果您使用类似上面的代码，您将必须考虑附近有哪些可触摸视图。堆栈最高的视图的可触摸区域可能会重叠在另一个视图的顶部。

另一个类似的选项是仅更改可触摸视图的填充。我不喜欢将此作为解决方案，因为跟踪视图大小的调整方式可能会变得困难。

Answer 2

@need1milliondollars 答案的 Kotlin 版本：

class TouchDelegateComposite(view: View) : TouchDelegate(Rect(), view) {

    private val delegates: MutableList<TouchDelegate> = ArrayList()

    fun addDelegate(delegate: TouchDelegate) {
        delegates.add(delegate)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        var res = false
        val x = event.x
        val y = event.y
        for (delegate in delegates) {
            event.setLocation(x, y)
            res = delegate.onTouchEvent(event) || res
        }
        return res
    }
}

Answer 3

完全可用的 Kotlin 扩展功能，允许多个视图将其触摸目标增加相同的量：

// Example of usage
parentLayout.increaseHitAreaForViews(views = *arrayOf(myFirstView, mySecondView, myThirdView))

/*
 * Use this function if a parent view contains more than one view that
 * needs to increase its touch target hit area.
 *
 * Call this on the parent view
 */
fun View.increaseHitAreaForViews(@DimenRes radiusIncreaseDpRes: Int = R.dimen.touch_target_default_radius_increase, vararg views: View) {
    val increasedRadiusPixels = resources.getDimensionPixelSize(radiusIncreaseDpRes)
    val touchDelegateComposite = TouchDelegateComposite(this)
    post {
        views.forEach { view ->
            val rect = Rect()
            view.getHitRect(rect)
            rect.top -= increasedRadiusPixels
            rect.left -= increasedRadiusPixels
            rect.bottom += increasedRadiusPixels
            rect.right += increasedRadiusPixels
            touchDelegateComposite.addDelegate(TouchDelegate(rect, view))
        }
        touchDelegate = touchDelegateComposite
    }
}

class TouchDelegateComposite(view: View) : TouchDelegate(Rect(), view) {
    private val delegates = mutableListOf<TouchDelegate>()

    fun addDelegate(delegate: TouchDelegate) {
        delegates.add(delegate)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        var res = false
        for (delegate in delegates) {
            event.setLocation(event.x, event.y)
            res = delegate.onTouchEvent(event) || res
        }
        return res
    }
}

Answer 4

为了使您的代码正常工作，您需要减少 bounds2 的左边框，而不是增加它。

bounds2.left -= 50;

在尝试了 TouchDelegate 之后，我找到了下面的代码，它在任何 Android 版本上都适用。诀窍是在调用布局后扩展保证的区域。

public class ViewUtils {

    public static final void extendTouchArea(final View view, 
            final int padding) {

        view.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {

            @Override
            @SuppressWarnings("deprecation")
            public void onGlobalLayout() {
                final Rect touchArea = new Rect();
                view.getHitRect(touchArea);
                touchArea.top -= padding;
                touchArea.bottom += padding;
                touchArea.left -= padding;
                touchArea.right += padding;

                final TouchDelegate touchDelegate = 
                    new TouchDelegate(touchArea, view);
                final View parent = (View) view.getParent();
                parent.setTouchDelegate(touchDelegate);

                view.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });
    }

}

Answer 5

这似乎对我有用 http:// /cyrilmottier.com/2012/02/16/listview-tips-tricks-5-enlarged-touchable-areas/

Answer 6

好吧，我想没有人提供真正的答案来解决它并使其变得容易。最近我遇到了同样的问题，阅读了上面的所有内容，我只是不知道如何让它工作。但最后我做到了。首先要记住的事情你的想法！让我们假设你有一个完整的布局，其中包含必须扩展的两个小按钮，因此你必须在主布局中创建另一个布局，并将另一个按钮放入新创建的布局中，因此在这种情况下使用静态方法你可以同时将触摸委托给 2 个按钮现在更深入地一步步进入代码！
首先，您肯定会找到像这样的 MAINLAYOUT 和按钮的视图。（此布局将保存我们的第一个按钮）

RelativeLayout mymainlayout = (RelativeLayout)findViewById(R.id.mymainlayout)
Button mybutoninthislayout = (Button)findViewById(R.id.mybutton)

好的，我们已经找到主布局及其按钮视图，它将保存所有内容，它只是我们的 onCreate()显示布局，但你必须找到以防万一以后使用它。好的，下一步是什么？我们在主布局中创建另一个RelativeLayout，其宽度和高度符合你的口味（这个新创建的布局将容纳我们的第二个按钮）

RelativeLayout myinnerlayout = (RelativeLayout)findViewById(R.id.myinnerlayout)
Button mybuttoninsideinnerlayout = (Button)findViewById(R.id.mysecondbutton)

好的我们完成了找到视图，这样我们现在就可以复制和粘贴首先回答您问题的人的代码。只需将该代码复制到您的主要活动中即可。

 public static void expandTouchArea(final View bigView, final View smallView, final int extraPadding) {
    bigView.post(new Runnable() {
        @Override
        public void run() {
            Rect rect = new Rect();
            smallView.getHitRect(rect);
            rect.top -= extraPadding;
            rect.left -= extraPadding;
            rect.right += extraPadding;
            rect.bottom += extraPadding;
            bigView.setTouchDelegate(new TouchDelegate(rect, smallView));
        }
    });
}

现在如何使用这个方法并使其发挥作用？这就是方法！
在您的 onCreate() 方法上粘贴下一个代码片段

  expandTouchArea(mymainlayout,mybutoninthislayout,60);
  expandTouchArea(myinnerlayout, mybuttoninsideinnerlayout,60);

解释我们在此片段中所做的事情。我们采用了创建的名为 expandTouchArea() 的静态方法并提供了 3 个参数。
第一个参数 - 包含必须扩展区域的按钮的布局
第二个参数 - 扩展其区域的实际按钮
第三个参数 - 我们希望按钮区域扩大多少的区域（以像素为单位）！
享受！

Answer 7

我遇到了同样的问题：尝试为不同的 LinearLayouts 添加多个 TouchDelegates，在一个布局中将触摸事件分别路由到单独的 Switches。

有关详细信息，请参阅我提出的这个问题和我的回答。

我发现的是：一旦我分别用另一个LinearLayout包围LinearLayouts，第二个（每隔一个连续的结束）TouchDelegate 开始按预期工作。

因此，这可能有助于OP为他的问题创建一个可行的解决方案。
但对于它为什么会这样，我还没有一个令人满意的解释。

Answer 8

我复制了 TouchDelegate 的代码并做了一些修改。现在它可以支持多个视图，无论这些视图是否有共同的父视图

class MyTouchDelegate: TouchDelegate {
private var mDelegateViews = ArrayList<View>()

private var mBoundses = ArrayList<Rect>()

private var mSlopBoundses = ArrayList<Rect>()

private var mDelegateTargeted: Boolean = false

val ABOVE = 1
val BELOW = 2
val TO_LEFT = 4
val TO_RIGHT = 8

private var mSlop: Int = 0

constructor(context: Context): super(Rect(), View(context)) {
    mSlop = ViewConfiguration.get(context).scaledTouchSlop
}

fun addTouchDelegate(delegateView: View, bounds: Rect) {
    val slopBounds = Rect(bounds)
    slopBounds.inset(-mSlop, -mSlop)
    mDelegateViews.add(delegateView)
    mSlopBoundses.add(slopBounds)
    mBoundses.add(Rect(bounds))
}

var targetIndex = -1

override fun onTouchEvent(event: MotionEvent): Boolean {
    val x = event.x.toInt()
    val y = event.y.toInt()
    var sendToDelegate = false
    var hit = true
    var handled = false


    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            targetIndex = -1

            for ((index, item) in mBoundses.withIndex()) {
                if (item.contains(x, y)) {
                    mDelegateTargeted = true
                    targetIndex = index
                    sendToDelegate = true
                }
            }
        }
        MotionEvent.ACTION_UP, MotionEvent.ACTION_MOVE -> {
            sendToDelegate = mDelegateTargeted
            if (sendToDelegate) {
                val slopBounds = mSlopBoundses[targetIndex]
                if (!slopBounds.contains(x, y)) {
                    hit = false
                }
            }
        }
        MotionEvent.ACTION_CANCEL -> {
            sendToDelegate = mDelegateTargeted
            mDelegateTargeted = false
        }
    }
    if (sendToDelegate) {
        val delegateView = mDelegateViews[targetIndex]

        if (hit) {
            // Offset event coordinates to be inside the target view
            event.setLocation((delegateView.width / 2).toFloat(), (delegateView.height / 2).toFloat())
        } else {
            // Offset event coordinates to be outside the target view (in case it does
            // something like tracking pressed state)
            val slop = mSlop
            event.setLocation((-(slop * 2)).toFloat(), (-(slop * 2)).toFloat())
        }
        handled = delegateView.dispatchTouchEvent(event)
    }
    return handled
}

}

像这样使用它

  fun expandTouchArea(viewList: List<View>, touchSlop: Int) {


    val rect = Rect()

    viewList.forEach {
        it.getHitRect(rect)
        if (rect.left == rect.right && rect.top == rect.bottom) {
            postDelay(Runnable { expandTouchArea(viewList, touchSlop) }, 200)
            return
        }
        rect.top -= touchSlop
        rect.left -= touchSlop
        rect.right += touchSlop
        rect.bottom += touchSlop

        val parent = it.parent as? View
        if (parent != null) {
            val parentDelegate = parent.touchDelegate
            if (parentDelegate != null) {
                (parentDelegate as? MyTouchDelegate)?.addTouchDelegate(it, rect)
            } else {
                val touchDelegate = MyTouchDelegate(this)
                touchDelegate.addTouchDelegate(it, rect)
                parent.touchDelegate = touchDelegate
            }
        }
    }
}

Answer 9

我从 Brendan Weinstein 上面列出的链接实现了一个简单的解决方案 - 与所有其他解决方案相比，静态方法非常干净整洁。填充对我来说根本不起作用。

我的用例是增加 2 个小按钮的触摸面积以改善用户体验。

我有一个 MyUserInterfaceManager 类，我在其中插入 youtube 视频< /a>;

public static void changeViewsTouchArea(final View newTouchArea, 
                                        final View viewToChange) {
    newTouchArea.post(new Runnable() {
        @Override
        public void run() {
            Rect rect = new Rect(0,0, newTouchArea.getWidth(), newTouchArea.getHeight());       
            newTouchArea.setTouchDelegate(new TouchDelegate(rect, viewToChange));
        }
    });
}

然后在 XML 中我有以下代码（每个图像按钮）；

<!-- constrain touch area to button / view!-->
<FrameLayout
     android:id="@+id/btn_a_touch_area"
     android:layout_width="@dimen/large_touch_area"
     android:layout_height="@dimen/large_touch_area"
/>

<ImageButton
     android:id="@+id/btn_id_here"
     android:layout_width="@dimen/button_size"
     android:layout_height="@dimen/button_size" />

在我的片段的 onCreateView(...) 方法中，我调用了每个需要修改触摸区域的 View 的方法（在绑定两个 Views 之后） >！）；

MyUserInterfaceManager.changeViewsTouchArea(buttonATouchArea, buttonA);

buttonA.setOnClickListener(v -> {
   // add event code here
});

这个解决方案意味着我可以明确地设计和查看布局文件中的触摸区域 - 必须确保我不会太靠近其他View触摸区域（与推荐的“计算和添加像素”方法相比）由谷歌和其他人提供）。

Answer 10

您可以使用复合模式向 View 添加多个 TouchDelegate。步骤：

1. 创建 TouchDelegateComposite （无论您将作为
   参数，它仅用于获取上下文）
2. 创建必要的 TouchDelegates 并将它们添加到复合

3. 按照建议添加复合以查看此处（通过view.post(new Runnable)）

   public class TouchDelegateComposite 扩展 TouchDelegate {
   
       私有最终列表 delegates = new ArrayList();
       私有静态最终矩形空矩形=新矩形（）；
   
       公共 TouchDelegateComposite（查看视图）{
           超级（空矩形，视图）；
       }
   
       公共无效addDelegate（TouchDelegate委托）{
           if (委托！= null) {
               delegates.add(委托);
           }
       }
   
       @覆盖
       公共布尔onTouchEvent（MotionEvent事件）{
           布尔值=假；
           浮动x = event.getX();
           float y = event.getY();
           for (TouchDelegate 委托：委托) {
               event.setLocation(x, y);
               res = delegate.onTouchEvent(事件) ||资源；
           }
           返回资源；
       }
   
   }