Android 图片Drawable类型之Layer List

层列表图像Layer List，可以使用多张图片合成一张图片，有点像PS中的图层叠加效果
语法：

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <item
            android:drawable="@[package:]drawable/drawable_resource"
            android:id="@[+][package:]id/resource_name"
            android:top="dimension"
            android:right="dimension"
            android:bottom="dimension"
            android:left="dimension" />
    </layer-list>

一个item节点代表一张图片，当有多个item结点时，下面的item会叠加在上一个item之上
这里需要注意，如果在item只使用drawable设置图片，会导致底部图片拉伸填充整个容器

看下面的例子

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher">
    </item>
    <item
        android:drawable="@drawable/ic_launcher"
        android:left="20dp"
        android:top="20dp"/>
    <item
        android:drawable="@drawable/ic_launcher"
        android:left="40dp"
        android:top="40dp"/>
</layer-list>

很明显的，在底下的图片都被拉伸了，为了避免这样的情况，可以给每个item添加gravity，并设置为center

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher"
        android:gravity="center">
    </item>
    <item
        android:drawable="@drawable/ic_launcher"
        android:gravity="center"
        android:left="20dp"
        android:top="20dp"/>
    <item
        android:drawable="@drawable/ic_launcher"
        android:gravity="center"
        android:left="40dp"
        android:top="40dp"/>
</layer-list>

官方给出的建议是添加Bitmap结点，并在bitmap里面设置gravity属性

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/ic_launcher"
                android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
        <bitmap android:src="@drawable/ic_launcher"
                android:gravity="center" />
    </item>
    <item android:top="40dp" android:left="40dp">
        <bitmap android:src="@drawable/ic_launcher"
                android:gravity="center" />
    </item>
</layer-list>

效果是一样的

我们还可以利用layer list实现相框效果

layer_drawable布局

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--照片-->
    <item
        android:id="@+id/layer_photo"
        android:top="70dp"
        android:left="250dp"
        android:right="65dp"
        android:bottom="150dp"
        android:drawable="@drawable/image_one">
    </item>
    <!--相框-->
    <item
        android:drawable="@drawable/bg_photo_frame"/>
</layer-list>

里面的top、left、right、bottom都是计算好了的

Activity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iv_photo_frame"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/layer_drawable"/>
    <Button
        android:id="@+id/btn_change_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="更换相片"/>
</LinearLayout>

主要代码

/**
 * Layer List
 * Created by zhuwentao on 2016-08-21.
 */
public class MainActivity extends AppCompatActivity {

    /* 更换相片 */
    private Button mChangePhotoBtn;

    /* 相册 */
    private ImageView mPhotoIv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mChangePhotoBtn = (Button) findViewById(R.id.btn_change_photo);
        mPhotoIv = (ImageView) findViewById(R.id.iv_photo_frame);

        mChangePhotoBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changePhoto();
            }
        });
    }

    /**
     * 替换图片
     */
    public void changePhoto() {
        LayerDrawable layerDrawable = (LayerDrawable) ContextCompat.getDrawable(this, R.drawable.layer_drawable);
        // 获取替换的图片
        Drawable drawable = ContextCompat.getDrawable(this, R.drawable.image_two);
        // 找到layer_drawable布局中需要更换的item，并替换成对应的图片
        layerDrawable.setDrawableByLayerId(R.id.layer_photo, drawable);
        mPhotoIv.setImageDrawable(layerDrawable);
    }
}