blocks|key|1467099|text|我问了一个在谷歌工作的朋友，他们能帮我弄清楚如何使用TouchDelegate。这是我们想出来的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467100|final+View+parent+=+(View)+delegate.getParent();
parent.post(+new+Runnable()+{
++++//+Post+in+the+parent's+message+queue+to+make+sure+the+parent
++++//+lays+out+its+children+before+we+call+getHitRect()
++++public+void+run()+{
++++++++final+Rect+r+=+new+Rect();
++++++++delegate.getHitRect(r);
++++++++r.top+-=+4;
++++++++r.bottom+%2B=+4;
++++++++parent.setTouchDelegate(+new+TouchDelegate(+r+,+delegate));
++++}
});|code-block|syntax|javascript|1467101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I asked a friend at Google and they were able to help me figure out how to use TouchDelegate. Here's what we came up with:

<pre><code>final View parent = (View) delegate.getParent();
parent.post( new Runnable() {
 // Post in the parent's message queue to make sure the parent
 // lays out its children before we call getHitRect()
 public void run() {
 final Rect r = new Rect();
 delegate.getHitRect(r);
 r.top -= 4;
 r.bottom += 4;
 parent.setTouchDelegate( new TouchDelegate( r , delegate));
 }
});
</code></pre>

blocks|key|1467247|text|如果不想通过编程来实现，那么只需在图像周围创建透明区域，如果您使用图像作为按钮(视图)的背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467248|灰色区域可以是透明的，以增加触摸区域。|1467249|​|1467250|📷|atomic|offset|length|1467251|1467252|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ed5591a55defb996f85eff4760b6801b.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]]]

If don't want to do it programatically then simply create transparent area around the image, If you are using image as background for the button (view).

The grey area can be transparent to increase the touch area.

<img src="https://i.stack.imgur.com/EltWK.png" alt="enter image description here">

blocks|key|1252513|text|此解决方案由@BrendanWeinstein在评论中发布。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1252514|您可以重写View的getHitRect(Rect)方法，而不是发送TouchDelegate+(如果您正在扩展一个方法)。|offset|length|style|CODE|1252515|public+class+MyView+extends+View+{++//NOTE:+any+other+View+can+be+used+here

++++/*+a+lot+of+required+methods+*/

++++@Override
++++public+void+getHitRect(Rect+r)+{
++++++++super.getHitRect(r);+//get+hit+Rect+of+current+View

++++++++if(r+==+null)+{
++++++++++++return;
++++++++}

++++++++/*+Manipulate+with+rect+as+you+wish+*/
++++++++r.top+-=+10;
++++}
}|code-block|syntax|javascript|1252516|entityMap^0|0|5|4|A|G|Y|D|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

This solution was posted by @BrendanWeinstein in comments.

Instead of sending a <code>TouchDelegate</code> you can override <code>getHitRect(Rect)</code> method of your <code>View</code> (in case that you are extending one).

<pre><code>public class MyView extends View { //NOTE: any other View can be used here

 /* a lot of required methods */

 @Override
 public void getHitRect(Rect r) {
 super.getHitRect(r); //get hit Rect of current View

 if(r == null) {
 return;
 }

 /* Manipulate with rect as you wish */
 r.top -= 10;
 }
}
</code></pre>

blocks|key|1252606|text|在大多数情况下，您可以将需要较大触摸区域的视图包装在另一个无头视图(人工透明视图)中，并向包装器视图添加填充/边距，甚至将点击/触摸附加到包装器视图，而不是必须具有较大触摸区域的原始视图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1252607|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In most cases, you can wrap the view that requires a larger touch area in another headless view (artificial transparent view) and add padding/margin to the wrapper view and attach the click/touch even to the wrapper view instead of the original view that has to have a larger touch area.

