android使用dialog進行彈窗動畫的簡單實現(上、下、左、右、中間)

很多項目都有這樣的彈窗需求，特別整理了下並作詳細記錄防止時間長了忘記。自己寫動畫稍微麻煩所以使用dialog進行普通的彈窗當然也可以使用Popwindow進行彈窗。

先貼代碼(新建一個工具類將此方法拷貝):

/**
 *
 * @param context 上下文
 * @param resource 資源 layout布局
 * @param dialogStyle 彈出樣式
 * @param gravity 方向
 * @param width 寬
 * @param height 高
 * @param animation 動畫
 */

public void customDialog(Context context, int resource,
                             int dialogStyle,
                             int gravity,
                             int width,
                             int height,
                             int animation) {
        View view = View.inflate(context, resource, null);
        final Dialog dialog = new Dialog(context, dialogStyle);
        dialog.setContentView(view);
        WindowManager.LayoutParams layoutParams =     
        dialog.getWindow().getAttributes();
        layoutParams.width = width;
        layoutParams.height = height;
//        layoutParams.y = 180;//距離頂部的距離
        dialog.getWindow().setAttributes(layoutParams);
        dialog.getWindow().setGravity(gravity);
        dialog.getWindow().setWindowAnimations(animation);
        dialog.show();
}

由於需要滿足上、下、左、右、中間 彈出的效果，因此封裝成了一個公共方法只需要傳入需要的參數即可。

將以下代碼放入styles.xml文件中用於確定彈出樣式:

    <style name="showDialog" parent="@android:style/Animation.Dialog">
        <!--        <item name="android:windowAnimationStyle">@style/AnimBottom</item>-->
        <!--        <item name="android:windowFrame">@null</item>-->
        <!-- 是否懸浮於遮罩上       -->
        <item name="android:windowIsFloating">true</item>
        <!--       <item name="android:windowIsTranslucent">true</item>-->
        <!--        <item name="android:windowNoTitle">true</item>-->
        <!-- 設置背景色 透明-->
        <!--        <item name="android:background">@android:color/transparent</item>-->
        <!--        <item name="android:windowBackground">@android:color/transparent</item>-->
        <!-- 設置是否顯示背景 -->
        <!--        <item name="android:backgroundDimEnabled">true</item>-->
        <!-- 設置背景透明度 0 全透明 1 全不透明-->
        <!--        <item name="android:backgroundDimAmount">0.8</item>-->
        <!-- 設置點擊空白消失 -->
        <item name="android:windowCloseOnTouchOutside">true</item>
    </style>

 

1.從上往下彈出: (包含了2種實現方式一種是基於放大效果的，一種是基於平移方式的，可以自己放開注釋看效果；需要在res下新建anim文件夾用於存放動畫文件)

<style name="AnimTop" parent="@android:style/Animation">
    <!--進入動畫-->
    <item name="android:windowEnterAnimation">@anim/dialog_top_in</item>
    <!--退出動畫-->
    <item name="android:windowExitAnimation">@anim/dialog_top_out</item>
</style>

進入動畫:dialog_top_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="true">
    <!-- 自上向下滑入 -->
<!--    pivotY 原點y坐標加上自身高度的百分之百 的位置-->
<!-- 放大動畫實現-->
    <scale
        android:fromXScale="1"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:pivotX="0"
        android:pivotY="0"/>
<!--平移動畫實現-->
<!--    <translate-->
<!--        android:fromXDelta="1"-->
<!--        android:fromYDelta="-100%p"-->
<!--        android:toXDelta="1"-->
<!--        android:toYDelta="0" />-->

</set>

退出動畫:dialog_top_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="false">
    <!-- 自下向上滑出 -->
<!-- 放大動畫-->
        <scale
            android:fromXScale="1"
            android:toXScale="1"
            android:fromYScale="1"
            android:toYScale="0"
            android:pivotX="0"
            android:pivotY="0" />
<!--平移動畫-->
<!--    <translate-->
<!--        android:fromXDelta="1"-->
<!--        android:fromYDelta="0"-->
<!--        android:toXDelta="1"-->
<!--        android:toYDelta="-100%p" />-->

</set>

調用方式:

 SystemUtils.customDialog(this,//context
                R.layout.view_share,//你的布局文件
                R.style.showDialog,//你的樣式文件 在styles.xml文件中定義
                null,
                Gravity.TOP,//彈出的位置
                WindowManager.LayoutParams.MATCH_PARENT,//寬
                WindowManager.LayoutParams.WRAP_CONTENT,//高
                R.style.AnimTop);//動畫文件

