Github項目解析（十一）--)一個簡單，強大的自定義廣告活動彈窗

上一篇文章中講解了我最近寫的一個快速集成二維碼掃描庫，其核心的實現掃描的功能，是通過調用ZXing庫實現的。由於在實現二維碼掃描功能的時候發現集成二維碼掃描功能並不是特別方便，於是有了將其制作成標准庫的想法，這個二維碼庫能夠快速，方便的集成二維碼掃描功能，項目地址是在：android-zxingLibrary**，在項目開源後有不少同學提出了許多不錯的意見，目前也在不斷的迭代中，自己也學到了很多。

本文我們將講解一個簡單，強大的廣告活動彈窗控件。不少App在打開的時候需要彈出一個廣告活動彈窗，點擊廣告活動彈窗中的圖片就會跳轉到一個H5頁面，加載顯示具體的活動內容等，為了方便大家的操作，我將其做成了一個標准控件：android-adDialog。需要說明的是，雖然其名稱為android-adDialog，並且表現形式也和Dialog類似，但是這裡並不是通過Dialog實現的，而是自定義的View。

本項目的github地址：android-adDialog，歡迎star和follow。

在介紹具體的使用說明之前，我們先看一下簡單的實現效果：

使用說明

顯示一個默認廣告彈窗，支持單廣告活動、多廣告活動，當彈窗顯示多廣告是默認顯示底部小圓圈，當顯示單活動時默認不顯示底部小圓圈；<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPsSsyM/Wp7PWta+0sLTTyc+jrM/Co6zX86Os09KjrNfzyc+jrNPSyc+jrNfzz8KjrNPSz8K1yLDLuPa3vc/yta+z9qOsuPy/ydLUyejWw7TTyM7S4ta4tqi1xL3HtsijqDAtMzYwo6m1r7P2o7s8L3A+DQo8cD7ErMjPvMyz0MHLta/Q1Lavu63Qp7n7o6y/ydLUyei2qLWv0NS2r7utta/Q1LLOyv2jrLavu63L2bbItcijuzwvcD4NCjxwPtans9a21LWvtLCxs76wzbjD98mrtcS4/LjEo6zWp7PWttS1r7SwzbjD96Os1qez1sno1sO1r7SwsbO+sMirxsHP1Mq+u/LV38rH1rvU2sTayN3H+NPyz9TKvqO7PC9wPg0KPHA+1qez1snotqi1r7Swv+2437HIo6zWp7PWyejWw7WvtLC+4MDrxsHEu8G9suC+4MDro6zWp7PWyejWw7nYsdWwtMWlyse38c/Uyr6juzwvcD4NCjxwPtans9a21LnYsdWwtMWlteO798rCvP61xLvYtfejrLbUw7/Su8/uueO45rvutq+147v3ysK8/rXEu9i197XIo7s8L3A+DQo8cD7Wp7PWttRWaWV3UGFnZXK7rLavtq+7rdCnufu1xMnotqijrNans9bX1Lao0uVWaWV3UGFnZXK7rLavtq+7rdCnufujuzwvcD4NCjxwPjxzdHJvbmc+QVBJy7XD96O6PC9zdHJvbmc+PC9wPg0KPHA+y/nT0LXEyejWw7LOyv2++be1u9hBZE1hbmFnZXK21M/zo6zL+dLUv8nS1NaxvdPBtMq9tffTw6GjPC9wPg0KPHByZSBjbGFzcz0="brush:java;"> AdManager adManager = new AdManager(MainActivity.this, advList); aDMamager. /** * 設置彈窗背景全屏顯示還是在內容區域顯示 */ .setOverScreen(true) /** * 設置ViewPager的滑動動畫 */ .setPageTransformer(new DepthPageTransformer()) /** * 設置彈窗距離屏幕兩側的距離（單位dp） */ .setPadding(100) /** * 設置彈窗的寬高比 */ .setWidthPerHeight(0.75f) /** * 設置彈窗的背景色（當彈窗背景設置透明時，此設置失效） */ .setBackViewColor(Color.parseColor("#AA333333")) /** * 設置彈窗背景是否透明 */ .setAnimBackViewTransparent(true) /** * 設置彈窗關閉圖標是否可見 */ .setDialogCloseable(false) /** * 設置彈窗彈性滑動彈性值 */ .setBounciness(15) /** * 設置彈窗彈性滑動速度值 */ .setSpeed(5) /** * 設定彈窗點擊事件回調 */ .setOnImageClickListener(new AdManager.OnImageClickListener() {}) /** * 設定關閉按鈕點擊事件回調 */ .setOnCliseClickListener(new OnClickListener() {}) /** * 開始執行彈窗的顯示操作，可傳值為0-360，0表示從右開始彈出，逆時針方向，也可以傳入自定義的方向值 */ .showAdDialog(AdConstant.ANIM_UP_TO_DOWN)