blocks|key|1252662|text|我能够通过在一个屏幕上使用多个视图(复选框)来实现这一点，这很大程度上来自于this+blog+post。基本上，您采用emmby的解决方案，并将其应用于每个按钮及其父按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1252663|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+%2B=+extraPadding;
++++++++++++rect.bottom+%2B=+extraPadding;
++++++++++++bigView.setTouchDelegate(new+TouchDelegate(rect,+smallView));
++++++++}
+++});
}|code-block|syntax|javascript|1252664|在我的例子中，我有一个覆盖在顶部的复选框的图像视图的网格视图，并按如下方式调用该方法：|1252665|CheckBox+mCheckBox+=+(CheckBox)+convertView.findViewById(R.id.checkBox1);
final+ImageView+imageView+=+(ImageView)+convertView.findViewById(R.id.imageView1);

//+Increase+checkbox+clickable+area
expandTouchArea(imageView,+mCheckBox,+100);|1252666|对我来说效果很好。|1252667|entityMap|0|LINK|mutability|MUTABLE|url|http://www.brendanweinstein.me/2012/06/26/touchdelegate-and-gethitrect-making-buttons-with-expanded-touch-areas/^0|12|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

I was able to accomplish this with multiple views (checkboxes) on one screen drawing largely from <a href="http://www.brendanweinstein.me/2012/06/26/touchdelegate-and-gethitrect-making-buttons-with-expanded-touch-areas/">this blog post</a>. Basically you take emmby's solution and apply it to each button and its parent individually.

<pre><code>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));
 }
 });
}
</code></pre>

In my case I had a gridview of imageviews with checkboxes overlaid on top, and called the method as follows:

<pre><code>CheckBox mCheckBox = (CheckBox) convertView.findViewById(R.id.checkBox1);
final ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView1);

// Increase checkbox clickable area
expandTouchArea(imageView, mCheckBox, 100);
</code></pre>

Working great for me.

blocks|key|1252708|text|emmby的方法对我不起作用，但经过一些修改后，它起到了作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1252709|private+void+initApplyButtonOnClick()+{
++++mApplyButton.setOnClickListener(onApplyClickListener);
++++final+View+parent+=+(View)mApplyButton.getParent();
++++parent.post(new+Runnable()+{

++++++++@Override
++++++++public+void+run()+{
++++++++++++final+Rect+hitRect+=+new+Rect();
++++++++++++parent.getHitRect(hitRect);
++++++++++++hitRect.right+=+hitRect.right+-+hitRect.left;
++++++++++++hitRect.bottom+=+hitRect.bottom+-+hitRect.top;
++++++++++++hitRect.top+=+0;
++++++++++++hitRect.left+=+0;
++++++++++++parent.setTouchDelegate(new+TouchDelegate(hitRect+,+mApplyButton));+++++++++
++++++++}
++++});
}|code-block|syntax|javascript|1252710|也许它可以节省一些人的时间|1252711|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

emmby's approch didn't work for me but after a little changes it did:

<pre><code>private void initApplyButtonOnClick() {
 mApplyButton.setOnClickListener(onApplyClickListener);
 final View parent = (View)mApplyButton.getParent();
 parent.post(new Runnable() {

 @Override
 public void run() {
 final Rect hitRect = new Rect();
 parent.getHitRect(hitRect);
 hitRect.right = hitRect.right - hitRect.left;
 hitRect.bottom = hitRect.bottom - hitRect.top;
 hitRect.top = 0;
 hitRect.left = 0;
 parent.setTouchDelegate(new TouchDelegate(hitRect , mApplyButton)); 
 }
 });
}
</code></pre>

Maybe it can save someone's time

blocks|key|1467573|text|对特定的组件(Button)进行填充不是更好的主意吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467574|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Isn't it the better Idea of giving Padding to that particular component(Button).

