我可以像使用9补丁一样使用矢量drawable吗?

时间:2016-05-04 19:15:15

标签: android android-vectordrawable

我已经玩了很多9补丁,在为按钮,表格等创建一个漂亮的背景时,它们是一个巨大的解脱。

由于矢量drawable现在可用于大量Android版本的支持库,我期待使用矢量drawables,就像我使用9-patch图像一样。 可悲的是,我没有遇到任何设置内容填充和补丁的可能性......

有没有人设法实现这个9-patch / svg混音?

2 个答案:

答案 0 :(得分:3)

这有点尴尬,但它确实有效。

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

    <item
        android:left="@dimen/speech_bubble_corners_plus_tail"
        android:right="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_spacing"
        tools:width="50dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:left="@dimen/speech_bubble_spacing"
        android:gravity="left"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:top="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="right"
        android:width="@dimen/speech_bubble_corners">
        <shape android:shape="rectangle">
            <solid android:color="@color/speech_bubble_user"/>
        </shape>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:bottom="@dimen/speech_bubble_spacing"
        android:gravity="bottom|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:gravity="top|right">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners"
        android:height="@dimen/speech_bubble_corners"
        android:left="@dimen/speech_bubble_spacing"
        android:gravity="top|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners"
            android:height="@dimen/speech_bubble_corners"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

    <item
        android:width="@dimen/speech_bubble_corners_plus_tail"
        android:height="@dimen/speech_bubble_corners_plus_tail"
        android:gravity="bottom|left">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/speech_bubble_corners_plus_tail"
            android:height="@dimen/speech_bubble_corners_plus_tail"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:pathData="M150,100 L150,0 L50,0 C50,11.9054549 52.5180742,22.2130322 55.2200144,32.2289993 C59.25,47.1679688 65.7054859,60.8615415 68.15625,65.5820312 C55.2200144,107.207031 41.7460938,127.800781 0,151 C61.5311854,147.539062 101.691406,129.675781 124.615295,97.6602593 C132.823321,99.8389881 141.106342,100 150,100 Z"
                android:fillColor="@color/speech_bubble_user"/>
        </vector>
    </item>

</layer-list>

我在dimens.xml中使用了以下内容:

<dimen name="speech_bubble_corners">10dp</dimen>
<dimen name="speech_bubble_corners_plus_tail">15dp</dimen>
<dimen name="speech_bubble_spacing">5dp</dimen>

以下是一个示例:

Two speech bubbles

如果路径可以采用可变的九个补丁部分会更好。看起来它在理论上并不难。每个部分都可以添加+x+y作为添加到pathData中的选项。我想有可能在代码中计算它并以编程方式创建适当的向量,因为它们是需要的。

答案 1 :(得分:0)

您无法将9补丁行为应用于特定区域中的可绘制矢量。 9-patch是为bitmap设计的,而位图只是存储在int [x][y]中的像素网格。对于可调整大小的位图,9patch行为表示&#34;嘿,第12列(9个配对)可以并行复制n次 &#34;然后,图像被拉伸,不再成比例

虽然矢量drawable只是 静态绘图路径定义。结果将始终重新调整并比例到其原始路径,因为路径不会动态更改。