這算是第一篇正式的原創博文,好緊張。
下面是效果圖:
本來想用自定義view做哪個完成動畫,看了下貝賽爾曲線,但是沒做出來,只能組裝一下了。實現的原理就是遮罩動畫,之前學了點flash,其中就有這個原理。簡單講,就是先把對號√用一層白色的布蓋住,然後把上面的布一點一點往右拉動,下面的對號就顯示出來了。原理很簡單,性能可能沒自定義的那麼好,但容易實現。
下面是佈局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/rect_10_radius"
android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="150dp">
<FrameLayout
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
android:layout_width="60dp"
android:layout_height="60dp">
<!--timg是最後顯示的對號圖片-->
<ImageView
android:src="@drawable/timg"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--遮蓋住對號的一層布-->
<ImageView
android:id="@+id/iv_place"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--indeterminateDuration 這個屬性控制progressbar 轉圈的速率-->
<ProgressBar
android:layout_gravity="center"
android:id="@+id/pb"
android:indeterminateDuration="2500"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
<TextView
android:layout_marginTop="10dp"
android:id="@+id/tv_msg"
android:textSize="18sp"
android:textColor="#5a5a5a"
android:text="加載中..."
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
下面是代碼:
public class ProgressDialog extends Dialog {
private ImageView ivPlace;
private TextView tvMsg;
private ProgressBar mPb;
public ProgressDialog(Context context) {
//可以換不同style改變進度圈的樣式
super(context,android.R.style.Theme_Holo_Light_Dialog);
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
getWindow().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
init();
}
private void init() {
this.setContentView(R.layout.dialog_loading);
mPb = (ProgressBar) findViewById(R.id.pb);
tvMsg = (TextView) findViewById(R.id.tv_msg);
ivPlace = (ImageView) findViewById(R.id.iv_place);
}
/**
* 動畫放完後,dialog會dismiss,後續操作可以實現OnCompleteListener接口,
* 傳null 只是簡單播放完成動畫,然後讓dialog消失
* @param completeListener
*/
public void complete(final OnCompleteListener completeListener){
//先讓ProgressBar隱藏
mPb.setVisibility(View.GONE);
//執行動畫,往右扯動布,讓對號露出來
ObjectAnimator translationX = ObjectAnimator.ofFloat(ivPlace, "translationX", 0, ivPlace.getWidth());
translationX.setDuration(700);
translationX.setInterpolator(new AccelerateInterpolator());
translationX.start();
//改變提示信息內容和顏色
tvMsg.setTextColor(Color.parseColor("#4caf65"));
tvMsg.setText("完成");
//動畫放完後再調用OnCompleteListener接口
translationX.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
dismiss();
if(completeListener!=null){
completeListener.onComplete();
}
}
});
}
/**
* 設置轉圈時的提示信息
*/
public void setMsg(String msg){
tvMsg.setText(msg);
}
/**
* 一個接口,用來做完成動畫放完後要做的事,比如finish();
*/
public interface OnCompleteListener{
void onComplete();
}
}
使用實例:
ProgressDialog progressDialog = new ProgressDialog(this);
progressDialog.show();
//TODO 一些耗時操作
// 調用以下一種實現你的需求
// 1.耗時操作執行完後,直接dismis
progressDialog.dismiss();
// 2.放完動畫後直接dismiss
progressDialog.complete(null);
// 3.放完動畫後dismiss,再做點事情
progressDialog.complete(new ProgressDialog.OnCompleteListener() {
@Override
public void onComplete() {
finish();
}
});