NiftyDialogEffects：集成了多種動畫效果的Dialog控件

來自： http://www.jcodecraeer.com//a/anzhuokaifa/androidkaifa/2014/0812/1644.html

在這個網站上有很多用js實現的對話框效果：http://tympanus.net/Development/ModalWindowEffects/

現在有人做出了相同效果的android版本，幾乎和上面的一模一樣,界面如下：

動畫效果：

要查看更多的動畫效果請參考上面給出的網站鏈接。

該項目的git地址為：https://github.com/sd6352051/NiftyDialogEffects

可能該項目是用android studio創建的吧，但是因為被墻的原因android studio不是很好用。雖然不能直接導入eclipse，不過相信有點基礎知識的都會轉為eclipse項目的。

用法示例;

NiftyDialogBuilder dialogBuilder=NiftyDialogBuilder.getInstance(this);
dialogBuilder
    .withTitle("Modal Dialog")
    .withMessage("This is a modal Dialog.")
    .show();

和alertdialog的用法類似。上面是最簡單的用法，如果要運用動畫等更多其他參數設置，可以參考下面的用法：

更多參數設置：

dialogBuilder
    .withTitle("Modal Dialog")                                  //.withTitle(null)  no title
    .withTitleColor("#FFFFFF")                                  //def
    .withDividerColor("#11000000")                              //def
    .withMessage("This is a modal Dialog.")                     //.withMessage(null)  no Msg
    .withMessageColor("#FFFFFF")                                //def
    .withIcon(getResources().getDrawable(R.drawable.icon))
    .withDuration(700)                                          //def
    .withEffect(effect)                                         //def Effectstype.Slidetop
    .withButton1Text("OK")                                      //def gone
    .withButton2Text("Cancel")                                  //def gone
    .isCancelableOnTouchOutside(true)                           //def    | isCancelable(true)
    .setCustomView(R.layout.custom_view,v.getContext())         //.setCustomView(View or ResId,context)
    .setButton1Click(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(), "i'm btn1", Toast.LENGTH_SHORT).show();
                    }
    })
    .setButton2Click(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(),"i'm btn2",Toast.LENGTH_SHORT).show();
        }
    })
    .show();

簡要的介紹下該項目的實現方法：

dialog部分的代碼很少，其實就是自定義了一個繼承子Dialog的NiftyDialogBuilder，并實現了DialogInterface。

其中非常重要的是

this.setOnShowListener(new OnShowListener() {
    @Override
    public void onShow(DialogInterface dialogInterface) {
        mLinearLayoutView.setVisibility(View.VISIBLE);
        if(type==null){
            type=Effectstype.Slidetop;
        }
        start(type);
    }
});

監聽對話框開始顯示的事件，然后設置動畫類型，之后調用start方法將動畫效果運用到dialog的contentview中：

private void start(Effectstype type){
    BaseEffects animator = type.getAnimator();
    if(mDuration != -1){
        animator.setDuration(Math.abs(mDuration));
    }
    animator.start(mRelativeLayoutView);
}

mRelativeLayoutView就是dialog的contentview的主要部分，Effectstype可以獲得各種動畫類型，每一種動畫類型都是有專門的類實現的。

動畫類型部分：

有如下動畫類型：

所有動畫類型都繼承子抽象類BaseEffects

public abstract  class BaseEffects {
    private static final int DURATION = 1 * 700;
    protected long mDuration =DURATION ;
    private AnimatorSet mAnimatorSet;
    {
        mAnimatorSet = new AnimatorSet();
    }
    protected abstract void setupAnimation(View view);
    public void start(View view) {
        reset(view);
        setupAnimation(view);
        mAnimatorSet.start();
    }
    public void reset(View view) {
        ViewHelper.setPivotX(view, view.getMeasuredWidth() / 2.0f);
        ViewHelper.setPivotY(view, view.getMeasuredHeight() / 2.0f);
    }
    public AnimatorSet getAnimatorSet() {
        return mAnimatorSet;
    }

    public void setDuration(long duration) {
        this.mDuration = duration;
    }
}

以SlideTop為例介紹是如何實現該抽象類的：

public class SlideTop extends BaseEffects{
    @Override
    protected void setupAnimation(View view) {
        getAnimatorSet().playTogether(
                ObjectAnimator.ofFloat(view, "translationY", -300, 0).setDuration(mDuration),
                ObjectAnimator.ofFloat(view, "alpha", 0, 1).setDuration(mDuration*3/2)
        );
    }
}

這些動畫放到一個叫Effectstype的枚舉類中，然后需要的時候直接調用type.getAnimator()方法就能得到動畫的實例，就像start方法中做的那樣。