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

Question

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

androidbuttonandroid-imagebutton

6

我有6张带透明背景的单独图片。如何将这些图片合并为按钮，例如：

enter image description here

根据我阅读的内容，我猜想我需要使用Frame Layout来实现重叠按钮。

当点击时，我需要每个颜色都是单独的按钮。

更新：我制作了一个演示，并在onclick方法中检查透明度，但是当我点击红色和蓝色交界处附近的红色区域时，由于重叠视图，它无法注册为红色按钮被点击。请帮忙！

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

公共布尔型 onTouch(View v, MotionEvent event) {

                                     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;
                                 }
                             }

- kelly rose

你有任何已经尝试过的代码吗？这将有助于其他人回答你的问题。 - Juan Carlos Farah

我没有时间去找出并写出答案，但你可以在谷歌上搜索“android非矩形按钮”。那里的stackoverflow问题会指引你正确的方向。由于你所有的按钮都是不同颜色的，一个想法是在onTouch事件中获取颜色。 - Suragch

2个回答

0

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

例如：

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

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

你可以使用对齐/边距/坐标来定位ImageView（或Button）。

希望这有所帮助。

- khumche

谢谢，我创建了两个重叠的测试按钮，但是当点击重叠区域时（例如，如果我点击靠近蓝色区域的红色区域），由于它仍然在蓝色形状的矩形区域内，所以什么也不会发生。你知道怎么解决吗？ - kelly rose

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tarek · Accepted Answer

您需要使用相对布局来使用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;
     }
});