如何扩大一个view的touch和click响应区域

原创 2013年12月02日 21:39:55

今天有这么一个需求,需要让界面上的一个图标的响应区域变大,比如图标是50*50的,响应区域要变成100*100。


一开始最简单的思路是直接将ImageView的大小设置为响应区域的大小,并且让src居中显示在响应区域中心。

可是由于图标的大小和相应区域的大小要根据不同分辨率来适配。这样的话不同分辨率手机上,图标大小肯定像素值一样了。这样肯定不行。

所以为了让图标的大小和响应区域都可以自由定制,所以以下的思路就呼之欲出,用一个响应区域大小的View该在图标上,并且两者居中对齐。让View来获取Touch和Click回调,并且将回调适当的传递给图标来响应图标自身的响应事件。对应的界面布局例如以下:


<RelativeLayout
    android:layout_width="62dip"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/btn_read"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <View
    android:id="@+id/btn_read_area"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

</RelativeLayout>
其中btn_read_area就是用来拦截事件的View,而btn_read就是用来相应真正事件的icon。


我的真正的方法如下:

/**
 * 在两个界面中建立一个事件传递管道,让另一个界面能在这个界面的区域响应自己的点击事件
 * @param srcView
 * @param targetView
 */
private void buildClickChannelFor2View(final View srcView,final View targetView) {
    if( null == srcView || null == targetView) {
        return;
    }
    srcView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            int action = motionEvent.getAction();
            if (MotionEvent.ACTION_DOWN == action) {
                targetView.onTouchEvent(motionEvent);
            } else if (MotionEvent.ACTION_UP == action) {
                targetView.onTouchEvent(motionEvent);
            }

            //移出srcView视图以外时,恢复普通状态并且不响应onclick事件
            float x = motionEvent.getX();
            float y = motionEvent.getY();
            if (x < srcView.getLeft() || x > srcView.getRight()
                    || y < srcView.getTop() || y > srcView.getBottom()) {
                return targetView.onTouchEvent(motionEvent);
            }

            return false;
        }
    });

    srcView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            targetView.performClick();
        }
    });

}



使用时,只要调用该方法将两个按钮关联起来就行了,如:

mReadBtn = (XImageView) view.findViewById(R.id.btn_read);
mReadBtnArea = (View) view.findViewById(R.id.btn_read_area);
buildClickChannelFor2View(mReadBtnArea, mReadBtn);







View的Click,LongClick,Touch事件的研究

概述我们都知道一个View有以下三个事件监听方法:setOnClickListener(); setOnLongClickListener(); setOnTouchListener();每一个方法代...
  • DevWiki
  • DevWiki
  • 2015年05月25日 08:01
  • 900

使用TouchDelegate扩大View的点击区域

使用TouchDelegate扩大View的点击区域 在日常开发中,经常会遇到View的触摸区域过小要求放大触摸区域的需求。 虽然在很多时候可以通过嵌套Layout来完成,但是这种方法无疑增...

移动端touch事件和click事件的区别

移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:    ...

移动端touch事件影响click事件的相关解决方法

http://blog.csdn.net/feniuben/article/details/21159271 主题 JavaScript  上周做了一个项目,发现一个DOM元素触发...
  • kepoon
  • kepoon
  • 2017年03月29日 11:42
  • 3436

手机web开发,click,touch,tap事件浅析

一、click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。 singleTap和doubleTap...

fastclick.js移动端WEB开发,click,touch,tap事件浅析

一、click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。singleTap和doubleTap 分别代...
  • cometwo
  • cometwo
  • 2016年01月18日 09:32
  • 7299

用 TouchDelegate 扩大子 View 的点击区域

点击区域的大小会影响到用户体验,除了扩大可点击 View 的 padding 之外,今天偶遇另一种方法,在父 View 级别增大子 View 的点击区域。gist 被墙,csdn code 402,暂...
  • zhaizu
  • zhaizu
  • 2015年11月19日 17:46
  • 1238

touch事件影响click事件探究

项目中遇到touch事件影响click事件的问题,输入密码后(错误的密码),点击确认支付,马上就触发了忘记密码按钮了,这显然不是我们想要的。我们想要的是用户输错密码后,用户点击忘记密码才触发事件。往下...

移动端web开发,click touch tap区别

移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件...
  • sly94
  • sly94
  • 2016年06月17日 17:58
  • 9062

移动端touch事件和click事件的区别

移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何扩大一个view的touch和click响应区域
举报原因:
原因补充:

(最多只允许输入30个字)