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分发的话可能就不那么容易理解为什么会这么做。