其他的同理下面列出從各個方向的動畫文件 記得修改styles.xml的彈出樣式。

 

2.從下往上彈出:

 <style name="AnimBottom" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_bottom_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_bottom_out</item>
    </style>

底部彈出進入動畫: dialog_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!-- 自下向上滑入 -->
<!--        <translate-->
<!--            android:fromYDelta="100%p"-->
<!--            android:toYDelta="0" />-->

    <!--    fromYScale、pivotY 和Y坐標無關只是單純的縮放-->
    <scale
        android:fromXScale="1"
        android:fromYScale="0"
        android:pivotX="0"
        android:pivotY="100%"
        android:toXScale="1"
        android:toYScale="1" />

</set>

底部彈出退出動畫: dialog_bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!-- 自下向上滑出 -->
<!--        <translate-->
<!--            android:fromYDelta="0"-->
<!--            android:toYDelta="100%p" />-->

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="0"
        android:pivotY="100%"
        android:toXScale="1"
        android:toYScale="0" />
</set>

調用方式:

SystemUtils.customDialog(this,
                R.layout.view_share,
                R.style.showDialog,
                Gravity.BOTTOM,
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                R.style.AnimBottom);

 

3.從左往右彈出:

 <style name="AnimLeft" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_left_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_left_out</item>
    </style>

進入動畫：dialog_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromXDelta="-100%p"
            android:toXDelta="0"
            android:duration="300"/>

    <!-- pivotX 可以是   -->
<!--    <scale-->
<!--        android:fromXScale="0"-->
<!--        android:fromYScale="1"-->
<!--        android:pivotX="0"-->
<!--        android:pivotY="0"-->
<!--        android:toXScale="1"-->
<!--        android:toYScale="1" />-->

</set>

退出動畫:dialog_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">

        <translate
            android:fromXDelta="0"
            android:toXDelta="-100%p" />

<!--    <scale-->
<!--        android:fromXScale="1"-->
<!--        android:fromYScale="1"-->
<!--        android:toXScale="0"-->
<!--        android:toYScale="1"-->
<!--        android:pivotX="0"-->
<!--        android:pivotY="0"/>-->
</set>

調用方式:

SystemUtils.customDialog(this,
                R.layout.view_share,
                R.style.ShareDialog,
                Gravity.LEFT,
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                R.style.AnimLeft);

 

4.從右往左彈出:

  <style name="AnimRight" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_right_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_right_out</item>
    </style>

進入動畫:dialog_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromXDelta="100%p"
            android:toXDelta="0"
            android:duration="300"/>

    <!-- pivotX 可以是數字、百分比
    50px表示原點坐標加上50即是控件的x位置
    50%表示原點坐標加上控件自身的50%
    50%p 表示原點位置加上父控件的50%  -->
<!--    <scale-->
<!--        android:fromXScale="0"-->
<!--        android:fromYScale="1"-->
<!--        android:pivotX="100%"-->
<!--        android:pivotY="0"-->
<!--        android:toXScale="1"-->
<!--        android:toYScale="1" />-->

</set>

退出動畫:dialog_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

        <translate
            android:fromXDelta="0"
            android:toXDelta="100%p"
            android:duration="300"/>

<!--    <scale-->
<!--        android:fromXScale="1"-->
<!--        android:fromYScale="1"-->
<!--        android:toXScale="0"-->
<!--        android:toYScale="1"-->
<!--        android:pivotX="100%"-->
<!--        android:pivotY="0"/>-->
</set>

調用方式:

  SystemUtils.customDialog(this,
                R.layout.view_share,
                R.style.showDialog,
                Gravity.RIGHT,
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                R.style.AnimRight);

 

5.從中間彈出:

    <style name="AnimCenter" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_center_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_center_out</item>
    </style>

進入動畫:dialog_center_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <!--    若均為 0% 或 0.0 ，起始點為 View 左上角；
            均為 50% 或 0.5 ，起始點為控件中心點；
            均為100% 或 1.0 ，起始點是 View 右下角。-->
    <!--    100%p會下移一個單位-->
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
</set>

退出動畫:dialog_center_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200">
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0"
        android:toYScale="0" />
</set>

調用方式:

 SystemUtils.customDialog(this,
                R.layout.view_share,
                R.style.showDialog,
                Gravity.CENTER_HORIZONTAL,
                WindowManager.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT,
                R.style.AnimCenter);

 最后搞5個按鈕進行測試。