Tài nguyên Drawable (3) ảnh VectorDrawable trong Android

BitmapDrawable (Bài trước)

Tài nguyên VectorDrawable <vector>

Đây là loại Drawable vẽ ảnh vector, trong xml dùng phần tử gốc là <vector>, phần chính là sử dụng phần tử path bên trong để vẽ. Đầu tiên hãy tao ra một vector như sau:

Tạo file res/drawable/vectorexample.xml nội dung như sau:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="100.0"
        android:viewportHeight="100.0">

</vector>

Với cú pháp trên bạn đã tạo ra một hình ảnh dạng vector có kích thước rộng 24dp, cao 24dp. Và ViewPort là 100x100, ViewPort là một của sổ nhìn để vẽ, đơn giản có thể hiểu việc vẽ thực hiện trên một vùng chữ nhật kích thước 100x100 vùng này sẽ thu về đúng 24dpx24dp của ảnh.

Vẽ VectorDrawable <path>

Bên trong <vector> thêm các phần tử <paht> để vẽ các đường phức tạp:

<path
    android:strokeWidth="chiều_rộng_nét_vẽ"
    android:strokeColor="màu_nét_vẽ"
    android:fillColor="màu_tô"
    android:pathData="dữ liệu vẽ"/>

Dữ liệu vẽ thiết lập trong thuộc tính android:pathData theo đúng quy tắc vẽ path (thuộc tính d) SVG của HTML5 (xem trong Ảnh SVG với HTML5), tóm tắt như sau:

android:pathData chứa các dữ liệu theo các ký hiệu:

M : di chuyển điểm vẽ đến tọa độ x, y (M x y)
L : vẽ từ điểm hiện tại đến điểm x, y (L x y)
H : vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x (H x)
V : vẽ đường thẳng đứng đến điểm có tọa độ y (V y)
C : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x2, y2 C x1 y1, x2 y2, x, y
S : vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tiếp tuyến với đường x0,y0, x2, y2 S x2 y2, x y
Q : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x1, y1 C x1 y1, x y
T : vẽ đường cong cubic-bezier, từ điểm hiện tại đến điểm x,y (T x y)
A : vẽ cung tròn
Z : đóng đường vẽ

Ví dụ:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >

    <path android:pathData="M 50 0
                            L 0 50
                            50 100z
                            H100 V100 H50"
        android:fillColor="#54d454"
        android:strokeWidth="1"
        android:strokeColor="#e61717"/>

</vector>