如何在Android中制作相互重叠的自定义形状按钮

Question

我有 6 张带有透明背景的独立图像。如何将所有这些图像作为按钮放在一起，例如：

根据我的阅读，我想我必须使用框架布局才能有重叠的按钮。

我需要每种颜色在单击时都是一个单独的按钮。

更新：我做了一个演示并在 onclick 方法中检查透明 但是，当我单击红色和蓝色交点附近的红色区域时，由于视图重叠，它不会记录单击红色按钮。请帮忙！

https://www.dropbox.com/s/fc98nnnfbrtdh82/Photo%20Apr%2016%2C%202%2002%2013.jpg?dl=0

public boolean onTouch(View v, MotionEvent 事件) {

                                     int eventPadTouch = event.getAction();
                                     int iX = (int)event.getX();
                                     int iY = (int)event.getY();          
                                     switch (eventPadTouch) {

                                         case MotionEvent.ACTION_DOWN:

                                             if (iX>=0 & iY>=0 & iX<TheBitmap.getWidth() & iY<TheBitmap.getHeight()&TheBitmap.getPixel(iX,iY)!=0) {
                                                 if (TheBitmap.getPixel(iX,iY)!=0) {
                                                     Toast.makeText(getApplicationContext(),"clicked blue",Toast.LENGTH_LONG).show();

                                                 }
                                             }
                                             return true;
                                     }

                                     return false;
                                 }
                             }

Answer 1

您需要使用相对布局来使用 ImageView 放置背景图像，如下所示：

activity_layout.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"/> 
</RelativeLayout>

之后，您需要在 drawable 中创建一个单独的 xml 文件，以尽可能接近地定义每个形状，在此处阅读更多相关信息： http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

一个示例形状的 xml 文件应该是这样的

drawable/myshape1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<stroke
  android:width="2dp"
  android:color="#FFFFFF" />

<corners android:radius="5dp" />

<gradient
  android:angle="270"
  android:centerColor="#6E7FFF"
  android:endColor="#142FFC"
  android:startColor="#BAC2FF" /> 
</shape>

最后，在创建完所有形状后，您可以将它们添加到您的 activity_layout.xml 文件中，如下所示：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/bg"/>


        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_margin="20dp"
        android:background="@drawable/myshape1"
        android:orientation="vertical"
        android:padding="5dp" >


</RelativeLayout>

确保创建的形状尽可能透明，并将 onClick 处理程序附加到它们以执行分配的任务。

编辑：

根据您的评论，还有另一种方法可以做到这一点，即覆盖 OnTouch 侦听器，从位图中捕获像素并确定其颜色。

imageView.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
         if (event.getAction() == MotionEvent.ACTION_DOWN){
                ImageView imageView = (ImageView) v;
                Bitmap bitmap =((BitmapDrawable)imageView.getDrawable()).getBitmap();
                int pixel = bitmap.getPixel(event.getX(),event.getY());
                int redValue = Color.red(pixel);
                int blueValue = Color.blue(pixel);
                int greenValue = Color.green(pixel);
//Now that you know the color values you can decide on what you want to do based on the color combination.
         }
         return true;
     }
});

Answer 2

您始终可以使用RelativeLayout 作为包装器，然后将未来按钮添加为子按钮，您可以将它们定位为重叠。

例如：

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    *
    *
    *
</RelativeLayout>

然后您可以使用对齐/边距/坐标定位ImageViews（或Buttons）。

希望对你有帮助。