web-dev-qa-db-ja.com

GradientColorを使用して、塗りつぶしまたはストロークのグラデーションを完全にXMLで定義できますか？

GradientColorのドキュメントを見ていました https://developer.Android.com/reference/Android/R.styleable.html#GradientColor XMLでグラデーションカラーを定義し、それをXMLベクトルドロウアブルに適用するにはどうすればよいですか？

Color.xml、styles.xml、およびXMLベクトルdrawableで試しました。

「@ id/gradclorをColorStateListに変換できませんでした」というエラーが表示されます。

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

    <path
        Android:name="play_triangle"
        Android:pathData="M 30 30 L 30 90 L 80 60 z"
        Android:strokeColor="@id/gradclor"
        Android:strokeWidth="5"/>

    <color
        Android:name="@+id/gradclor"
        Android:startColor="#FFFFFF"
        Android:endColor="#00FFFF"
        Android:angle="145"/>

</vector>

または「#FFFFFFFF＃00FFFFFF 145をColorStateListに変換できませんでした」を使用する場合：

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

    <path
        Android:name="play_triangle"
        Android:pathData="M 30 30 L 30 90 L 80 60 z"
        Android:strokeColor="@color/GradientStrokeBorder"
        Android:strokeWidth="5"/>

</vector>

color.xmlで次のようにします。

<color name="GradientStrokeBorder">
    <item name="Android:startColor">#FFFFFF</item>
    <item name="Android:endColor">#00FFFF</item>
    <item name="Android:angle">145</item>
</color>
androidxmlandroid-vectordrawable
21
TTransmit

ようやく機能するようになりました。 Android Studio（現在のバージョンは2.2））ではグラデーションカラー機能はまだサポートされていないため、オートコンプリートでは役に立ちませんが、代わりにグラデーションタグをエラーとしてマークします。 Nexus 5X/API 24で正常にテストしました。もちろん、この機能はOSでサポートされていないため、API 24+デバイスを使用する必要があります。

まず、次のようなカラーリソースファイルを追加する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:startColor="#FFFFFF"
    Android:centerColor="#0000FF"
    Android:endColor="#00FFFF"
    Android:angle="145"
    Android:startX="30"
    Android:endX="70"
    Android:startY="30"
    Android:endY="70"
    Android:type="linear"/>

開始/終了パラメーターはベクトルグラデーションに不可欠であることがわかったため、注意してください。

このファイルを名前を付けてres/colorフォルダーに配置します。完全なパスがres/color/gradient.xmlになるように、gradient.xmlという名前を付けました。その後、ベクトルリソースを含む色属性でこのリソースを参照できます。

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

    <path
        Android:name="play_triangle"
        Android:pathData="M 30 30 L 30 90 L 80 60 z"
        Android:strokeWidth="10"
        Android:strokeColor="@color/gradient"/>

</vector>

StrokeColorのグラデーションカラーリソースへの参照に注意してください。お役に立てれば！

33
Alex Kravchenko

Android（3.1 Canary 6）の最新プレビューには、グラデーション付きのベクトルリソースを使用したサンプルが含まれています。

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:aapt="http://schemas.Android.com/aapt"
    Android:width="108dp"
    Android:height="108dp"
    Android:viewportHeight="108"
    Android:viewportWidth="108">
    <path
        Android:fillType="evenOdd"
        Android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
        Android:strokeColor="#00000000"
        Android:strokeWidth="1">
        <aapt:attr name="Android:fillColor">
            <gradient
                Android:endX="78.5885"
                Android:endY="90.9159"
                Android:startX="48.7653"
                Android:startY="61.0927"
                Android:type="linear">
                <item
                    Android:color="#44000000"
                    Android:offset="0.0" />
                <item
                    Android:color="#00000000"
                    Android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
    <path
        Android:fillColor="#FFFFFF"
        Android:fillType="nonZero"
        Android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
        Android:strokeColor="#00000000"
        Android:strokeWidth="1" />
</vector>
11
Steven Spungin

これについてはわかりませんが、 このドキュメント によると：

Android：strokeColorパスアウトラインの描画に使用される色を指定します。 色、またはSDK 24 +の場合は、色の状態リストまたはグラデーションカラー（GradientColorおよびGradientColorItemを参照）。このプロパティがアニメーション化されている場合、アニメーションで設定された値は元の値をオーバーライドします。このプロパティが指定されていない場合、パスのアウトラインは描画されません。

sDKが24未満の場合は、1つの色になります。

一方、SDKが24を超える場合、<gradient/>の代わりにパスを埋める<color/>

3
pouyan