在我的VectorDrawable图像周围创建细的矩形边框线

时间:2018-08-25 19:29:37

标签: android svg android-vectordrawable

我想在我当前正在使用的VectorDrawable图像文件周围创建一个矩形边框,但是到目前为止我还做不到。

这是我的图像xml文件:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">


        <path
            android:fillColor="@color/white_white"
            android:pathData="M17,8c0.552,0 1,0.449 1,1s-0.448,1 -1,1 -1,-0.449 -1,-1 0.448,-1 1,-1zM17,6c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM7,12c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM17,4c0.343,0 0.677,0.035 1,0.101v-2.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v2.101c0.323,-0.066 0.657,-0.101 1,-0.101zM7,10c0.343,0 0.677,0.035 1,0.101v-8.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v8.101c0.323,-0.066 0.657,-0.101 1,-0.101zM17,14c-0.343,0 -0.677,-0.035 -1,-0.101v8.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-8.101c-0.323,0.066 -0.657,0.101 -1,0.101zM7,20c-0.343,0 -0.677,-0.035 -1,-0.101v2.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-2.101c-0.323,0.066 -0.657,0.101 -1,0.101z" />

</vector>

这是我到目前为止尝试过的:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <group android:name="groupName">

        <path
            android:strokeWidth="2"
            android:strokeColor="@color/white_white"/>

        <path
            android:fillColor="@color/white_white"
            android:pathData="M17,8c0.552,0 1,0.449 1,1s-0.448,1 -1,1 -1,-0.449 -1,-1 0.448,-1 1,-1zM17,6c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM7,12c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM17,4c0.343,0 0.677,0.035 1,0.101v-2.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v2.101c0.323,-0.066 0.657,-0.101 1,-0.101zM7,10c0.343,0 0.677,0.035 1,0.101v-8.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v8.101c0.323,-0.066 0.657,-0.101 1,-0.101zM17,14c-0.343,0 -0.677,-0.035 -1,-0.101v8.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-8.101c-0.323,0.066 -0.657,0.101 -1,0.101zM7,20c-0.343,0 -0.677,-0.035 -1,-0.101v2.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-2.101c-0.323,0.066 -0.657,0.101 -1,0.101z" />
    </group>

</vector>

但是它不起作用。

1 个答案:

答案 0 :(得分:1)

如果我理解正确,则您有一些可绘制的矢量,并且希望给它一个白色的矩形边框。在这种情况下,我建议使用layerdrawable,它可以通过编程方式完成,但也可以通过制作以下layer-list xml文件来完成:

yourvector_withbackground.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/yourvector"
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"></item>
    <item android:drawable="@drawable/background"></item>
</layer-list>

此层列表xml只是将两个drawable放在彼此的顶部,项的顺序决定了哪个在前景中,哪个在背景中。 “ 5dp”为可绘制对象添加了填充,帮助您将矢量放置在边框内。可绘制的 yourvector.xml 是您的原始矢量可绘制图形,而 background.xml 包含边框,并显示在下面的代码中:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <stroke android:width="1dip" android:color="@color/white"/>
</shape>
相关问题