具有对角线切割视图的自定义按钮背景

Question

我想设置背景如图

我试过很多教程，例如

但是没有得到正确的结果，谁能帮我得到完美的结果。

提前致谢。

Answer 1

更新的答案

请注意，您可能需要调整 Button 的 width 和 height 以使其适合您。

您可以使用 vector 和 layer-list 可绘制对象执行此操作。

diagonal_shape

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="80dp"
    android:viewportWidth="52.652084"
    android:viewportHeight="21.166666">
    <path
        android:fillColor="#F48733"
        android:pathData="M31.214,0.036 L2.229,0.027C0.332,0.026 0.104,0.811 0.101,1.862l-0.047,16.618c-0.003,1.466 -0.185,2.731 1.932,2.729L51.342,21.175c1.381,0.096 1.798,-0.748 0.581,-2.647L45.639,9.214 40.544,1.907C39.687,0.67 39.285,0.305 38.061,0.138 36.744,-0.042 34.414,0.081 31.214,0.036Z"
        android:strokeWidth="1.11766827"/>
</vector>

ic_arrow_forward

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

button_background_layer_list

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

    <item
        android:gravity="end"
        android:left="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#3B5998" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/diagonal_shape"
        android:gravity="start"
        android:right="20dp" />

    <item
        android:drawable="@drawable/ic_arrow_forward"
        android:gravity="end|center_vertical"
        android:right="5dp" />

</layer-list>

现在只需将 button_background_layer_list 设置为 Button 在 xml 中的背景 like

android:background="@drawable/button_background_layer_list"

看起来像这样。

更新代码后的新按钮如下所示，希望这是您想要的。

具有对角线切割视图的自定义按钮背景

Custom Button Background with diagonal Cutting View

android

android-canvas

android-drawable