Tài nguyên Drawable
Tài nguyên Drawable là một khái niệm chung ám chỉ đối tượng đồ họa nào đó có thể được vẽ ra trên màn hình. Trong dự án ứng dụng Android với Android Studio thường các tài nguyên đồ họa này đặt trong thư mục res/drawable, sau đó nó được sử dụng bằng cách lấy ra từ trong code bằng các hàm API như ContextCompat.getDrawable, ResourcesCompat.getDrawable hay gán vào thuộc tính phù hợp trong XML như android:drawable, android:icon, android:button ...
Lớp cơ sở biểu diễn Drawable là lớp Drawable (android.graphics.drawable.Drawable), từ lớp này mà có các kiểu Drawable khác nhau như:
Loại Drawable | Thông tin |
ShapeDrawable |
Là một Drawable bằng phần tử shape trong XML, nó cho phép vẽ một số hình cơ bản. |
GradientDrawable |
Tạo Gradient bên trong shape . |
VectorDrawable |
Là một Drawable bằng phần tử vector trong XML, nó cho phép vẽ ảnh vector như SVG |
BitmapDrawable |
android.graphics.drawable.BitmapDrawable Biểu diễn ảnh Bitmap, hỗ trợ các định dạng png, jpg, gif, các tài nguyên ảnh png, jpg đặt trong drawable tự động được phân tích thành BitmapDrawable |
NinePatchDrawable |
Các ảnh png với phần tên có dạng .9.png sẽ tự động phân tích thành dạng Nine-Patch, loại Drawable cho phép thu phóng phần nội dung |
LayerDrawable |
Một loại Drawable, chứa nhiều Drawable bên trong, các Drawable bên trong được vẽ theo thứ tự. |
StateListDrawable |
Một Drawable có chứa nhiều Drawable bên trong để cho đối tượng sử dụng tùy trạng thái mà vẽ Drawable trong nó. |
LevelListDrawable |
Một Drawable có chứa nhiều Drawable bên trong, mỗi Drawable được giá trị Level (min và max). Sau đó đối tượng sử dụng tùy giá trị Level mà sẽ sử dụng Drawable nào bên trong để vẽ. |
TransitionDrawable |
Một Drawable có chứa 2 Drawable bên trong, nó cung cấp khả năng chuyển đổi qua lại giữa 2 Drawable (hiệu ứng fade). |
InsetDrawable |
Một Drawable tạo ra từ cách chèn một Drawable khác vào và chỉ ra khoảng cách các mép. |
ClipDrawable |
Một Drawable dựa trên Level, nó cho phép thiết lập cắt chiều rộng / cao dưa trên giá trị level. |
ScaleDrawable |
Là một Drawable tạo ra từ Drawable khác bằng cách điều chỉnh tỷ lệ thu phóng |
Truy cập Drawable
Truy cập đến Drawable trong XML
Các đối tượng đồ hòa Drawable như các ảnh .jpg, .png đặt trong thư mục res/drawable với tên đầy đủ như: res/drawable/filename.png, hoặc là các định dạng .xml với tên đầy đủ res/drawable/filename.xml
Trong các triển khai XML ví dụ như layout, truy cập đến Drawable với dạng: "@drawable/filename", ví dụ:
android:background="@drawable/example"
Truy cập đến Drawable trong code
1 Lấy Drawable bằng ContextCompat
Drawable drawable = ContextCompat.getDrawable(context,id)
context
Là một đối tượng Context như Activity hoặc lấy từ các view: getContext()id
là ID trỏ đến Drawable, sử dụng lớpR
để truy cập nhưR.drawable.example
2 Lấy Drawable bằng ResourcesCompat
Drawable drawable = ResourcesCompat.getDrawable(res, id, null)
res
là đối tượng Resources, lấy được bằng phương thứcgetResources()
của View hay Activityid
là ID trỏ đến Drawable, sử dụng lớpR
để truy cập nhưR.drawable.example
Sau khi có Drawable trong code tùy ý sử dụng theo mục đích, ví dụ thiết lập vào nền cho View setBackground(drawable)
Vẽ ShapeDrawable, GradientDrawable trong XML
Tạo XML với phần tử gốc là <shape> với tham số android:shape là loại hình muốn vẽ, chấp nhận các loại hình sau:
rectangle
: Để vẽ hình chữ nhậtring
: Hình khuyênoval
: Hình oval (elip)line
: Đường thẳng
Ví dụ khai báo là vẽ hình oval:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> </shape>
Tùy theo loại hình muốn vẽ mà bên trong <shape> có các phần tử con là dữ liệu để vẽ hình như sau:
-
Thiết lập nét vẽ với stroke
<stroke android:width="10dp" android:color="#de461b" android:dashGap="2dp" android:dashWidth="10dp" />
android:width chiều rộng nét vẽ; android:color màu nét vẽ; android:dashGap độ dài khoảng trống để tạo nét đứt; android:dashWidth độ dài nét đứtVí dụ sau tạo ra một hình Oval với nét đứt
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="5dp" android:color="#de461b" android:dashGap="2dp" android:dashWidth="10dp" /> </shape>
-
Thiết lập màu tô với solid hoặc gradient
Phần tử solid thêm vào để gán một màu tô vào theo cú pháp (ví dụ tô bằng màu vàng):
<solid android:color="#f9d849" />
Phần tử gradient để tạo màu tô theo Gradient
Gradient sinh ra bằng cách biến đổi liên tục qua ba màu, ba màu thiết lập bằng thuộc tính: startColor, centerColor, endColor, thiết lập kiểu biến đổi bằng thuộc tính type với kiểu
linear
hoặccircle
, góc biến đổi màu thiết lập bằng thuộc tính angleVí dụ tô bằng
gradient
kiểulinear
góc tố 45 độ<gradient android:angle="45" android:endColor="#87CEEB" android:centerColor="#768087" android:startColor="#000" android:type="linear" />
Ví dụ tô bằng
gradient
kiểulinear
góc tố 45 độ<gradient android:angle="45" android:endColor="#D38312" android:startColor="#FF6B6B" android:type="linear" />
Khi sử dụng loại tô theo hình trong
radial
thì cần thiết lập bán kính của vùng tô bằng thuộc tínhandroid:gradientRadius
, có thể gán bằng giá trị cụ thể như100dp
hoặc bằng ký hiệu%p
ví dụ "10%p" bán kính bằng 10% cạnh nhỏ, "100%p" bán kính bằng cạnh nhỏ. Vùng tô có hiệu lực là một hình tròn bán kínhandroid:gradientRadius
, tâm ở giữa hình hoặc thiết lập bằng thuộc tínhcenterX
vàcenterY
nhận giá trị từ 0 đến 1, ví dụ bằng 0.5 là ở giữa<gradient android:centerColor="#136d94" android:endColor="#05ec19" android:gradientRadius="50%p" android:startColor="#b9ad08" android:type="radial" />
Ví dụ điều chỉnh tâm cách góc trên/trái theo chiều X là 10%, chiều Y một khoảng 20%
<gradient android:centerColor="#136d94" android:endColor="#05ec19" android:gradientRadius="100%" android:startColor="#b9ad08" android:centerX="0.1" android:centerY="0.2" android:type="radial" />
-
Thiết lập kích thước vùng vẽ bằng <size>
Nếu muốn thiết lập chính xác kích thước của Drawable này thì thêm vào phần tử size
<size android:height="20dp" android:width="100dp" />
-
Thiết lập padding vùng vẽ <padding>
Nếu muốn thiết lập các padding cho vùng vẽ
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
-
Thiết lập bo tròn các góc <corners>
Với 4 góc của hình chữ nhật, có thể thiết lập bán kính bo tròn bằng phần tử corners, với các thuộc tính
android:radius
thiết lập bán kính bo tròn cả 4 góc như nhau, và với android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius để thiết lập bán kính cho từng gócVí dụ bo tròn cả 4 góc
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="45" android:endColor="#D38312" android:startColor="#FF6B6B" android:type="linear" /> <size android:height="20dp" android:width="100dp" /> <corners android:radius="10dp"/> </shape>
-
Một số ví dụ với shape
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="100dp" android:bottomRightRadius="20dp" /> <gradient android:type="linear" android:startColor="#0083ff" android:centerColor="#00d4ff" android:endColor="#00fff6" android:angle="135"/> <size android:width="100dp" android:height="100dp" /> <stroke android:width="2.3dp" android:color="#FFFFFF" /> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="4dp" android:color="#C1E1A6" /> <solid android:color="#118C4E"/> <padding android:left="20dp" android:top="20dp" android:right="20dp" android:bottom="20dp" /> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#FFEECC" /> <size android:width="100dp" android:height="100dp" /> <stroke android:width="5dp" android:color="#444444" /> </shape>