如何扩大一个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);







iOS开发小记:运用Runtime机制扩大UIButton的响应区域

通过OC创建类别的方式,运用Runtime特性,给UIButton增加了一个扩大其点击区域的方法...
  • lala2231
  • lala2231
  • 2016年02月04日 14:28
  • 2081

增加 UIButton 的點擊範圍

有時候我們希望讓 UIButton 的點擊範圍比視覺上還要大 此時可以對 UIButton 建立一個 Category 新增一些 method 來設定點擊範圍 實作 ...
  • jerry19860710
  • jerry19860710
  • 2014年04月02日 15:05
  • 1877

使用android.view.TouchDelegate扩大View的触摸点击区域

Android4.0规定的有效可触摸的UI元素标准是48dp,转化为一个物理尺寸,约为9毫米。建议的目标大小为7~10毫米,这一点与iPhone一致,这是一个用户手指能准确并且舒适触摸的区域。如果所示...
  • tongcpp
  • tongcpp
  • 2014年04月11日 16:30
  • 21121

Android中touch和click事件的区别

http://blog.csdn.net/hufeng882412/article/details/7310142 针对屏幕上的一个View控件,Android如何区分应当触发onTouch...
  • u011023096
  • u011023096
  • 2015年08月07日 10:17
  • 1882

UIButton 扩大按钮的响应区域

第一种方法:创建一个类目:UIButton+EnlargeTouchArea ,用类方法进行调用 使用方法: 导入UIButton+EnlargeTouchArea.h UIButton *butto...
  • u013282507
  • u013282507
  • 2016年04月27日 11:23
  • 2520

扩大button的响应区域

有的时候遇到UE设计特别严格,所给图片有点小而且要符合标注图的设计,所用有button点小的时候,点击事件不够灵敏,就需要来扩大它的相应区域了 #import @interface UIButto...
  • u011731076
  • u011731076
  • 2016年11月03日 15:56
  • 111

扩大文字a链接的可点击区域

我这边扩大可点击区域和网络上的这篇并不一样http://rmingwang.com/a-text-link-to-expand-the-clickable-area.html   很多时候是a和di...
  • orichisonic
  • orichisonic
  • 2015年10月27日 14:20
  • 1136

ios 扩大uibutton的响应区域

转载自: http://wenrisheng.iteye.com/blog/1987996 给UIButton 建立一个Category --UIButton+EnlargeEdge.h ...
  • chenyong05314
  • chenyong05314
  • 2014年10月08日 18:51
  • 6729

Android:Touch和Click的区别 编辑

针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent,还是onClick,亦或是onLongClick事件? 在Android中,一次用户操作可以被不同的View...
  • hufeng882412
  • hufeng882412
  • 2012年03月01日 16:44
  • 6322

Android 扩大ImageView的点击区域

在做Android应用APP开发时,会碰到一种情况,就是ImagView的点击区域很小,用户不容易点击到某个ImageView,怎么样在不改变图像的情况下,扩大ImageView的点击区域呢? ...
  • android_learn
  • android_learn
  • 2013年12月06日 10:43
  • 10834
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何扩大一个view的touch和click响应区域
举报原因:
原因补充:

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