如何使用ClipDrawable实现ImageView图片切换动画

加上PaintDrawable那一篇，本篇就是介绍Drawable的第四篇blog了，ClipDrawable中有一个很实用的方法（个人觉得很好用）————那就是setLevel（），通过这个方法，可以设置drawable显示的部分大小，如果设置为0，就是完全不显示，设置为10000就是完全显示 。感觉是不是与ProgressBar有点像呀，其实你完全可以用它来实现一个自己的progressBar，不过在这边博客里就不做介绍了。

还是先看一下效果吧！





看一下主布局文件（其实也没有啥好看的）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.clipandpaintdrawable.MainActivity">
<ImageView
android:layout_centerHorizontal="true"
android:id="@+id/iv"
android:layout_width="300dp"
android:layout_height="400dp"
android:padding="0dp"
android:src="@drawable/clip_drawable"
android:scaleType="fitXY"/>
<Button
android:gravity="center"
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/iv"
android:layout_marginTop="3dp"
android:onClick="changeImageView"
android:text="@string/set_image" />

<Button
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/btn"
android:layout_marginTop="3dp"
android:onClick="changeImage"
android:text="@string/change_image" />

</RelativeLayout>

再看一下drawable文件：

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_horizontal|center_vertical"
android:clipOrientation="horizontal|vertical"
android:drawable="@drawable/first">

</clip>

接下来就是activity文件了：

package com.example.clipandpaintdrawable;

import android.graphics.drawable.ClipDrawable;
import android.net.Uri;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.appindexing.Thing;
import com.google.android.gms.common.api.GoogleApiClient;

public class MainActivity extends AppCompatActivity {

private static final int CHANGE_LEVEL = 99;
private ImageView iv;
private ClipDrawable mClipDrawable;
private boolean isExpand = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv = (ImageView) findViewById(R.id.iv);
mClipDrawable = (ClipDrawable) iv.getDrawable();
mClipDrawable.setLevel(10);
}

public void changeImageView(View view) {
if (!isExpand) {
isExpand = true;
final Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == CHANGE_LEVEL) {
int level = mClipDrawable.getLevel() + 50;
if (level >= 10000) {
level = 10000;
}
mClipDrawable.setLevel(level);
}
}
};
final CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE, 10) {
@Override
public void onTick(long millisUntilFinished) {

if (mClipDrawable.getLevel() >= 10000) {
this.onFinish();
} else {
mHandler.sendEmptyMessage(99);
}

}

@Override
public void onFinish() {
isExpand = false;
}
};
timer.start();
}
}

public void changeImage(View view) {
if (iv.getDrawable() != null) {
iv.setBackground(iv.getDrawable());
}
final ClipDrawable imageDrawable = new ClipDrawable(getResources().getDrawable(R.drawable.second), Gravity.TOP | Gravity.START, ClipDrawable.VERTICAL);
iv.setImageDrawable(imageDrawable);
imageDrawable.setLevel(10);
if (!isExpand) {
isExpand = true;
final Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == CHANGE_LEVEL) {
int level = imageDrawable.getLevel() + 50;
if (level >= 10000) {
level = 10000;
}
imageDrawable.setLevel(level);
}
}
};
final CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE, 10) {
@Override
public void onTick(long millisUntilFinished) {

if (imageDrawable.getLevel() >= 10000) {
this.onFinish();
} else {
mHandler.sendEmptyMessage(99);
}

}

@Override
public void onFinish() {
isExpand = false;
}
};
timer.start();
}
}

}

java文件写的比较冗余啊，不要喷我！！

稍微解释下，在clip这个标签中有三个属性，分别是drawable、gravity和clipOrientation。

其中drawable肯定就是代表要加载的drawable资源嘛，gravity则代表了drawable在显示不全的情况下，最先显示出来的位置，clipOrientation则代表不断裁剪显示的方向。具体使用可以根据我提供的代码自己试一下，这样感触更深呀！！

在使用ImageView的时候，如果你也像我一样处理图片切换，一定要设置scaleType这个属性，不然的话背景总是会比显示的图片大一点（估计就跟设置桌面没有设置为填充模式一样），这样切换回显得很别扭。

本文的图片切换是选择从中心向四周扩散，其实你也可以选择其他方式，比如从左边向右边，上边向下边等等，对了，还有从四周向中心。这个跟现在实现的方式刚好反过来了，要把将要显示的图片设置为背景，然后不断减小imageview中图片的level，直至为0，然后从新将背景中的drawable设置ImageView中要显示的图片。

当然也可以通过前景来操作，具体的就不细说了，想玩的小伙伴可以自己在代码中试一下！！！

好了关于ClipDrawable就说这么多了，想要看更多关于drawable基本用法的小伙伴可以关注我的博客，我将持续更新！！！！

接下来，将向介绍LevelListDrawable和PictureDrawable，希望可以帮到您一下小忙！！！

下面是我的个人公众号，如果可以的话，还麻烦您帮忙关注一下，这将是对我最大的鼓励，谢谢！！！



代码地址：

代码存放在我的git仓库中，需要的小伙伴可以直接git clone，仓库中的代码比较杂乱，小心哦！！！！