Android基础控件——Dialog的自定义，仿淘宝、天猫、京东等商城广告弹窗

Dialog的自定义，仿淘宝、天猫、京东等商城广告弹窗

---

学习，学习，学以致用

Dialog已经是安卓开发者的家常便饭了，经常用来作为一些提醒功能，但是它也可以拓展为广告弹窗效果，让我们来自定义一个广告的Dialog吧。下面是今天要实现的效果图

一、自定义Dialog布局的实现

Dialog的布局很简单，其实就是一个充满容器的图片，view_dialog_advertisement.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <ImageView        android:id="@+id/iv_advertisement"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="12dp"        android:src="@drawable/welcome_advertisement" /></RelativeLayout>

在Dialog里面放置我们要显示的效果图即可

二、自定义Dialog代码的实现

public class MyAdvertisementView extends Dialog implements View.OnClickListener {    public MyAdvertisementView(Context context) {        super(context);        setContentView(R.layout.view_dialog_advertisement);        //设置点击布局外则Dialog消失        setCanceledOnTouchOutside(true);    }    public void showDialog() {        Window window = getWindow();        //设置弹窗动画        window.setWindowAnimations(R.style.style_dialog);        //设置Dialog背景色        window.setBackgroundDrawableResource(R.color.colorTransparent);        WindowManager.LayoutParams wl = window.getAttributes();        //设置弹窗位置        wl.gravity = Gravity.CENTER;        window.setAttributes(wl);        show();        findViewById(R.id.iv_advertisement).setOnClickListener(this);    }    @Override    public void onClick(View v) {        dismiss();    }}

上面代码所做的事情

1. 初始化设置Dialog显示的布局
2. 提供一个方法弹出Dialog
3. 设置Dialog里面控件的点击事件

三、自定义Dialog的弹窗动画

在代码中通过window.setWindowAnimations()设置我们的弹窗动画，下面来style.xml的代码

<!-- dialog动画 --><style name="style_dialog">    <item name="android:windowEnterAnimation">@anim/anim_popup_zoom_enter</item>    <item name="android:windowExitAnimation">@anim/anim_popup_zoom_exit</item></style>

anim_popup_zoom_enter.xml

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

anim_popup_zoom_exit.xml

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

四、使用自定义Dialog

在代码中只需要创建我们的Dialog对象，然后调用我们提供的弹窗方法即可

MyAdvertisementView myAdvertisementView = new MyAdvertisementView(this);myAdvertisementView.showDialog();

部分源码下载

到这里的课程就结束，如果对基础控件感兴趣的朋友可以关注我博客的基础控件系列