代码之家  ›  专栏  ›  技术社区  ›  Ido Naveh

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

  •  0
  • Ido Naveh  · 技术社区  · 7 年前

    我在草图中使用材质主题编辑器设计了一个圆角矩形按钮,如下所示:

    enter image description here

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

    当我试图将该设计应用于按钮时,我得到了正确的结果,但是有了一个背景,可以将按钮完整地应用于一个规则的矩形,如下所示:

    enter image description here

    如何从按钮中删除背景,以便留下第一个图像这样的按钮?

    这是我的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"/>
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   Abu Yousuf    7 年前

    只需对背景形状使用与边框路径相同的路径。替换背景 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>