如何在Android中制作自定义形状的可点击 View 或按钮?

当我单击时,我要避免触摸空白区域。

请帮忙。谢谢你。

最佳答案

有趣的问题。我尝试了一些解决方案,这就是我发现的结果与您要达到的目标相同的结果。下面的解决方案解决了2个问题:

  • 呈现时的自定义形状
  • 按钮的右上角不应是可点击的

  • 因此,这是3个步骤的解决方案:

    步骤1

    创建两个形状。
  • 按钮的第一个简单矩形形状: shape_button_beer.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <gradient
            android:angle="90"
            android:endColor="#C5D9F4"
            android:startColor="#DCE5FD" />
    
        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="5dp" >
        </corners>
    
    </shape>
    
  • 第二个形状用作按钮右上角的 mask : shape_button_beer_mask.xml 。它是带有黑色纯色的简单圆圈。
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" >
    
        <solid android:color="#000000" />
    
    </shape>
    

  • 第2步

    在主布局中,按以下方法添加按钮:
  • RelativeLayout是此自定义按钮
  • 的容器
  • 第一个LinearLayout是
  • 中带有啤酒图标和文本的蓝色按钮
  • 第二个ImageView是蓝色按钮上方的 mask 。这是肮脏的把戏:
  • 边距为负数,以将 mask 设置在正确的位置
  • 我们定义ID,以便在点击时可以覆盖(请参阅第3步)
  • android:soundEffectsEnabled="false"-这样用户就不会觉得自己踩了东西。

  • XML:
        <!-- Custom Button -->
        <RelativeLayout
            android:layout_width="120dp"
            android:layout_height="80dp" >
    
            <LinearLayout
                android:id="@+id/custom_buttom"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/shape_button_beer" >
    
                <!-- Beer icon and all other stuff -->
    
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="15dp"
                    android:src="@drawable/beer_icon" />
            </LinearLayout>
    
            <ImageView
                android:id="@+id/do_nothing"
                android:layout_width="120dp"
                android:layout_height="100dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="-50dp"
                android:layout_marginTop="-50dp"
                android:background="@drawable/shape_button_beer_mask"
                android:soundEffectsEnabled="false" >
            </ImageView>
        </RelativeLayout>
        <!-- End Custom Button -->
    

    第三步

    在您的主要 Activity 中,为按钮和 mask 定义点击事件,如下所示:
    LinearLayout customButton = (LinearLayout) findViewById(R.id.custom_buttom);
    customButton.setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View arg0)
        {
            Toast.makeText(getApplicationContext(), "Clicked", Toast.LENGTH_SHORT).show();
        }
    });
    
    // Mask on click will do nothing
    ImageView doNothing = (ImageView) findViewById(R.id.do_nothing);
    doNothing.setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View arg0)
        {
            // DO NOTHING
        }
    });
    

    而已。我知道这不是一个完美的解决方案,但是在您描述的用例中它可能会有所帮助。
    我已经在手机上对其进行了测试,这是您单击蓝色区域时的外观,而在其他区域则什么也不会发生:

  • 希望它能以某种方式有所帮助:)

    10-07 19:41
    查看更多