自定义按钮背景与对角线切割视图 [英] Custom Button Background with diagonal Cutting View

问题描述

我要设置背景，如图所示

I want to set background as shown in image

我尝试了很多教程，例如

i have tried many tutorial for example

• https://medium.com/@adinugroho/在Android-5a376eca6a1c中创建对角线切割视图
• https://github.com/florent37/DiagonalLayout

• https://medium.com/@adinugroho/create-diagonal-cut-view-in-android-5a376eca6a1c
• https://github.com/florent37/DiagonalLayout

但没有得到正确的结果，任何人都可以帮助我获得完美的结果.

but not getting proper result,can anyone help me to get perfect result.

预先感谢.

推荐答案

更新后的答案

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

Please do note that you may need to tweak the width and height of the Button to make it work for you.

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

You can do this with vector and layer-list drawables.

diagonal_shape

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

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

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>

现在只需在xml中将button_background_layer_list设置为Button背景，例如

Now just set button_background_layer_list as Button background in xml like

android:background="@drawable/button_background_layer_list"

这看起来像这样.

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

The new button after updating the code looks like this, hopefully this is how you want it.

这篇关于自定义按钮背景与对角线切割视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！