1. 程式人生 > >通過ClipDrawable 實現茶杯注滿效果

通過ClipDrawable 實現茶杯注滿效果

最主要就是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() {
		@Override
		public 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的ClipDrawable
		mClipDrawable = (ClipDrawable) imageView.getDrawable();
		
		// 開啟一個子執行緒
		Thread s = new Thread(r);
		s.start();
	}

	public void stop() {
		mProgress = 0;
		running = false;
	}

	Runnable r = new Runnable() {
		@Override
		public 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