Android：使用XML定义（drawable）制作一个带有三角形形状的按钮

Question

我想使用按钮（TextView）通过XML定义来创建这个：

在Activity的布局中，我有：

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_arrow" <!-- I NEED IMPLEMENT THIS -->
        android:clickable="true"
        android:drawablePadding="7dp"
        android:gravity="center"
        android:drawableLeft="@drawable/music_cloud"
        android:onClick="exportSong"
        android:padding="20dp"
        android:text="@string/export_upload"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/dark_yellow_text_color"
        android:textStyle="bold" />

我创建了几篇帖子：

使用XML定义创建三角形形状

在Android中，将三角形（箭头）定义为XML形状

或者 Android- 使用XML制作箭头形状

我尝试修改了几个XML定义，但都不好用。有没有更简单的方法来实现这个形状？同时它应该有透明背景。

- Pepa Zapletal

---

xnl形状不是声明所有可绘制对象的“通用”方式，请尝试编写自定义的android.graphics.drawable.shapes.Shape并将其与ShapeDrawable一起使用。 - pskink

Answer 1

如果有人仍然遇到问题：

1. xml:

   <item android:top="45dp">
       <shape>
           <size android:height="100dp" android:width="90dp"/>
           <solid android:color="@android:color/holo_orange_light" />
       </shape>
   </item>
   <item android:top="36dp" android:left="11dp">
       <rotate
           android:fromDegrees="45"
           android:toDegrees="0"
           android:pivotX="80%"
           android:pivotY="20%" >
           <shape>
               <size android:width="40dp"
                   android:height="30dp"/>
               <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>
               <solid android:color="@android:color/holo_orange_light" />
           </shape>
       </rotate>
   </item>
   </layer-list>
   

2. override TextView and use it in your layout:

   public class CustomTextView extends TextView {
   
       private int mWidth;
       private int mHeight;
   
   
       public CustomTextView(Context context, AttributeSet attrs)  {
           super(context, attrs);
   
       }
   
       @Override
       protected void onDraw(Canvas canvas) {
   
          super.onDraw(canvas);
           Paint mPaint = new Paint();
           int color = getResources().getColor(R.color.YourColor);
   
           mPaint.setColor(color);
           Path mPath = new Path();
           mPath.moveTo(.0f, this.getHeight());
           mPath.lineTo(0.8f * this.getWidth(), this.getHeight());
           mPath.lineTo(this.getWidth(), 0.5f * this.getHeight());
           mPath.lineTo(0.8f * this.getWidth(), .0f);
           mPath.lineTo(.0f, .0f);
           mPath.lineTo(.0f, this.getHeight());
   
           canvas.clipPath(mPath);
           canvas.drawPath(mPath,mPaint);
   
   
       }
   }
   

关于XML示例：有两个重叠的矩形。需要大量调整数值，这使得在不同视图上使用变得困难。我认为在这种情况下使用自定义视图是最好的解决方案。

- Hanelore Ianoseck

---

有时候你只需要分解并创建一个自定义视图。感谢您提供了一个漂亮而简单的示例。 - SMBiggs

但是如果我们使用您的代码，似乎属性将会丢失！ - Oussaki

只需在onDraw方法的末尾调用super.onDraw(canvas);，这样就可以使此代码正常工作。 - Oussaki

Answer 2

您也可以使用Material Components库中包含的MaterialButton来实现它。

在您的布局中添加MaterialButton，然后：

• 使用app:icon属性在左侧添加图标
• 应用库提供的Widget.MaterialComponents.Button.Icon 样式
• 使用app:shapeAppearanceOverlay属性定义自定义形状（需要v.1.1.0）

例如：

   <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/ic_add_24px"
        android:text="..."
        app:shapeAppearanceOverlay="@style/CustomShapeAppearanceOverlay.Button"
        .../>

在你的 `styles.xml` 文件中定义了 `shapeAppearanceOverlay` 的位置：

  <style name="CustomShapeAppearanceOverlay.Button" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopRight">18dp</item>
    <item name="cornerSizeBottomRight">18dp</item>
  </style>

最终结果：

- Gabriele Mariotti

---

我们在哪里可以找到cornerFamily？ - Shivam Kumar

@ShivamKumar 需要材料组件 v.1.1.0。 - Gabriele Mariotti

Answer 3

<item>
    <inset android:insetBottom="2dp" >
        <selector xmlns:android="http://schemas.android.com/apk/res/android" >
            <item android:state_pressed="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item android:state_focused="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFD600"
                        android:startColor="#FFD600" />
                </shape>
            </item>
        </selector>
    </inset>
</item>
<item
    android:bottom="65dp"
    android:right="-129dp"
    android:top="-40dp">
    <rotate android:fromDegrees="50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>
<item
    android:bottom="-40dp"
    android:right="-129dp"
    android:top="65dp">
    <rotate android:fromDegrees="-50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>

- Ajay Adkar