web-dev-qa-db-ja.com

サークル内のベクトル描画可能

既存のベクタードローアブルから内側にアイコンが付いた円であるベクタードローアブルを簡単に生成する方法はありますか？

例： existing vector drawable

generated vector drawable, circle with empty icon inside

androidsvgandroid-vectordrawable
7
qbait

私はこのようなものを提案します：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
    Android:gravity="fill"
    Android:drawable="@drawable/ic_brightness_1_black_24dp"

    />
    <item
        Android:gravity="center"
        Android:drawable="@drawable/ic_call_black_24dp"
        Android:top="20dp"
        Android:bottom="20dp"
        Android:left="20dp"
        Android:right="20dp"
        />

</layer-list>

IDがic_brightness_1_black_24dpおよびic_call_black_24dpのリソースは、インポートされたベクター型ドローアブルです。

ic_brightness_1_black_24dp：

<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="#303F9F"
        Android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>

およびic_call_black_24dp：

<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="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>
10
DimDim

実際には非常に単純です。1つのベクトルに両方のパスを含める必要があるだけなので、パスを使用すると次のようになります。

<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="#303F9F"
        Android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>

    <path
        Android:fillColor="#FFFFFF"
        Android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>

</vector>

結果は、パスのサイズが相互に関連していることに明らかに依存し、グラフィカルツールなしでパスをスケーリングするのは面倒なので、layer-listを使用したDimDimのソリューションの実装は簡単です。

1
javaxian