Android轉完圈後顯示完成動畫的ProgressDialog

這算是第一篇正式的原創博文,好緊張。
下面是效果圖:
loading
complete

本來想用自定義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();
            }
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章