使用方式：

在module的build.gradle中執行compile操作

compile 'cn.yipianfengye.android:ad-library:1.0'

在代碼中初始化數據

/**
     * 初始化數據
     */
    private void initData() {
        advList = new ArrayList<>();
        AdInfo adInfo = new AdInfo();
        adInfo.setActivityImg("https://raw.githubusercontent.com/yipianfengye/android-adDialog/master/images/testImage1.png");
        advList.add(adInfo);

        adInfo = new AdInfo();
        adInfo.setActivityImg("https://raw.githubusercontent.com/yipianfengye/android-adDialog/master/images/testImage2.png");
        advList.add(adInfo);
    }

這裡只要是初始化圖片的UI地址信息，方便我們的後續下載操作。

執行彈窗的初始化與現實操作

/**
 * 創建廣告活動管理對象
 */
AdManager adManager = new AdManager(MainActivity.this, advList);
adManager.setOverScreen(true)
         .setPageTransformer(new DepthPageTransformer());
/**
 * 執行彈窗的顯示操作
 */
adManager.showAdDialog(AdConstant.ANIM_DOWN_TO_UP);

怎麼樣是不是很簡單？下面我們可以來看一下具體API。

具體的API說明：

（1）自定義的彈窗彈出方向API

在執行AdManager的showAdDialog方法時，需要傳遞一個int型的animType參數，我們默認定義了八個該類型的參數，默認如下：

// ####################### 彈出動畫效果 ###########################
    /**
     * 廣告活動彈窗動畫-從上至下
     */
    public static final int ANIM_UP_TO_DOWN = -11;
    /**
     * 廣告活動彈窗動畫-從下至上
     */
    public static final int ANIM_DOWN_TO_UP = -12;
    /**
     * 廣告活動彈窗動畫-從左至右
     */
    public static final int ANIM_LEFT_TO_RIGHT = -13;
    /**
     * 廣告活動彈窗動畫-從右至左
     */
    public static final int ANIM_RIGHT_TO_LEFT = -14;
    /**
     * 廣告活動彈窗動畫-從左上彈出
     */
    public static final int ANIM_UPLEFT_TO_CENTER = -15;
    /**
     * 廣告活動彈窗動畫-從右上彈出
     */
    public static final int ANIM_UPRIGHT_TO_CENTER = -16;
    /**
     * 廣告活動彈窗動畫-從左下彈出
     */
    public static final int ANIM_DOWNLEFT_TO_CENTER = -17;
    /**
     * 廣告活動彈窗動畫-從右下彈出
     */
    public static final int ANIM_DOWNRIGHT_TO_CENTER = -18;

好吧，如果你覺得還不夠好，我想讓彈窗從右上側30度角的彈出可以麼？這也是支持的，只需要你傳遞的int型的animType的時候傳遞30就好了，如下：

/**
 * 執行彈窗的顯示操作（參數的范圍：0-360，0表示從右側彈出，逆時針旋轉）
 */
adManager.showAdDialog(30);

那麼我們看一下執行效果呢：

（2）自定義彈窗距離屏幕兩側的距離以及彈窗的寬高比：

/**
         * 自定義設置廣告活動彈窗距離屏幕兩側距離以及寬高比
         */
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AdManager adManager = new AdManager(MainActivity.this, advList);

                adManager.setOnImageClickListener(new AdManager.OnImageClickListener() {
                    @Override
                    public void onImageClick(View view, AdInfo advInfo) {
                        Toast.makeText(MainActivity.this, "您點擊了ViewPagerItem...", Toast.LENGTH_SHORT).show();
                    }
                })
                .setPadding(100)
                .setWidthPerHeight(0.5f)
                .showAdDialog(AdConstant.ANIM_UP_TO_DOWN);
            }
        });

