从一个布局讲起
最近要实现如下图所示的布局:
底部按钮使用TextView实现, 按钮数量及文案长度不确定, 要求左右两侧间距相同, 每个按钮之间间距等分.
对于这种布局, 如果只想使用原生的布局方式来做, 会比较恶心, ConstraintLayout能做到, 但有些大炮打蚊子的感觉, 索性直接使用一个横向的LinearLayout, 修改他的onLayout方法手动进行布局, 只用十几行代码就搞定了.
由于布局的要求是按钮间间距等分, 因此TextView的宽高全部使用WRAP_CONTENT, 这样在测量的时候, 拿到的是按钮自己的宽高, 能很容易算出间距, 但这样会带来一个问题: 按钮的点击区域太小, 如下图所示:
由于按钮的文字大小并不大, 实际使用的时候经常点不到按钮上面, 因此需要扩大触摸区域, 要让按钮的点击区域尽可能的大.
一般情况下, 我们扩大触摸区域都是给按钮加padding, 也就是说按钮的实际宽高会比视觉上看到的要大一些, 这种做法可行的前提是按钮的大小和位置确定. 而这个布局本身需要视觉上按钮和按钮之间间距等分, 且按钮的数量不确定, 按钮的文案长度不确定, 不能提前知道间距的大小, 因此我们不能通过改变按钮的大小来做. 如果在测量时动态改变大小, 又会重新触发一轮新的测量, 逻辑上需要区分两次测量, 增加了复杂度, 因此我直接排除了给按钮加padding的方案.
尝试TouchDelegate
既然不能通过改变按钮大小来扩大触摸区域, 那么自然就想到了使用TouchDelegate.
public TouchDelegate(Rect bounds, View delegateView)
一般而言, 用的时候delegateView为需要扩大触摸区域的View. bounds为扩大后的点击区域在父控件中的Rect, 这个TouchDelegate最终设给父控件.
+------------------------------------------------------+
| |
| |
| +-------------------------+ |
| | | |
| | +---------+ | |
| | | | | |
| | | 按钮A | 区域B | 父控件C |
| | | | | |
| | +---------+ | |
| | | |
| | | |
| +-------------------------+ |
| |
| |
+------------------------------------------------------+
例如对于上图的情况, 父控件C中有一个按钮A, 希望把A的触摸区域扩到到B, 此时bounds为B在C中的Rect, delegateView为A, 而TouchDelegate设置给C.
TouchDelegate这东西在我的印象里, 一直就是和扩大触摸区域绑定的东西, 因为除了谈扩大触摸区域, 其他的事情基本不会和TouchDelegate扯上关系.
包括TouchDelegate的注释也是这么说的:
Helper class to handle situations where you want a view to have a larger touch area than its actual view bounds. The view whose touch area is changed is called the delegate view.
看起来似乎只要给布局中的每个按钮都用一个TouchDelegate扩大触摸区域就行.
然而实际上TouchDelegate的并不能满足这种情况.
正如TouchDelegate的名字所暗示的, 他是一个touch事件的代理, 相关代码如下:
// View.java
public boolean onTouchEvent(MotionEvent event) {
......
if (mTouchDelegate != null) {
if (mTouchDelegate.onTouchEvent(event)) {
return true;
}
}
......
}
从上面的代码可以看出, TouchDelegate使得一个View A能把自己的触摸事件代理给另一个View B, 而且一个View只能设置一个TouchDelegate.
当View B为View A的子View或子View的子View时, 如果Rect比View B的大小要大, 恰好能起到扩大View B触摸区域的作用, 所以扩大触摸区域只是TouchDelegate的一个特殊用法.
然而由于一个View只能设置一个TouchDelegate, 使得用TouchDelegate扩大触摸区域这个功能有点古怪. 就拿上面看到的布局来说, 需要扩大触摸区域的View不止一个, 而一个父控件只能允许一个子View扩大触摸区域, 并不符合我的需求.
组合TouchDelegate
既然一个View只能设置一个TouchDelegate, 而我们又需要扩大多个按钮的点击区域, 可以将多个TouchDelegate组合在一个TouchDelegate里设置给被代理的View.
public class TouchDelegateComposite extends TouchDelegate {
private final List<TouchDelegate> mDelegates = new ArrayList<TouchDelegate>(8);
public TouchDelegateComposite(@NonNull View view) {
super(null, view);
}
public void addDelegate(@NonNull TouchDelegate delegate) {
mDelegates.add(delegate);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
for (TouchDelegate delegate : mDelegates) {
if (delegate.onTouchEvent(event)) {
return true;
}
}
return false;
}
}
这段代码看起来很美好, 然而并不能正常工作. 代码的本意是把代理的event分发给每个TouchDelegate, 并在遇到有TouchDelegate能处理该事件的时候停止派发, 返回结果.
思路是正确的, 但是实现细节有问题, 由于TouchDelegate的onTouchEvent源码比较简单, 这里直接完整贴出来:
// TouchDelegate.java 8.1.0_r33
public boolean onTouchEvent(MotionEvent event) {
int x = (int)event.getX();
int y = (int)event.getY();
boolean sendToDelegate = false;
boolean hit = true;
boolean handled = false;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Rect bounds = mBounds;
if (bounds.contains(x, y)) {
mDelegateTargeted = true;
sendToDelegate = true;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_MOVE:
sendToDelegate = mDelegateTargeted;
if (sendToDelegate) {
Rect slopBounds = mSlopBounds;
if (!slopBounds.contains(x, y)) {
hit = false;
}
}
break;
case MotionEvent.ACTION_CANCEL:
sendToDelegate = mDelegateTargeted;
mDelegateTargeted = false;
break;
}
if (sendToDelegate) {
final View delegateView = mDelegateView;
if (hit) {
// Offset event coordinates to be inside the target view
event.setLocation(delegateView.getWidth() / 2, delegateView.getHeight() / 2);
} else {
// Offset event coordinates to be outside the target view (in case it does
// something like tracking pressed state)
int slop = mSlop;
event.setLocation(-(slop * 2), -(slop * 2));
}
handled = delegateView.dispatchTouchEvent(event);
}
return handled;
}
上面可以很明显的看到TouchDelegate在派发事件给子View前, 会调整传入event的坐标, 因此在外部如果想多次派发event, 需要还原event的坐标, 避免坐标错乱, 修改后的代码如下:
@Override
public boolean onTouchEvent(MotionEvent event) {
final float x = event.getX();
final float y = event.getY();
for (TouchDelegate delegate : mDelegates) {
event.setLocation(x, y);
if (delegate.onTouchEvent(event)) {
return true;
}
}
return false;
}
坐标的问题解决了, 代码执行起来看起来挺正常. 但依然有巨大的问题.
TouchDelegate的缺陷
不知道是因为用的少还是大家没有发现, TouchDelegate本身有一个很致命的问题: 给一个View设置TouchDelegate会导致该View在一种特殊情况下无法响应点击事件.
还是刚才的图:
+------------------------------------------------------+
| |
| |
| +-------------------------+ |
| | | |
| | +---------+ | |
| | | | | |
| | | 按钮A | 区域B | 父控件C |
| | | | | |
| | +---------+ | |
| | | |
| | | |
| +-------------------------+ |
| |
| |
+------------------------------------------------------+
假如现在使用TouchDelegate将A的触摸区域扩大到B, 且A, C控件都可以响应点击事件.
如果用户点击A区域, 再点击C区域, 两个点击事件都能触发.
如果用户点击扩展区域B(不包括A), 此后当用户点击C控件, 将无法触发C的点击事件.
根本原因在于TouchDelegate中成员变量mDelegateTargeted没有在收到DOWN事件时重置为false.
仔细看源码:
// TouchDelegate.java 8.1.0_r33
public boolean onTouchEvent(MotionEvent event) {
int x = (int)event.getX();
int y = (int)event.getY();
boolean sendToDelegate = false;
boolean hit = true;
boolean handled = false;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Rect bounds = mBounds;
if (bounds.contains(x, y)) {
mDelegateTargeted = true;
sendToDelegate = true;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_MOVE:
sendToDelegate = mDelegateTargeted;
if (sendToDelegate) {
Rect slopBounds = mSlopBounds;
if (!slopBounds.contains(x, y)) {
hit = false;
}
}
break;
case MotionEvent.ACTION_CANCEL:
sendToDelegate = mDelegateTargeted;
mDelegateTargeted = false;
break;
}
if (sendToDelegate) {
final View delegateView = mDelegateView;
if (hit) {
// Offset event coordinates to be inside the target view
event.setLocation(delegateView.getWidth() / 2, delegateView.getHeight() / 2);
} else {
// Offset event coordinates to be outside the target view (in case it does
// something like tracking pressed state)
int slop = mSlop;
event.setLocation(-(slop * 2), -(slop * 2));
}
handled = delegateView.dispatchTouchEvent(event);
}
return handled;
}
mDelegateTargeted只有在ACTION_CANCEL的时候才置false, 而一般情况下我们不会遇到ACTION_CANCEL, 一旦mDelegateTargeted被置true, 基本就恒为true了. 那么当用户点击一个不在代理区内的坐标时, ACTION_DOWN对应分支的代码不会执行, 因为不在Rect里. 又由于mDelegateTargeted为true, ACTION_MOVE和ACTION_UP会导致sendToDelegate置true, 执行派发事件代码, 并返回结果, 由于可点击的View默认吃全部事件, 因此返回值一定为true.
回到View.java里:
// View.java
public boolean onTouchEvent(MotionEvent event) {
......
if (mTouchDelegate != null) {
if (mTouchDelegate.onTouchEvent(event)) {
return true;
}
}
......
}
这就导致设置了TouchDelegate的View自身的onTouchEvent除了ACTION_DOWN能自己处理, 其他事件全被TouchDelegate吃掉了.
也就是说, 如果用户通过扩展区域B触发了A的点击事件, 将会导致C永远无法触发点击事件, 原因就是mDelegateTargeted被置true后基本没有机会重置.
之所以点击A区域不会造成这个bug, 是因为TouchDelegate拦截的是C控件的onTouchEvent, 如果用户点A区域, 事件将由C直接派发给A, A在onTouchEvent里直接消耗了用户的触摸事件, C的onTouchEvent不会收到该轮触摸事件, 这是基本的事件分发流程, 就不在这里赘述了.
对组合TouchDelegate的影响
由于TouchDelegate#onTouchEvent的返回值在某些不应该返回true的情况下, 会返回true. 如果组合TouchDelegate遇到TouchDelegate#onTouchEvent返回true的时候就停止分发, 那么可能会出现一种奇怪的现象, 用户点击其他子View后无法触发点击事件.
拿下面的图举个例子:
+-----------------------------------------------------------------------------------+
| 父控件C |
| |
| +-------------------------+ +-------------------------+ |
| | | | | |
| | +---------+ | | +---------+ | |
| | | | | | | | | |
| | | 按钮A | 区域B | | | 按钮D | 区域E | |
| | | | | | | | | |
| | +---------+ | | +---------+ | |
| | | | | |
| | | | | |
| +-------------------------+ +-------------------------+ |
| |
| |
+-----------------------------------------------------------------------------------+
父控件C设置了一个组合TouchDelegate, 分别将A, D的触摸区域扩大为B, E.
当用户先点点击扩展区域B(点击发生在B区域内部, A区域外部), 再点击扩展区域E(点击发生在E区域内部, D区域外部), 按钮D只收得到ACTION_DOWN事件, 收不到ACTION_MOVE和ACITON_UP事件, 因为按钮A的TouchDelegate在收到ACTION_DOWN时返回false, 在收到ACTION_MOVE和ACTION_UP时返回true. 此时按钮D的点击事件无法正常触发. 但点击按钮D是能正常触发D的点击事件的, 因为此时事件直接由C派发给了D, 没有经过C的onTouchEvent.
修改方案也很简单, 将事件派发给全部TouchDelegate, 最终代码如下:
public class TouchDelegateComposite extends TouchDelegate {
private final List<TouchDelegate> mDelegates = new ArrayList<TouchDelegate>(8);
public TouchDelegateComposite(@NonNull View view) {
super(null, view);
}
public void addDelegate(@NonNull TouchDelegate delegate) {
mDelegates.add(delegate);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
boolean res = false;
float x = event.getX();
float y = event.getY();
for (TouchDelegate delegate : mDelegates) {
event.setLocation(x, y);
res = delegate.onTouchEvent(event) || res;
}
return res;
}
}
官方修复
之前我贴出来的代码是Android 8.1的, 在Android 9.0上, Google终于发现并修复了这个问题, 下面是9.0上的TouchDelegate相关代码:
// TouchDelegate.java 9.0.0_r3
public boolean onTouchEvent(MotionEvent event) {
...
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
mDelegateTargeted = mBounds.contains(x, y);
sendToDelegate = mDelegateTargeted;
break;
...
}
...
}
可以看到这个版本的TouchDelegate修复了mDelegateTargeted没有重置的问题, 不再会因为点击扩展区域, 导致父控件的点击事件无法触发.