web-dev-qa-db-ja.com

VectorDrawableが中央揃えではありません

持っていたパスデータを使用してVectorDrawableファイルを作成しました。ただし、問題は、画像が全体の領域の中央に配置されず、代わりに左上に配置されて作成されることです。見てください：

ファイル：

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

    <path
        Android:fillColor="@Android:color/white"
        Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

次に、imageViewのapp：srcCompatとして使用した場合の実際の外観を確認します。 close

VectorDrawablesの経験があまりないので、これを解決する方法はありますか？

どんな種類の助けもいただければ幸いです。

編集：これは私がベクトルドローアブルを使用した方法です。

<ImageView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:srcCompat="@drawable/close_button"/>
androidsvgandroid-vectordrawable
12
KunalK

ベクトルが24x24であることを指定していますが、パスはそれほど大きくありません。実際にその寸法を確認すると、境界ボックスの座標は次のようになります。

     x: -0.034
     y: -0.033
 width: 13.369
height: 13.032

したがって、左上の約13x13の領域しか占有していません。

希望する結果に応じて、これを修正するためのいくつかのオプションがあります。

ソリューション1

アイコンを拡大して24x24のアイコン領域全体を占めるようにする場合は、viewportWidthとviewportHeightをより適切なものに変更すると機能するはずです。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:width="24dp"
    Android:height="24dp"
    Android:viewportHeight="13.4"
    Android:viewportWidth="13.1">

    <path
        Android:fillColor="@Android:color/white"
        Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

ビューポートを変更してここで行ったことは、VectorDrawableの実際のコンテンツが（0,0）から（13.4,13.1）の領域にあることをAndroidに伝えることです）。これは正確ではありません。 、しかしそれはおそらく十分に近いです。Androidは、24x24アイコン領域を埋めるためにその領域のすべてを拡大する必要があります。

ソリューション2

もう1つの解決策は、パスを24x24ビューポートの中央にシフトすることです。 VectorDrawable <group>タグを使用してこれを行うことができます。

パスを移動するパスに平行移動を適用して、パスが中央に配置されるようにする必要があります。

パスの中心は次の場所にあります。

x = -0.034 + 13.369/2
  = 6.651
y = -0.033 + 13.032/2
  = 6.483

それを12,12に移動したいと思います。したがって、適切な量のtranslateXとtranslateYの値を持つグループにパスをラップします。

X軸に沿って（12-6.651）= 5.349だけ右にシフトする必要があり、（12-6.483）= 5.517だけ下にシフトする必要があります。

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

    <group translateX="5.349" translateY="5.517"> 
        <path
            Android:fillColor="@Android:color/white"
            Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

もちろん、これら2つのアプローチを組み合わせるオプションもあります。または、クロスをシフトするだけでなく、少し拡大する必要がある場合は、グループにスケールを追加します。

31
Paul LeBeau

私も同じ問題を抱えていました。 width、height、viewportWidth、viewportHeightを次のように変更しました。

<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="#FFFFFFFF"
    Android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />

</vector>
1
Luke
<group
    Android:pivotX="12"
    Android:pivotY="12"
    Android:scaleX="0.75"
    Android:scaleY="0.75">

<path
    Android:fillColor="@Android:color/white"
    Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
</group>

Groupタグにフォーカスすると、pivotXとpivotYが画像を配置します。viewportHeightとviewportWidthが24の場合、24/2は12であるため、pivotXとpivotY12は画像を中央に配置します:)

もう1つの重要なタグであるscaleXとscaleYは、画像のサイズを拡大縮小します。

1
Shishir Shetty

これを試して：

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

    <group
          Android:name="randomname"
          Android:pivotX="12.0"
          Android:pivotY="12.0">

    <path
        Android:fillColor="@Android:color/white"
        Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

または、ImageViewにlayout_gravity="center"を追加します

1
Josef Korbel

これは、パスデータの先頭にある[〜＃〜] m [〜＃〜]のx値とy値を調整することで実現できます。

これが<group>よりも優れていることを示唆しているわけではありませんが、状況によっては役立つことがわかった代替ソリューションです。

元のパス：

<path
        Android:fillColor="@Android:color/white"
        Android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

同じパスを右に100、下に200に調整：

<path
        Android:fillColor="@Android:color/white"
        Android:pathData="M107.144375,206.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

注：他の回答は、調整するXとYの正しい量を計算する方法をすでに示しています。この回答は、調整を実装する別の方法を示しているだけです。

0
Brian Davis