Android不规则点击区域详解

Android不规则点击区域详解

摘要

今天要和你们分享的是Android不规则点击区域，准确说是在视觉上不规则的图像点击响应区域分发。

其实这个问题比较简单，对于不少人来讲根本不值得作为一篇博文写出来，但在个人群里确实有童鞋不了解如何实现而且很想知道完整的流程是什么样的，故完成demo做为参考。

如下篇幅记录我的分析流程。

 

咱们的需求。

 

咱们须要实现chrome这样的不一样颜色区域点击响应不一样的事件。Chrome中分别点击红色、黄色、绿色、蓝色进行不一样的事件响应。

通过咱们对android组件的了解，组件都是矩形的（即便看上去不是矩形），因此点击区域也是一个矩形。

 

实现原理。

就原理上讨论的话我认为有两种方式比较简单，一种是利用数学线性规划，另外一种是经过像素颜色判断。固然两种都有使用的范围和优缺点，今天就只针对像素颜色判断进行讲解。

咱们把chrome的颜色作成4张图（也就是4个图层），每张图都只有一种颜色（准确说是必定范围的颜色），而且每张图的大小都是同样的，颜色的位置相对效果图是一致的，其余用透明像素，这样作是为了方便贴图。而后点击的时候判断点击的颜色是不是透明就能够了，若是是透明那么不处理点击事件，若是不是透明那么须要处理事件。

 

实践切图。

切图的最终效果以下：（四周的灰色是图的范围，实际并无颜色是透明的）

 

 

程序判断透明。

为了方便管理，因此直接把判断部分写在组件内部，也就是自定义组件。程序比较简单，直接上代码。

package com.vane.ui.widget;

 

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Color;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.graphics.drawable.StateListDrawable;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.widget.FrameLayout;

 

public class MenuViewItem extends FrameLayout {

 

    private int width = -1;

    private int height = -1;

    private Bitmap bitmap;

 

    public MenuViewItem(Context context) {

        super( context);

    }

 

    public MenuViewItem(Context context, AttributeSet attrs, int defStyle) {

        super( context, attrs, defStyle);

    }

 

    public MenuViewItem(Context context, AttributeSet attrs) {

        super( context, attrs);

    }

 

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();

        if(action != MotionEvent.ACTION_DOWN) {

            return super.onTouchEvent( event);

        }

        int x = (int)event.getX();

        int y = (int)event.getY();

        if(width == -1 || height == -1) {

            Drawable drawable = ((StateListDrawable)getBackground()).getCurrent();

            bitmap = ((BitmapDrawable)drawable).getBitmap();

            width = getWidth();

            height = getHeight();

        }

        if(null == bitmap || x < 0 || y < 0 || x >= width || y >= height) {

            return false;

        }

        int pixel = bitmap.getPixel( x, y);

        if(Color.TRANSPARENT == pixel) {

            return false;

        }

        return super.onTouchEvent( event);

    }

}

 

Drawable drawable = ((StateListDrawable)getBackground()).getCurrent(); 由于我用的背景是selector，若是你用的不是selector那么能够把这段代码你实际设置的背景的drawable类型。这里惟一须要说明的是onTouchEvent方法，返回true表示组件须要拦截touch事件，返回false表示不拦截那么事件会继续分发到viewgroup中的其余child去。程序中有段

 

如何使用。

使用也很简单，直接贴出activity_main.l布局文件。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

 

    <com.vane.ui.widget.MenuViewItem

        android:id="@+id/menu_1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/chrome_1" />

 

    <com.vane.ui.widget.MenuViewItem

        android:id="@+id/menu_2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/chrome_2" />

 

    <com.vane.ui.widget.MenuViewItem

        android:id="@+id/menu_3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/chrome_3" />

 

    <com.vane.ui.widget.MenuViewItem

        android:id="@+id/menu_4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/chrome_4" />

 

</FrameLayout>

 

chrome_1.xml资源以下：布局里面的背景是selector，下面贴出一个的相应资源结构，其余的都是同样的。

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 

    <item android:drawable="@drawable/chrome_1_s" android:state_pressed="true"/>

    <item android:drawable="@drawable/chrome_1_n"/>

 

</selector>

 

这里面仅仅是按下和非按下状态的不一样资源。

 

完整demo。

扯淡的代码就不说了，demo使用的资源都是上文中讲的，直接贴代码。

 

 

package com.vane.demo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
    
    private Toast mToast;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState);
        setContentView( R.layout.activity_main);
        findViewById( R.id.menu_1).setOnClickListener( this);
        findViewById( R.id.menu_2).setOnClickListener( this);
        findViewById( R.id.menu_3).setOnClickListener( this);
        findViewById( R.id.menu_4).setOnClickListener( this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate( R.menu.main, menu);
        return true;
    }

    @Override
    public void onClick(View v) {
        if(null != mToast) {
            mToast.cancel();
        }
        switch(v.getId()) {
            case R.id.menu_1:
                mToast = Toast.makeText( this, "red", Toast.LENGTH_SHORT);
                break;
            case R.id.menu_2:
                mToast = Toast.makeText( this, "yellow", Toast.LENGTH_SHORT);
                break;
            case R.id.menu_3:
                mToast = Toast.makeText( this, "green", Toast.LENGTH_SHORT);
                break;
            case R.id.menu_4:
                mToast = Toast.makeText( this, "blue", Toast.LENGTH_SHORT);
                break;
        }
        mToast.show();
    }
}

 

 

demo的实现效果。 

 左图是正常截图，右图是点击在红色区域上的截图。

 

总结。

不规则点击区域的本质是图像像素判断是不是指定颜色（本例中是透明），而后进行touch事件的分发处理。固然如何你不了解touch分发的话可能就不那么容易理解为何会这么作。 

若是文中有任何疑问或者不妥之处欢迎留言交流。在此也留下QQ群311536202,欢迎交流。