Liên hệ
android java

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:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!--Drawable của item-->
    </item>

    <item>
        <!--Drawable của item-->
    </item>
    <!-- ... -->
</layer-list>

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:bottom
android:top
android:left
android: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:paddingBottom
android:paddingTop
android:paddingLeft
android: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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="768px"
        android:height="1280px">
        <shape>
            <gradient
                android:centerX="0.5"
                android:centerY="0.3"
                android:endColor="#b0bec5"
                android:gradientRadius="300dp"
                android:startColor="#fafafa"
                android:type="radial" />
        </shape>
    </item>

    <item
        android:left="10px"
        android:top="300px">
        <bitmap
            android:gravity="right|center"
            android:src="@drawable/face" />
    </item>


    <item
        android:left="10px"
        android:bottom="10px">
        <bitmap
            android:gravity="bottom|left"
            android:src="@drawable/flower1" />
    </item>


    <item
        android:right="-210px">
        <bitmap
            android:gravity="center|right"
            android:src="@drawable/flower2" />
    </item>
</layer-list>

Và đây là kết quả khi sử dụng nó làm nền

Vui lòng đăng ký ủng hộ kênh