Android 自定义形状按钮 [英] Android Custom Shape Button

问题描述

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

How can i make a custom shaped clickable view or button in Android?

当我点击时，我想避免触摸空白区域.

When I click , I want to avoid touching on an empty area .

请帮忙.谢谢你.

推荐答案

有趣的问题.我尝试了一些解决方案，这就是我发现的与您想要实现的结果相同的解决方案.下面的解决方案解决了 2 个问题:

Interesting question. I tried some solutions and this is what I found that has the same result of what you are trying to achieve. The solution below resolves 2 problems:

1. 您呈现的自定义形状
2. 按钮的右上角不应该是可点击的

所以这是三步的解决方案:

So this is the solution in 3 steps:

创建两个形状.

• 按钮的第一个简单矩形形状: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>

第二个形状用作按钮右上角的掩码:shape_button_beer_mask.xml.它是纯黑色的简单圆圈.

Second shape is used as mask for the top right side of the button: shape_button_beer_mask.xml. It is simple circle with black solid color.

<?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>

在您的主布局中通过下一个方法添加按钮:

In your main layout add the button by next approach:

• RelativeLayout 是这个自定义按钮的容器
• 第一个 LinearLayout 是带有啤酒图标和文本的蓝色按钮
• 第二个 ImageView 是蓝色按钮上方的蒙版.肮脏的伎俩来了:

• RelativeLayout is the container of this custom button
• First LinearLayout is the blue button with beer icon and text inside
• Second ImageView is the mask above the blue button. And here comes dirty trick:

1. 将掩码设置在正确位置的边距为负
2. 我们将 id 定义为能够在点击时覆盖(参见第 3 步)
3. android:soundEffectsEnabled="false" - 这样用户就不会觉得他按下了什么.

1. Margins are negative to set the mask in the right place
2. We define id to be able override on click (see step 3)
3. android:soundEffectsEnabled="false" - such that user will not feel that he pressed on something.

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

步骤 3

在您的主要活动中，您为两个按钮和遮罩定义点击事件，如下所示:

Step 3

In your main activity you define on click events for both: button and the mask as follow:

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

就是这样.我知道这不是一个完美的解决方案，但在您描述的用例中它可能会有所帮助.我已经在我的手机上对其进行了测试，这是当您点击蓝色区域时的样子，其他区域不会发生任何事情:

That's it. I know that is not a perfect solution but in your described use case it could help. I have tested it on my mobile and this is how it looks when you click on the blue area and nothing will happen on other areas:

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

Hope it helped somehow :)

这篇关于Android 自定义形状按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！