然後我們看一下執行效果：

怎麼樣？是不是發現彈窗的寬高比和距離屏幕兩側的距離發生了變化？

（3）自定義背景顏色，自定義彈窗是否覆蓋全屏，關閉按鈕是否顯示

/**
         * 自定義彈窗背景顏色,彈窗是否覆蓋全屏,關閉按鈕是否顯示等
         */
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AdManager adManager = new AdManager(MainActivity.this, advList);

                adManager.setOnImageClickListener(new AdManager.OnImageClickListener() {
                    @Override
                    public void onImageClick(View view, AdInfo advInfo) {
                        Toast.makeText(MainActivity.this, "您點擊了ViewPagerItem...", Toast.LENGTH_SHORT).show();
                    }
                })
                .setBackViewColor(Color.parseColor("#AA333333"))
                .setDialogCloseable(false)
                .showAdDialog(AdConstant.ANIM_UP_TO_DOWN);
            }
        });

然後我們來看一下具體的實現效果：

可以看到我們更改了彈窗的背景顏色以及未顯示關閉按鈕

（4）自定義設置彈性動畫彈性參數和速度參數

/**
         * 自定義設定彈窗彈性參數和速度參數
         */
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AdManager adManager = new AdManager(MainActivity.this, advList);

                adManager.setOnImageClickListener(new AdManager.OnImageClickListener() {
                    @Override
                    public void onImageClick(View view, AdInfo advInfo) {
                        Toast.makeText(MainActivity.this, "您點擊了ViewPagerItem...", Toast.LENGTH_SHORT).show();
                    }
                })
                .setBounciness(20)
                .setSpeed(4)
                .showAdDialog(AdConstant.ANIM_UP_TO_DOWN);
            }
        });

然後我們看一下動畫效果：

為了明顯的展示出動畫效果，我們設置的彈性參數和速度參數比較大，是不是比較出來了這兩個參數的作用？

（5）自定義設置彈窗ViewPager滑動動畫：

/**
         * 自定義設置彈窗ViewPager滑動動畫
         */
        button5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AdManager adManager = new AdManager(MainActivity.this, advList);

                adManager.setOnImageClickListener(new AdManager.OnImageClickListener() {
                    @Override
                    public void onImageClick(View view, AdInfo advInfo) {
                        Toast.makeText(MainActivity.this, "您點擊了ViewPagerItem...", Toast.LENGTH_SHORT).show();
                    }
                })
                .setPageTransformer(new RotateDownPageTransformer())
                .showAdDialog(AdConstant.ANIM_UP_TO_DOWN);
            }
        });

然後我們看一下彈窗的滑動動畫：

這裡我內置了三種ViewPager的滑動動畫效果：

DepthPageTransformer；
RotateDownPageTransformer；
ZoomOutPageTransformer；

我們還可以自定義實現：PageTransformer自定義出自己的滑動動畫效果，更多關於PageTransformer的知識，可參考鴻洋大神的： Android 實現個性的ViewPager切換動畫 實戰PageTransformer（兼容Android3.0以下）

（6）自定義關閉按鈕點擊事件回調，ViewPagerItem點擊事件回調

/**
         * 自定義設置彈窗ViewPagerItem點擊事件，關閉按鈕點擊事件回調
         */
        button6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AdManager adManager = new AdManager(MainActivity.this, advList);

                adManager.setOnImageClickListener(new AdManager.OnImageClickListener() {
                    @Override
                    public void onImageClick(View view, AdInfo advInfo) {
                        Toast.makeText(MainActivity.this, "您點擊了ViewPagerItem...", Toast.LENGTH_SHORT).show();
                    }
                })
                .setOnCloseClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "您點擊了關閉按鈕...", Toast.LENGTH_SHORT).show();
                            }
                        })
                .showAdDialog(AdConstant.ANIM_UP_TO_DOWN);
            }
        });

好吧，以上就是廣告活動彈窗的API，除了以上還可以添加其他的一些API，歡迎提出。

總結：

以上就是我實現的這個自定義廣告活動彈窗控件。其還可以添加一些其他的API，歡迎提出，對於源碼有興趣的同學可以到github上看一下具體實現。項目地址：android-adDialog