弹框广告思路及实现

简介

为了达到广告推广的效果，让用户 100 % 看到广告，有些 app 在进入的时候会提示一个全屏的弹框广告，例如下面这种:

图片

实现

1. 定义布局文件：

   主要有三个图片元素，广告图，竖线，关闭✘号，按照位置显示出来就好

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/rl_dialog_ad"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
   
       <ImageView
           android:id="@+id/iv_alert_ad_content"
           android:layout_width="260dp"
           android:layout_height="300dp"
           android:layout_centerInParent="true"
           android:scaleType="fitXY"
           android:src="@mipmap/ic_alert_content"/>
   
       <ImageView
           android:id="@+id/iv_alert_ad_line"
           android:layout_width="0.5dp"
           android:layout_height="20dp"
           android:layout_above="@id/iv_alert_ad_content"
           android:layout_alignRight="@id/iv_alert_ad_content"
           android:layout_marginRight="20dp"
           android:scaleType="fitXY"
           android:src="@mipmap/ic_alert_line"/>
   
       <ImageView
           android:id="@+id/iv_alert_ad_close"
           android:layout_width="20dp"
           android:layout_height="20dp"
           android:layout_above="@id/iv_alert_ad_line"
           android:layout_alignRight="@id/iv_alert_ad_content"
           android:layout_marginRight="10dp"
           android:scaleType="fitXY"
           android:src="@mipmap/ic_alert_close"/>
   
   </RelativeLayout>
   

2. 显示

   显示的方式是显示一个全局的 AlertDialog ，这个里面也是有一些坑的

   private void showAlertAdDialg(final AdvertisementResponse.Advertisement advertisement) {
           final Dialog dialog = new Dialog(this, R.style.fullscreen_dialog);
           View dialogView = LayoutInflater.from(this).inflate(R.layout.dialog_alert_ad, null, false);
           View ivClose = dialogView.findViewById(R.id.iv_alert_ad_close);
           ImageView ivOpenAd = (ImageView) dialogView.findViewById(R.id.iv_alert_ad_content);
           if (!TextUtils.isEmpty(advertisement.getPictureUrl())) {
               Glide.with(this)
                       .load(advertisement.getPictureUrl())
                       .into(ivOpenAd);
           }
           dialogView.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   dialog.dismiss();
               }
           });
           ivClose.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   dialog.dismiss();
               }
           });
           ivOpenAd.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   Intent intent = new Intent(mContext, ComWebActivity.class);
                   intent.putExtra(INTENT_KEY_HTML_TITLE, advertisement.getDetailTitle());
                   intent.putExtra(INTENT_KEY_HTML_URL, advertisement.getDetailUrl());
                   MainActivity.this.startActivity(intent);
               }
           });
           dialog.setContentView(dialogView);
           dialog.getWindow().setGravity(Gravity.CENTER);
           dialog.setCanceledOnTouchOutside(true);
           dialog.setCancelable(true);
           WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
           lp.width = WindowManager.LayoutParams.MATCH_PARENT;
           lp.height = WindowManager.LayoutParams.MATCH_PARENT;
           dialog.getWindow().setAttributes(lp);
           dialog.show();
       }
   

   上面这段方法主要做了几件事情：

   1. 创建了一个全屏背景半透明的 Dialog，这个全屏主要是通过样式和设置 Dialog 的 WindowAttribute实现的

      样式：

      <style name="fullscreen_dialog">
              <item name="android:windowFullscreen">true</item>
              <item name="android:windowNoTitle">true</item>
              <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
              <item name="android:windowIsTranslucent">false</item><!--透明-->
              <item name="android:windowBackground">@android:color/transparent</item><!--背景半透明-->
              <item name="android:backgroundDimEnabled">true</item><!--模糊-->
      </style>
      

      设置为全屏大小：

      WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
      lp.width = WindowManager.LayoutParams.MATCH_PARENT;
      lp.height = WindowManager.LayoutParams.MATCH_PARENT;
      dialog.getWindow().setAttributes(lp);
      

   2. 加载布局，加载图片到 ImageView ，并设置到 Dialog 内

   3. 显示 Dialog