blocks|key|1252787|text|参加聚会有点晚了，但经过大量研究，我现在使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1252788|/**
+*+Expand+the+given+child+View's+touchable+area+by+the+given+padding,+by
+*+setting+a+TouchDelegate+on+the+given+ancestor+View+whenever+its+layout
+*+changes.
+*/*emphasized+text*
public+static+void+expandTouchArea(final+View+ancestorView,
++++final+View+childView,+final+Rect+padding)+{

++++ancestorView.getViewTreeObserver().addOnGlobalLayoutListener(
++++++++new+OnGlobalLayoutListener()+{
++++++++++++@Override
++++++++++++public+void+onGlobalLayout()+{
++++++++++++++++TouchDelegate+delegate+=+null;

++++++++++++++++if+(childView.isShown())+{
++++++++++++++++++++//+Get+hitRect+in+parent's+coordinates
++++++++++++++++++++Rect+hitRect+=+new+Rect();
++++++++++++++++++++childView.getHitRect(hitRect);

++++++++++++++++++++//+Translate+to+ancestor's+coordinates
++++++++++++++++++++int+ancestorLoc[]+=+new+int[2];
++++++++++++++++++++ancestorView.getLocationInWindow(ancestorLoc);

++++++++++++++++++++int+parentLoc[]+=+new+int[2];
++++++++++++++++++++((View)childView.getParent()).getLocationInWindow(
++++++++++++++++++++++++parentLoc);

++++++++++++++++++++int+xOffset+=+parentLoc[0]+-+ancestorLoc[0];
++++++++++++++++++++hitRect.left+%2B=+xOffset;
++++++++++++++++++++hitRect.right+%2B=+xOffset;

++++++++++++++++++++int+yOffset+=+parentLoc[1]+-+ancestorLoc[1];
++++++++++++++++++++hitRect.top+%2B=+yOffset;
++++++++++++++++++++hitRect.bottom+%2B=+yOffset;

++++++++++++++++++++//+Add+padding
++++++++++++++++++++hitRect.top+-=+padding.top;
++++++++++++++++++++hitRect.bottom+%2B=+padding.bottom;
++++++++++++++++++++hitRect.left+-=+padding.left;
++++++++++++++++++++hitRect.right+%2B=+padding.right;

++++++++++++++++++++delegate+=+new+TouchDelegate(hitRect,+childView);
++++++++++++++++}

++++++++++++++++ancestorView.setTouchDelegate(delegate);
++++++++++++}
++++++++});
}|code-block|syntax|javascript|1252789|这比接受的解决方案更好，因为它还允许在任何祖先视图上设置TouchDelegate，而不仅仅是父视图。|1252790|与接受的解决方案不同，它还会在祖先视图的布局发生变化时更新TouchDelegate。|1252791|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A bit late to the party, but after much research, I'm now using:

<pre><code>/**
 * Expand the given child View's touchable area by the given padding, by
 * setting a TouchDelegate on the given ancestor View whenever its layout
 * changes.
 */*emphasized text*
public static void expandTouchArea(final View ancestorView,
 final View childView, final Rect padding) {

 ancestorView.getViewTreeObserver().addOnGlobalLayoutListener(
 new OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
 TouchDelegate delegate = null;

 if (childView.isShown()) {
 // Get hitRect in parent's coordinates
 Rect hitRect = new Rect();
 childView.getHitRect(hitRect);

 // Translate to ancestor's coordinates
 int ancestorLoc[] = new int[2];
 ancestorView.getLocationInWindow(ancestorLoc);

 int parentLoc[] = new int[2];
 ((View)childView.getParent()).getLocationInWindow(
 parentLoc);

 int xOffset = parentLoc[0] - ancestorLoc[0];
 hitRect.left += xOffset;
 hitRect.right += xOffset;

 int yOffset = parentLoc[1] - ancestorLoc[1];
 hitRect.top += yOffset;
 hitRect.bottom += yOffset;

 // Add padding
 hitRect.top -= padding.top;
 hitRect.bottom += padding.bottom;
 hitRect.left -= padding.left;
 hitRect.right += padding.right;

 delegate = new TouchDelegate(hitRect, childView);
 }

 ancestorView.setTouchDelegate(delegate);
 }
 });
}
</code></pre>

