Android的自定义形状按钮(Android Custom Shape Button)

2019-07-05 04:06发布

站内文章 / 后端开发
27 0 0

我怎样才能使字形的Android点击视图或按钮自定义？

当我点击，我想避免触及的空白区域。

请帮忙。 谢谢。

Answer 1:

有趣的问题。 我尝试了一些解决方案，这就是我发现，有你想达到什么样的结果相同。 下面的解决方案解决了两个问题：

  1. 自定义形状您介绍它
  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>

  • 第二形状被用作掩模的按钮顶部右侧：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的是上述的蓝色按钮掩模。 这里来使坏：
    1. 利润率是负的设定遮挡在正确的地方
    2. 我们定义ID是在点击能够覆盖（见第3步）
    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 -->

第3步

在您的主要活动定义在两个click事件：按钮和掩码如下： 

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

而已。 我知道这是不是一个完美的解决方案，但在你的描述使用情况下，它可能会有所帮助。 我已经测试了我的手机，这是当你点击蓝色区域，什么都不会发生在其他地区它的外观：

希望它在某种程度上帮助:)



Answer 2:

使用OnTouch代替的OnClick和检查已在button.If使用图像的Alpha值的不等于零，做你想做的。 检查followig代码， 

final Bitmap bitmap;  //Declare bitmap     
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.TheImage);


public boolean onTouch(View v, MotionEvent event) {

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

        switch (eventPadTouch) {

            case MotionEvent.ACTION_DOWN:
                if (iX>=0 & iY>=0 & iX<bitmap.getWidth() & iY<bitmap.getHeight()) { //Makes sure that X and Y are not less than 0, and no more than the height and width of the image.                
                    if (bitmap.getPixel((int) iX, (int) iY)!=0) {
                        // actual image area is clicked(alpha not equal to 0), do something 
                    }               
                }
                return true;                
        }           
        return false;
}


Answer 3:

ü可以试试这个： 

        <Button
        android:id="@+id/logout"
        android:layout_width="240dp"
        android:layout_height="28dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="ContactsDetails"
        android:textColor="#ffffff" android:layout_marginLeft="50dp" android:background="@drawable/round"/>

并创建文件夹绘制文件round.xml： 

        <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" android:padding="0dp" android:useLevel = "false">
    <!-- you can use any color you want I used here gray color-->
     <solid android:color="#ABABAB"/> 
       <corners
       android:bottomRightRadius="0dp"
         android:bottomLeftRadius="0dp"
       android:topLeftRadius="0dp"
      android:topRightRadius="70dp"/>
       </shape>


Answer 4:

使用图层列表，你可以设计任何形状这里的任何渐变按钮顶部是例子

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

                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="2dp"
                android:bottomRightRadius="15dp"
                />            
            <!-- The border color -->
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item android:right="2dp"
        android:left="2dp"
        android:bottom="2dp">
            <shape>            
            <gradient                
                android:startColor="#002a36"
                android:centerColor="#457c8e"
                android:endColor="#e6ffff"               
                android:angle="90" 
                  android:centerY="1"
                android:centerX="0.5"           
                />          

            <corners

                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="2dp"
                android:bottomRightRadius="15dp"
                />            
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" 
                />                        
        </shape>
    </item>
</layer-list>

使用-ve半径值，使按钮形状如u提及



Answer 5:

我有一个类似的问题，但我不想依赖于后面的代码审查的像素值。 我想要一个简单的方法（不超载类），以限制触摸事件仅可拉伸的子部件。 下面我用一个LinearLayout中的绘制，然后里面，我把一个透明的按钮（文字）。 我可以调整按钮的边缘定位可点击区域。 

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="@drawable/circle">
        <Button
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:id="@+id/btnTimer1"
            android:text="0:00"
            android:textColor="#ffffff"
            android:textSize="22dp"
            android:layout_margin="20dp"
            android:background="@android:color/transparent"/>
    </LinearLayout>


Answer 6:

最好的和最简单的解决方案（as4me），我发现在这里-这是子类的按钮 ，因此它支持选择。 因此，所有你需要做的是汲取/添加了对应的PNG为每个按钮状态使用选择和XML声明的onClick或代码添加OnClickListener，你准备好去。



Answer 7:

而不是做所有这些变化，你应该围绕该按钮的部分使用框架布局，并掩盖了一些啄（圆形，像一个圆形按钮）的右上部分和一部分分配不点击收听。 这实际上隐藏下部框架（即原来的按钮）和面具它与非活性部。



Answer 8:

我试图通过@Basim谢里夫（答案链接 ），它的伟大工程，但只有在按钮的大小是一样的原始图像。 如果按钮被拉长了，则点击范围将更小，如果按钮被设置为较小的大小可点击的区域会比实际的按钮更大。

该解决方案是简单其缩放Ix和Iy值，以匹配原始位图。

这里是我的代码修改后的版本： 

final Bitmap bitmap;  //Declare bitmap     
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.TheImage);

public boolean onTouch(View v, MotionEvent event) {

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

    // Get the dimensions used in the view
    int realW = this.getWidth();
    int realH = this.getHeight();

    // Get the dimensions of the actual image
    int bitmapW = bitmap.getWidth();
    int bitmapH = bitmap.getHeight();

    // Scale the coordinates from the view to match the actual image
    float scaledX = iX * bitmapW / realW;
    float scaledY = iY * bitmapH / realH;

    switch (eventPadTouch) {
        case MotionEvent.ACTION_DOWN:
            if (scaledX >= 0 & scaledY >= 0 & scaledX < bitmap.getWidth() & scaledY < bitmap.getHeight()) { //Makes sure that X and Y are not less than 0, and no more than the height and width of the image.                
                if (bitmap.getPixel((int) scaledX, (int) scaledY)!=0) {
                    // actual image area is clicked(alpha not equal to 0), do something 
                }
            }
            return true;
    }
    return false;
}


文章来源: Android Custom Shape Button
标签： android android-layout android-widget onclicklistener android-custom-view
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~