Tài nguyên Drawable (5) ảnh LayerDrawable trong Android
Tạo và sử dụng ảnh có nhiều lớp LayerDrawable bằng xml với phần tử layer-list, kết hợp nhiều Drawable thành một ảnh.
Tài nguyên LayerDrawable <layer-list>
LayerDrawable là loại Drawable mà nó chứa nhiều phần tử <item> bên trong, mỗi phần tử này biểu diễn một Drawable, chúng tạo thành một lớp hình ảnh. Kết quả vẽ tất cả các lớp đó theo thứ tự là hình ảnh cuối cùng của LayerDrawable
Cú pháp xml tạo ra LayerDrawable như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="pun"><?</span><span class="pln">xml version</span><span class="pun">=</span><span class="str">"1.0"</span><span class="pln"> encoding</span><span class="pun">=</span><span class="str">"utf-8"</span><span class="pun">?></span> <span class="tag"><layer-list</span> <span class="atn">xmlns:android</span><span class="pun">=</span><span class="atv">"http://schemas.android.com/apk/res/android"</span><span class="tag">></span> <span class="tag"><item></span> <span class="com"><!--Drawable của item--></span> <span class="tag"></item></span> <span class="tag"><item></span> <span class="com"><!--Drawable của item--></span> <span class="tag"></item></span> <span class="com"><!-- ... --></span> <span class="tag"></layer-list></span> |
Thuộc tính của <item> trong LayerDrawable
<item> (lớp) của LayerDrawable bên trong nó có chứa phần tử con là bất kỳ loại Drawable nào đã biết như bitmap, vector … và có thể thiết lập các thuộc tính như sau:
| Thuộc tính | Ý nghĩa |
|---|---|
android:bottomandroid:topandroid:leftandroid:right |
Khoảng cách căn lề về các phía dưới, trên, trái, phải của Layer ví dụ: android:bottom=”10dp” |
android:paddingBottomandroid:paddingTopandroid:paddingLeftandroid:paddingRight |
Khoảng padding theo từng phía các cạnh |
android:width |
Thiết lập chiều rộng của Layer |
android:width |
Thiết lập chiều cao của Layer |
Ví dụ LayerDrawable
Có các hình ảnh: face.png 
, flower1.png 
, flower2.png 
, tải về copy vào thư mục drawable của dự án (nó đã trở thành BitmapDrawable). Giờ ta sẽ tạo ra một LayerDrawable kết hợp từ 3 hình ảnh đó
Tạo file drawable/bglayer.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<span class="pun"><?</span><span class="pln">xml version</span><span class="pun">=</span><span class="str">"1.0"</span><span class="pln"> encoding</span><span class="pun">=</span><span class="str">"utf-8"</span><span class="pun">?></span> <span class="tag"><layer-list</span> <span class="atn">xmlns:android</span><span class="pun">=</span><span class="atv">"http://schemas.android.com/apk/res/android"</span><span class="tag">></span> <span class="tag"><item</span> <span class="atn">android:width</span><span class="pun">=</span><span class="atv">"768px"</span> <span class="atn">android:height</span><span class="pun">=</span><span class="atv">"1280px"</span><span class="tag">></span> <span class="tag"><shape></span> <span class="tag"><gradient</span> <span class="atn">android:centerX</span><span class="pun">=</span><span class="atv">"0.5"</span> <span class="atn">android:centerY</span><span class="pun">=</span><span class="atv">"0.3"</span> <span class="atn">android:endColor</span><span class="pun">=</span><span class="atv">"#b0bec5"</span> <span class="atn">android:gradientRadius</span><span class="pun">=</span><span class="atv">"300dp"</span> <span class="atn">android:startColor</span><span class="pun">=</span><span class="atv">"#fafafa"</span> <span class="atn">android:type</span><span class="pun">=</span><span class="atv">"radial"</span> <span class="tag">/></span> <span class="tag"></shape></span> <span class="tag"></item></span> <span class="tag"><item</span> <span class="atn">android:left</span><span class="pun">=</span><span class="atv">"10px"</span> <span class="atn">android:top</span><span class="pun">=</span><span class="atv">"300px"</span><span class="tag">></span> <span class="tag"><bitmap</span> <span class="atn">android:gravity</span><span class="pun">=</span><span class="atv">"right|center"</span> <span class="atn">android:src</span><span class="pun">=</span><span class="atv">"@drawable/face"</span> <span class="tag">/></span> <span class="tag"></item></span> <span class="tag"><item</span> <span class="atn">android:left</span><span class="pun">=</span><span class="atv">"10px"</span> <span class="atn">android:bottom</span><span class="pun">=</span><span class="atv">"10px"</span><span class="tag">></span> <span class="tag"><bitmap</span> <span class="atn">android:gravity</span><span class="pun">=</span><span class="atv">"bottom|left"</span> <span class="atn">android:src</span><span class="pun">=</span><span class="atv">"@drawable/flower1"</span> <span class="tag">/></span> <span class="tag"></item></span> <span class="tag"><item</span> <span class="atn">android:right</span><span class="pun">=</span><span class="atv">"-210px"</span><span class="tag">></span> <span class="tag"><bitmap</span> <span class="atn">android:gravity</span><span class="pun">=</span><span class="atv">"center|right"</span> <span class="atn">android:src</span><span class="pun">=</span><span class="atv">"@drawable/flower2"</span> <span class="tag">/></span> <span class="tag"></item></span> <span class="tag"></layer-list></span> |
Và đây là kết quả khi sử dụng nó làm nền