This is better than the accepted solution because it also allows a TouchDelegate to be set on any ancestor View, not just the parent View.

Unlike the accepted solution, it also updates the TouchDelegate whenever there is a change in the ancestor View's layout.

blocks|key|1467656|text|因为我不喜欢仅仅为了获得TouchDelegate的矩形的新大小而等待布局传递的想法，所以我选择了一个不同的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467657|public+class+TouchSizeIncreaser+extends+FrameLayout+{
++++public+TouchSizeIncreaser(@NonNull+Context+context,+@Nullable+AttributeSet+attrs)+{
++++++++super(context,+attrs);
++++}

++++@Override
++++public+boolean+onInterceptTouchEvent(MotionEvent+event)+{
++++++++return+true;
++++}

++++@Override
++++public+boolean+onTouchEvent(MotionEvent+event)+{
++++++++final+View+child+=+getChildAt(0);
++++++++if(child+!=+null)+{
++++++++++++child.onTouchEvent(event);
++++++++}
++++++++return+true;
++++}
}|code-block|syntax|javascript|1467658|然后，在布局中：|1467659|<ch.tutti.ui.util.TouchSizeIncreaser
++++android:layout_width="wrap_content"
++++android:layout_height="wrap_content"
++++android:padding="10dp">

++++<Spinner
++++++++android:layout_width="wrap_content"
++++++++android:layout_height="wrap_content"
++++++++android:layout_gravity="center"/>
</ch.tutti.ui.util.TouchSizeIncreaser>|1467660|这个想法是，TouchSizeIncreaser+FrameLayout将包装微调器(可以是任何子视图)，并将在其命中rect中捕获的所有触摸事件转发到子视图。它适用于点击，即使在它的边界之外点击，微调器也会打开，不确定对其他更复杂的情况有什么影响。|1467661|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Because I didn't like the idea of waiting for the layout pass just to get the new size of the TouchDelegate's rectangle, I went for a different solution:

<pre><code>public class TouchSizeIncreaser extends FrameLayout {
 public TouchSizeIncreaser(@NonNull Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 }

 @Override
 public boolean onInterceptTouchEvent(MotionEvent event) {
 return true;
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
 final View child = getChildAt(0);
 if(child != null) {
 child.onTouchEvent(event);
 }
 return true;
 }
}
</code></pre>

And then, in a layout:

<pre><code>&lt;ch.tutti.ui.util.TouchSizeIncreaser
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:padding="10dp"&gt;

 &lt;Spinner
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"/&gt;
&lt;/ch.tutti.ui.util.TouchSizeIncreaser&gt;
</code></pre>

The idea is that TouchSizeIncreaser FrameLayout will wrap the Spinner (could be any child View) and forward all the touch events captured in it's hit rect to the child View. It works for clicks, the spinner opens even if clicked outside its bounds, not sure what are the implications for other more complex cases.

My understanding is that when you have a view that's too small to easily touch, you're supposed to use a TouchDelegate to increase the clickable region for that view.

However, searching for usage examples on Google turn up multiple people asking the question, but few answers.

Does anyone know the proper way to set up a touch delegate for a view to, say, increase its clickable region by 4 pixels in every direction?

Is there an example of how to use a TouchDelegate in Android to increase the size of a view's click target?

我的理解是，当你有一个太小而不容易触摸的视图时，你应该使用TouchDelegate来增加该视图的可点击区域。然而，在谷歌上搜索用法示例，会出现多个人问这个问题，但答案很少。有没有人知道为视图设置触摸代理的正确方法，比如说，在每个方向上将其可点击区域增加4个像素？

问有没有一个在Android中使用TouchDelegate来增加视图点击目标大小的例子？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一个在Android中使用TouchDelegate来增加视图点击目标大小的例子？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一个在Android中使用TouchDelegate来增加视图点击目标大小的例子？
EN