Android开发之不规则图形按钮响应

这是我在网上找了不少资料后，总结下来的简单不规则图形按钮制作方法。

如果我们想在安卓开发时设计漂亮的按钮，很可能会用到图片按钮，但是图片按钮响应区域是长方形的，比如下图

如果里面的月亮和云彩是用图片按钮制作，我们点击月亮中间空白部分，月亮按钮会响应，但是我们希望只有黄色部分是可以响应的。

简单思路：把月亮中间空白部分设置为透明，通过判断点击点颜色是否透明的方法，考虑是否做出响应。

设计思路：

在ontouch中可以获得触摸点的view和motionevent，我们用motionevent的getx（）和gety（）获得点击点相对点击对象View的x和y值，用getpixel(x,y)方法获得点击点对应的颜色（bitmap类中才有获得当前点击点的颜色方法getPixel(x,y)，所以要把按钮背景转换成bitmap）。

对应完整代码如下：

public class MainActivity extends AppCompatActivity implements View.OnTouchListener{
    Drawable drawable;
    Bitmap bitmap;
    int pixel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(layout.activity_main);
        //隐藏导航栏
        ActionBar actionBar=getSupportActionBar();
        assert actionBar!=null;
        actionBar.hide();

        findViewById(id.iv_moon).setOnTouchListener(this);
        findViewById(id.iv_tower).setOnTouchListener(this);
        findViewById(id.iv_wind1).setOnTouchListener(this);
        findViewById(id.iv_wind2).setOnTouchListener(this);
        findViewById(id.iv_wind3).setOnTouchListener(this);
        findViewById(id.iv_wind4).setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction()==MotionEvent.ACTION_DOWN){
            int x=(int)event.getX();  //这个坐标是点击点在View v里的坐标。
            int y=(int)event.getY();
            switch (v.getId()){
                case R.id.iv_moon:
                    drawable=getDrawable(R.drawable.moon);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT)
                        Toast.makeText(MainActivity.this,"你点击了月亮",Toast.LENGTH_SHORT).show();
                    break;
                case id.iv_tower:
                    drawable=getDrawable(R.drawable.tower);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT)
                    {
                        Intent intent=new Intent(MainActivity.this,PlayActivity.class);
                        startActivity(intent);
                    }
                    break;
                case id.iv_wind1:
                    drawable=getDrawable(R.drawable.wind1);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT){
                        Intent intent=new Intent(MainActivity.this,SettingActivity.class);
                        startActivity(intent);
                    }
                    break;
                case id.iv_wind2:
                    drawable=getDrawable(R.drawable.wind2);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT)
                        Toast.makeText(MainActivity.this,"你点击了云2",Toast.LENGTH_SHORT).show();
                    break;
                case id.iv_wind3:
                    drawable=getDrawable(R.drawable.wind3);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT)
                        Toast.makeText(MainActivity.this,"你点击了云3",Toast.LENGTH_SHORT).show();
                    break;
                case id.iv_wind4:
                    drawable=getDrawable(R.drawable.wind4);
                    bitmap = ((BitmapDrawable)drawable).getBitmap();
                    pixel=bitmap.getPixel(x,y);
                    if(pixel!=Color.TRANSPARENT)
                        Toast.makeText(MainActivity.this,"你点击了云4",Toast.LENGTH_SHORT).show();
                    break;
            }}
        return false;
    }
}

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#252B75"
    tools:context="com.tianxi.prisonerofhell.activitys.MainActivity">
    <ImageView
        android:id="@+id/iv_moon"
        android:src="@drawable/moon"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/iv_wind1"
        android:src="@drawable/wind1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="0dp"/>
    <ImageView
        android:id="@+id/iv_wind2"
        android:src="@drawable/wind2"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/iv_sea4"
        android:src="@drawable/sea4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="0dp"
        android:layout_marginBottom="20dp"
        />
    <ImageView
        android:id="@+id/iv_sea3"
        android:src="@drawable/sea3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="0dp"
        android:layout_marginBottom="15dp"
        />
    <ImageView
        android:id="@+id/iv_sea2"
        android:src="@drawable/sea2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="25dp"
        android:layout_marginBottom="0dp"

        />
    <ImageView
        android:id="@+id/iv_tower"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@drawable/tower" />
    <ImageView
        android:id="@+id/iv_wind3"
        android:src="@drawable/wind3"
        android:layout_gravity="right"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"/>
    <ImageView
        android:id="@+id/iv_wind4"
        android:src="@drawable/wind4"
        android:layout_gravity="right"
        android:layout_marginTop="10dp"
        android:layout_marginRight="0dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"/>
    <ImageView
        android:id="@+id/iv_sea1"
        android:src="@drawable/sea1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
       android:adjustViewBounds="true"
        />
</FrameLayout>

注意事项：

1.图片格式要用png，因为这种格式有透明度。

2.Imageview不能设置maxheight和maxwidth进行缩放，这会导致点击区域和响应区域不一致问题，原因我还不懂，希望有大佬能指出。

3.我只是刚学Android的新手，本文章可能存在很多问题，欢迎一起讨论更好的解决思路和方法。

这是上面的两个代码和素材下载（代码可以直接在上面复制呀！）点击打开链接