Android可以响应局部部分点击事件的ViewImageView

Posted 2022-11-30 CodingForAndroid

有些场景，需要一张图片部分可点击，这样就需要自己提前确定可响应点击范围。
这里以ImageView 为例，讲一下部分可点击事件。

看下效果：
我这里一张顶部图片，有个输入框元素，如果元素要一个个叠加的话，会比麻烦，直接用一张图片做背景就比较省事，只要处理下 只响应输入框这一部分的点击效果。

首先布局文件中：

    <com.xxx.widget.PartClickImageView
        android:clickable="true"
        android:id="@+id/view_top_bg"
        android:layout_width="match_parent"
        android:layout_height="185dp"
        android:background="@drawable/bg_main_tab_top" />

ImageView 通过重写 onTouchEvent 在ACTION_DOWN、ACTION_MOVE、ACTION_UP、ACTION_CANCEL中判断是否满足条件，满足条件可点击，否则不可响应点击效果。

public class PartClickImageView extends ImageView 
    private float x;//点击范围的左上角距离屏幕左侧的宽度
    private float y;//点击范围的左上角距离屏幕顶部的高度
    private float width;//点击范围的宽度
    private float height;//点击范围的高度
    private boolean clickable = false;
    //点击事，如果移动范围在可接受范围内，可以响应点击事件
    private int acceptRange = 0;
    private OnRangeClickListener onRangeClickListener;

    public void setOnRangeClickListener(OnRangeClickListener onRangeClickListener) 
        this.onRangeClickListener = onRangeClickListener;
    

    //向外暴露的方法设置ImageView的点击范围
    public void setClickRange(float x, float y, float width, float height,int range) 
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        acceptRange = range;
   

    public PartClickImageView(Context context) 
        super(context);
    

    //给自定义的View设置点击事件
    public PartClickImageView(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    public PartClickImageView(Context context, AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
    

    float downX=0f,downY=0f;
    @Override
    public boolean onTouchEvent(MotionEvent event) 

        switch (event.getAction()) 
            case MotionEvent.ACTION_DOWN: //0
                downX = event.getX();
                downY = event.getY();
                clickable = true;
                break;
            case MotionEvent.ACTION_MOVE://2
                float tempX = event.getX();
                float tempY = event.getY();
                if(Math.abs(tempX-downX)>acceptRange||Math.abs(tempY-downY)>acceptRange)
                    clickable = false;
                
                break;
            case MotionEvent.ACTION_UP://1
                float currentX = event.getX();
                float currentY = event.getY();

                if (clickable&&currentX > x && currentX < (x + width) && currentY > y && currentY < (y + height)) 
                    //在点击范围内，触发点击事件
                    onRangeClickListener.onClickImage(this);
                
                break;
            case MotionEvent.ACTION_CANCEL://3
                clickable = false;
                break;
        return super.onTouchEvent(event);
    

    //重新定义图片的点击事件
    public interface OnRangeClickListener 
        void onClickImage(View view);
    

使用：

  float x = 20*ScreenUtil.getScreenWidth()/360;
  float y = 110*ScreenUtil.getScreenWidth()/360;
  float width = ScreenUtil.getScreenWidth() - 2*x;
  float height = 50*ScreenUtil.getScreenWidth()/360;
  //设置点击区域
  holder.mViewTopBg.setClickRange(x,y ,width,height,0);
  holder.mViewTopBg.setOnRangeClickListener(new PartClickImageView.OnRangeClickListener() 
      @Override
      public void onClickImage(View view) 
              
      
  );

KT版本：

class PartClickImageView2 : ImageView 
    /**
     * 点击范围的左上角距离屏幕左侧的宽度
     */
    private var left = 0f

    /**
     * 点击范围的左上角距离屏幕顶部的高度
     */
    private var top = 0f

    /**
     * 点击范围的宽度
     */
    private var width = 0f

    /**
     * 点击范围的高度
     */
    private var height = 0f

    /**
     * 是否可点击
     */
    private var enable = false

    /**
     * 点击事，如果移动范围在可接受范围内，可以响应点击事件
     */
    private var acceptRange = 0
    private var onRangeClickListener: OnRangeClickListener? = null
    fun setOnRangeClickListener(onRangeClickListener: OnRangeClickListener?) 
        this.onRangeClickListener = onRangeClickListener
    

    //向外暴露的方法设置ImageView的点击范围
    fun setClickRange(x: Float, y: Float, width: Float, height: Float, range: Int) 
        this.left = x
        this.top = y
        this.width = width
        this.height = height
        acceptRange = range
    

    constructor(context: Context?) : super(context) 

    //给自定义的View设置点击事件
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) 
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) 

    var downX = 0f
    var downY = 0f

    override fun onTouchEvent(event: MotionEvent): Boolean 
        when (event.action) 
            MotionEvent.ACTION_DOWN -> 
                downX = event.x
                downY = event.y
                enable = true
            
            MotionEvent.ACTION_MOVE -> 
                val tempX = event.x
                val tempY = event.y
                if (Math.abs(tempX - downX) > acceptRange || Math.abs(tempY - downY) > acceptRange) 
                    enable = false
                
            
            MotionEvent.ACTION_UP -> 
                val currentX = event.x
                val currentY = event.y
                if (enable && currentX > left && currentX < left + width && currentY > top && currentY < top + height) 
                    //在点击范围内，触发点击事件
                    onRangeClickListener!!.onClickImage(this)
                
            
            MotionEvent.ACTION_CANCEL -> enable = false
        
        return super.onTouchEvent(event)
    

    //重新定义图片的点击事件
    interface OnRangeClickListener 
        fun onClickImage(view: View?)
    

如果你也热衷技术欢迎加群一起进步：230274309 。 一起分享，一起进步！少划水，多晒干货！！欢迎大家！！！(进群潜水者勿加)

点击链接加入群聊【编程之美】：https://jq.qq.com/?_wv=1027&k=h75BfFCg

或者扫码