2016-11-29 12 views
8

Tôi đã xem tài liệu cho GradientColor https://developer.android.com/reference/android/R.styleable.html#GradientColor. Làm thế nào tôi có thể xác định một màu gradient trong XML và áp dụng nó vào một vector XML drawable?GradientColor có thể được sử dụng để xác định một gradient cho một điền hoặc đột quỵ hoàn toàn trong XML?

Tôi đã thử trong color.xml, styles.xml và trong một vector XML có thể vẽ được.

tôi nhận được báo lỗi "Không thể chuyển đổi @ id/gradclor thành một ColorStateList" với:

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

hoặc "Không thể chuyển đổi #FFFFFFFF # 00FFFFFF 145 thành ColorStateList" khi sử dụng:

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

những điều sau đây color.xml:

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

Trả lời

17

tôi đã cuối cùng đã làm cho nó hoạt động. Tính năng màu nền chưa được hỗ trợ trong Android Studio (phiên bản hiện tại là 2.2) do đó, tính năng này không giúp bạn tự động hoàn thành mà thay vào đó, hãy đánh dấu thẻ gradient là lỗi. Tuy nhiên, tính năng này thực sự hoạt động, tôi đã thử nghiệm thành công trên Nexus 5X/API 24. Tất nhiên, bạn phải sử dụng thiết bị API 24+ vì nếu không tính năng này không được hệ điều hành hỗ trợ.

Trước tiên, bạn cần phải thêm tập tin tài nguyên màu sắc như thế này:

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

Hãy chú ý để bắt đầu/thông số cuối như tôi thấy họ rất cần thiết cho gradient vector.

Đặt tệp này vào thư mục res/color dưới một số tên. Tôi đã đặt tên nó là gradient.xml để đường dẫn đầy đủ là res/color/gradient.xml. Sau đó, bạn có thể tham khảo tài nguyên này trong thuộc tính màu, bao gồm màu đường dẫn vector:

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

Chú ý tham chiếu đến tài nguyên màu gradient trong strokeColor. Hi vọng điêu nay co ich!

+7

Công việc tuyệt vời. Điều đáng nói là điều này làm hỏng ứng dụng trên các thiết bị thấp hơn API 24 (7.0) vì vậy tôi đặt một phiên bản đề cập đến độ dốc trong * res/color/blue_gradient.xml * ('@ color/blue_gradient') trong ** res/drawable-v24 ** và phiên bản đề cập đến màu thường xuyên trong ** res/drawable **. – TTransmit

1

Tôi không chắc chắn về điều này, nhưng theo this document:

android: strokeColor Ghi rõ màu dùng để vẽ phác thảo con đường. Có thể là màu hoặc, đối với SDK 24+, danh sách trạng thái màu hoặc màu gradient (Xem GradientColor và GradientColorItem). Nếu thuộc tính này là hoạt ảnh, bất kỳ giá trị nào được đặt bởi hoạt ảnh sẽ ghi đè giá trị ban đầu. Không có đường viền nào được vẽ nếu thuộc tính này không được chỉ định.

nếu sdk của bạn là < 24 thì chỉ nên có một màu.

mặt khác nếu sdk của bạn là lớn hơn 24, tôi nghĩ rằng nó sẽ là beter sử dụng <gradient/> để điền vào đường dẫn của bạn thay vì <color/>

1

Các preview mới nhất của Android (3.1 Canary 6) chứa một mẫu sử dụng tài nguyên vectơ với 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> 
Các vấn đề liên quan