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个按钮进行测试。
浙公网安备 33010602011771号