2016-11-29 32 views
8

Przeglądałem dokumentację dla GradientColor https://developer.android.com/reference/android/R.styleable.html#GradientColor. Jak zdefiniować kolor gradientu w XML i zastosować go do rysowania wektorowego XML?Czy GradientColor może zostać użyty do zdefiniowania gradientu wypełnienia lub obrysu w całości w XML?

Próbowałem już w color.xml, styles.xml oraz w formacie XML wektorowym.

pojawia się błąd "Nie można konwertować @ id/gradclor w ColorStateList" z:

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

lub "Nie udało się przekształcić #FFFFFFFF # 00FFFFFF 145 do ColorStateList" przy użyciu:

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

z następujących w color.xml:

<color name="GradientStrokeBorder"> 
    <item name="android:startColor">#FFFFFF</item> 
    <item name="android:endColor">#00FFFF</item> 
    <item name="android:angle">145</item> 
</color> 

Odpowiedz

17

mam w końcu sprawdziło się. Funkcja gradientu kolorów nie jest jeszcze obsługiwana w Android Studio (aktualna wersja to 2.2), więc nie pomaga w autouzupełnianiu, ale zaznacza tag gradientu jako błąd. Mimo to funkcja działa, przetestowałem ją z powodzeniem na Nexusie 5X/API 24. Oczywiście musisz użyć urządzenia z interfejsem API 24+, ponieważ w przeciwnym razie ta funkcja nie jest obsługiwana przez system operacyjny.

Po pierwsze, trzeba dodać plik kolor zasobu tak:

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

Proszę zwrócić uwagę, aby rozpocząć/parametry końcowe jak znalazłem są one niezbędne dla gradientów wektorowych.

Umieść ten plik w folderze res/color pod inną nazwą. Nazwałam go gradient.xml, więc pełna ścieżka to res/color/gradient.xml. Następnie można odwoływać się do tego zasobu w atrybutach kolorów, w tym w kolorach ścieżki wektorowej:

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

Zwróć uwagę na odniesienie do zasobu koloru gradientu w skoku kolorów. Mam nadzieję że to pomoże!

+7

Świetna robota. Warto wspomnieć, że powoduje to awarię aplikacji na urządzeniach niższych niż API 24 (7.0), więc umieszczam wersję odnoszącą się do gradientu w * res/color/blue_gradient.xml * ('@ color/blue_gradient') w wersji ** res/drawable-v24 ** i wersja odnosząca się do zwykłego koloru w ** res/drawable **. – TTransmit

1

nie jestem tego pewien, ale według this document:

android: strokeColor Określa kolor używany do rysowania obrysu ścieżki. Może być kolorem lub, dla pakietu SDK 24+, kolorową listą stanów lub kolorem gradientu (patrz GradientColor i GradientColorItem). Jeśli ta właściwość jest animowana, każda wartość ustawiona przez animację zastąpi oryginalną wartość. Jeśli ta właściwość nie zostanie określona, ​​nie zostanie narysowany żaden zarys ścieżki.

jeśli twój sdk jest < 24 powinien być tylko jeden kolor.

Z drugiej strony, jeśli SDK jest większa niż 24, myślę, że byłoby beter korzystać <gradient/>, aby wypełnić swoją ścieżkę zamiast <color/>

1

Najnowszy podgląd Androida (3.1 Canary 6) zawiera próbkę użycie zasobu wektorowego z gradientem.

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