Question

我在Sketch中使用Material Theme Editor设计了一个圆角矩形按钮，如下所示：

我已使用this工具将其SVG代码转换为XML，并将其作为常规XML文档添加到我的Android项目中。

当我尝试将该设计应用于按钮时，我认为它是正确的，但是背景将按钮完成为常规矩形，如下所示：

如何从按钮中删除背景，以便我留下像第一张图片一样的按钮？

这是我的SVG代码：

<svg width="104px" height="36px" viewBox="0 0 104 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M18,0 L86,0 C95.9411255,-1.82615513e-15 104,8.0588745 104,18 L104,18 C104,27.9411255 95.9411255,36 86,36 L18,36 C8.0588745,36 1.21743675e-15,27.9411255 0,18 L0,18 C-1.21743675e-15,8.0588745 8.0588745,1.82615513e-15 18,0 Z" id="path-1"></path>
    </defs>
    <g id="Material-Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Buttons" transform="translate(-488.000000, -746.000000)">
            <g id="Buttons-/-Outlined-/-Focused" transform="translate(488.000000, 746.000000)">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <path stroke-opacity="0.12" stroke="#000000" stroke-width="1" d="M18,0.5 C8.33501688,0.5 0.5,8.33501688 0.5,18 C0.5,27.6649831 8.33501688,35.5 18,35.5 L86,35.5 C95.6649831,35.5 103.5,27.6649831 103.5,18 C103.5,8.33501688 95.6649831,0.5 86,0.5 L18,0.5 Z"></path>
                <g id="✱-/-Text-/-Button-/-Primary-/-On-Surface-/-Center" mask="url(#mask-2)" font-family="Rubik-Medium, Rubik" font-size="14.2240084" font-weight="400" letter-spacing="1.25" line-spacing="16">
                    <g transform="translate(16.000000, 10.000000)" id="Button">
                        <text>
                            <tspan x="0" y="13" fill="#000000">BUTTON</tspan>
                        </text>
                    </g>
                </g>
                <g id="✱-/-STATE-OVERLAY-/-Primary-/-Focused" mask="url(#mask-2)" fill="#FFA000" fill-rule="evenodd" opacity="0.12">
                    <g id="✱-/-Color-/-Primary-/-700">
                        <rect id="Rectangle-13" x="0" y="0" width="113" height="36"></rect>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

这是转换后的XML代码：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="104dp"
    android:height="36dp"
    android:viewportWidth="104"
    android:viewportHeight="36">

    <group
        android:translateX="-488.000000"
        android:translateY="-746.000000">
        <group
            android:translateX="488.000000"
            android:translateY="746.000000">
            <path
                android:fillType="evenOdd"
                android:strokeColor="#000000"
                android:strokeAlpha="0.12"
                android:strokeWidth="1"
                android:pathData="M18,0.5 C8.33501688,0.5 0.5,8.33501688 0.5,18 C0.5,27.6649831 8.33501688,35.5 18,35.5 L86,35.5 C95.6649831,35.5 103.5,27.6649831 103.5,18 C103.5,8.33501688 95.6649831,0.5 86,0.5 L18,0.5 Z" />
            <group
                android:translateX="16.000000"
                android:translateY="10.000000">
            </group>
            <path
                android:fillColor="#FFA000"
                android:fillAlpha="0.12"
                android:fillType="evenOdd"
                android:strokeAlpha="0.12"
                android:strokeWidth="1"
                android:pathData="M 0 0 H 113 V 36 H 0 V 0 Z" />
        </group>
    </group>
</vector>

这就是我在按钮中添加背景的方式：

<Button
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/use"
    android:background="@drawable/buttonshape"
    android:text="@string/use"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:padding="8dp"/>

Answer 1

只需将背景形状的相同路径用作边框路径。使用边框pathData放置背景pathData。删除此

android:pathData="M 0 0 H 113 V 36 H 0 V 0 Z"

使用此xml代码。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="104dp"
android:height="36dp"
android:viewportWidth="104"
android:viewportHeight="36">

<group
    android:translateX="-488.000000"
    android:translateY="-746.000000">
    <group
        android:translateX="488.000000"
        android:translateY="746.000000">
        <path
            android:fillType="evenOdd"
            android:strokeColor="#000000"
            android:strokeAlpha="0.12"
            android:strokeWidth="1"
            android:pathData="M18,0.5 C8.33501688,0.5 0.5,8.33501688 0.5,18 C0.5,27.6649831 8.33501688,35.5 18,35.5 L86,35.5 C95.6649831,35.5 103.5,27.6649831 103.5,18 C103.5,8.33501688 95.6649831,0.5 86,0.5 L18,0.5 Z" />
        <group
            android:translateX="16.000000"
            android:translateY="10.000000">
        </group>
        <path
            android:fillColor="#FFA000"
            android:fillAlpha="0.12"
            android:fillType="evenOdd"
            android:strokeAlpha="0.12"
            android:strokeWidth="1"
            android:pathData="M18,0.5 C8.33501688,0.5 0.5,8.33501688 0.5,18 C0.5,27.6649831 8.33501688,35.5 18,35.5 L86,35.5 C95.6649831,35.5 103.5,27.6649831 103.5,18 C103.5,8.33501688 95.6649831,0.5 86,0.5 L18,0.5 Z"
            />
    </group>
 </group>
</vector>

无法从圆角矩形按钮中删除背景

1 个答案: