通过ClipDrawable 实现茶杯注满效果

一、概述

相信大家都见过页面加载时的注满效果，就是一个空杯子到注满水的这个过程。想到这个可以通过ImageView的ClipDrawable来简单的实现。

二、效果图

三、实现步骤

（一）首先是主布局文件activity_main.xml

其中只有一个继承自FrameLayout的自定义控件，用来记载这个杯子的ImageView。代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent">    <com.junjie.clipdrawable.FillTeaupView        android:layout_centerInParent="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></RelativeLayout>

（二）MainActivity.java

这个类很简单，只用来记载这个布局就行。

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

（三）FillTeaupView.java

最主要就是FillTeaupView这个自定义控件，其实这个控件就是一个ImageView，通过得到ImageView的ClipDrawable，然后根据ImageView的背景与前景，来做动态的变化。代码：

public class FillTeaupView extends FrameLayout {private static final int MAX_PROGRESS = 10000;// ClipDrawable代表从其它位图上截取一个“图片片段”private ClipDrawable mClipDrawable;private int mProgress = 0;private boolean running;private Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {// 如果消息是本程序发送的if (msg.what == 88) {// 设置截取的区域大小，当level为0时，截取的图片片段为空；当level为10000时，截取整张图片// 可以使用ClipDrawable的这种性质控制截取图片的区域大小，让程序不断调用setLevel方法并改变level的值，达到让图片慢慢展开的效果。mClipDrawable.setLevel(mProgress);}}};public FillTeaupView(Context context) {this(context, null, 0);}public FillTeaupView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public FillTeaupView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init(context);}private void init(Context context) {View view = LayoutInflater.from(context).inflate(R.layout.custom_loading, null);addView(view);ImageView imageView = (ImageView) findViewById(R.id.iv_progress);// 得到imageView的ClipDrawablemClipDrawable = (ClipDrawable) imageView.getDrawable();// 开启一个子线程Thread s = new Thread(r);s.start();}public void stop() {mProgress = 0;running = false;}Runnable r = new Runnable() {@Overridepublic void run() {running = true;// 使用循环来动态改变状态while (running) { handler.sendEmptyMessage(88);// 注满后保持这个状态，结束循环if (mProgress >= MAX_PROGRESS) {mProgress = MAX_PROGRESS;running = false;//stop();}mProgress += 100;try {Thread.sleep(40); // 为了模拟耗时操作} catch (InterruptedException e) {e.printStackTrace();}}}};}

（四）custom_loading.xml

自定义控件的布局就是一个ImageView，背景background图片为：

想必大家也猜到了前景src图片的样式：

两者完全重叠可以实现注满，前景图慢慢出现就可以实现注入的动作了。布局代码：

<?xml version="1.0" encoding="utf-8"?><ImageView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/iv_progress"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:background="@drawable/loading_bg"    android:paddingLeft="3dp"    android:paddingTop="3dp"    android:scaleType="centerInside"    android:src="@drawable/clip_imageview" /><!-- background为背景图 src为前景图  我们需要不断改变的是前景图,这样背景图动态就能显示出来了 -->

（五）clip_imageview.xml

clip属性也是很重要的，主要设置前景图的截取方式。代码：

<?xml version="1.0" encoding="utf-8"?><clip xmlns:android="http://schemas.android.com/apk/res/android"    android:clipOrientation="vertical"    android:drawable="@drawable/loading_progress"    android:gravity="bottom" >    <!-- android:clipOrientation：指定截取的方向，可设置为水平截取或垂直截取     android:drawable：指定截取的源Drawable对象 android:gravity：指定截取时的对齐方式 --></clip>

至此，实现注满效果的例子就实现了。最后附上Demo下载地址：http://download.csdn.net/detail/xiaoli100861/9187207