web-dev-qa-db-fra.com

GradientColor peut-il être utilisé pour définir un dégradé pour un remplissage ou un trait entièrement en XML?

Je regardais la documentation de GradientColor https://developer.Android.com/reference/Android/R.styleable.html#GradientColor . Comment puis-je définir une couleur de dégradé en XML et l'appliquer à un vecteur XML dessinable?

J'ai essayé dans color.xml, styles.xml et dans un vecteur XML dessinable.

J'obtiens l'erreur "Impossible de convertir @ id/gradclor en ColorStateList" avec:

<?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>

ou "Impossible de convertir #FFFFFFFF # 00FFFFFF 145 en ColorStateList" lors de l'utilisation:

<?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>

avec ce qui suit dans 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

Je l'ai finalement fait fonctionner. La fonctionnalité de dégradé de couleurs n'est pas encore prise en charge dans Android Studio (la version actuelle est 2.2), donc elle ne vous aide pas à la saisie semi-automatique, mais marque la balise de dégradé comme une erreur à la place. Néanmoins, la fonctionnalité fonctionne réellement, Je l'ai testé avec succès sur Nexus 5X/API 24. Bien sûr, vous devez utiliser un appareil API 24+ car sinon cette fonctionnalité n'est pas prise en charge par le système d'exploitation.

Tout d'abord, vous devez ajouter un fichier de ressources de couleur comme ceci:

<?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"/>

Veuillez faire attention aux paramètres de début/fin car j'ai trouvé qu'ils sont essentiels pour les dégradés vectoriels.

Placez ce fichier dans le dossier res/color sous un nom. Je l'ai nommé gradient.xml donc le chemin complet est res/color/gradient.xml. Après cela, vous pouvez vous référer à cette ressource dans les attributs de couleur, y compris les couleurs de chemin vectoriel:

<?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>

Notez la référence à la ressource de couleur de dégradé dans strokeColor. J'espère que cela t'aides!

33
Alex Kravchenko

Le dernier aperçu de Android (3.1 Canary 6) contient un échantillon utilisant une ressource vectorielle avec un gradient.

<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

Je ne suis pas sûr de cela, mais selon ce document :

Android: strokeColor Spécifie la couleur utilisée pour dessiner le contour du chemin. Peut être une couleur ou, pour SDK 24 + , une liste d'état des couleurs ou une couleur dégradée (voir GradientColor et GradientColorItem). Si cette propriété est animée, toute valeur définie par l'animation remplacera la valeur d'origine. Aucun contour de chemin n'est dessiné si cette propriété n'est pas spécifiée.

si votre sdk est <24, il devrait être d'une seule couleur.

par contre si votre sdk est supérieur à 24, je pense que ce serait mieux d'utiliser <gradient/> pour remplir votre chemin au lieu de <color/>

3
pouyan