开发首屏广告(Android)简述

欢迎Follow我的GitHub, 关注我的简书.

需求:

广告需求图

本文的合集已经编著成书,高级Android开发强化实战,欢迎各位读友的建议和指导。在京东即可购买:https://item.jd.com/12385680.html

Android

作为一个成熟的应用, 必须要有广告. 那么, 如何优雅地开发广告呢? 需要注意一些细节.
本文提供一个简单的示例, 代码仅供参考.

具体来说, 就是

  1. 显示本地存储广告图片, 点击图片, 跳转广告链接, 并提供微信分享功能.
  2. 异步下载广告信息, 提高启动速度; 异步下载并保存广告和分享图片, 提高加载速度.

开发过程中, 使用了一些小技巧, 我会详细讲解注意的要点, 包括:
(1) 使用RxAndroid库, 在新线程上做异步下载广告信息.
(2) 使用Picasso库, 异步下载图片(Bitmap)并存储至本地.
(3) 使用原生Handler类, 实现计时器功能, 按秒跳转数字.
(4) 使用WebView视图, 加载广告链接, 并提供分享功能.

1. 下载广告

在欢迎页面中, 启动一个异步线程, 加载广告信息, 提高启动速度, 防止网速过慢导致切换卡顿.

    // 异步广告信息
    private void AsyncCheckInfo() {
        // 异步线程处理监听, 在新线程上监听, 发送到主线程
        Observable<String> observable = Observable.create(new Observable.OnSubscribe<String>() {
            @Override
            public void call(Subscriber<? super String> subscriber) {
                subscriber.onNext(checkInfo());
                subscriber.onCompleted();
            }
        }).subscribeOn(Schedulers.newThread()).observeOn(AndroidSchedulers.mainThread());

        // 成功回调
        observable.subscribe(new Subscriber<String>() {
            @Override
            public void onCompleted() {
                Log.i(TAG, "onCompleted");
            }

            @Override
            public void onError(Throwable e) {
            }

            @Override
            public void onNext(String s) {
                Log.i(TAG, "onNext");
            }
        });
    }

在新线程(newThread)中加载, 完成后发送到主线程(mainThread). 参考.

判断网络, 在有网的时候, 加载广告信息; 在无网的时候, 直接略过.

    // 加载广告信息
    public String checkInfo() {
        if (NetUtils.isNetworkConnected(ChunyuApp.getAppContext())) {
            UpdateUtils.checkDailyInfo(WelcomeActivity.this, mDailyRequestCallback);
            return "Begin to load info.";
        } else {
            return "Stop to load info";
        }
    }

UpdateUtils.checkDailyInfo中, 解析广告请求的返回值. 如果包含广告信息, 则存储在首选项(SharedPreference)中, 下次启动广告直接读取; 如果不包含广告信息, 则设置无数据标记, 在使用时判定无广告.
最后调用回调接口mDailyRequestCallback继续处理.

                        ArrayList<Advert> adverts = version.advert;
                        if (adverts.size() > 0) {
                            for (int i = 0; i < adverts.size(); ++i) {
                                Advert advert = adverts.get(i);
                                if (advert.Number == 1) { // Number等于0是广告
                                    PedometerAdManager.getInstance().init(advert);
                                }
                            }
                        } else {
                            Log.e(TAG, "广告是空");
                            SharedPreferences sp =
                                    PreferenceManager.getDefaultSharedPreferences(ChunyuApp.getAppContext());
                            sp.edit().putBoolean(WelcomeActivity.FIRST_AD_IS_HAVE_PREFS, false).apply();
                        }

2. 存储图片

已经存储广告信息之后, 即可获得图片下载链接, 为了提高显示速度, 下载图片存储在本地. 因为下载属于网络请求, 需要异步处理, 本文使用Picasso库, 没有发明轮子.

    // 日常信息回调
    private final UpdateUtils.DailyRequestCallback mDailyRequestCallback
            = new UpdateUtils.DailyRequestCallback() {
        @Override
        public void operationExecutedSuccess() {
            if (mAdManager.getImageUrl() != null && !mAdManager.getImageUrl().isEmpty())
                Picasso.with(WelcomeActivity.this).
                        load(mAdManager.getImageUrl()).into(mAdImageTarget);

            if (mAdManager.getShareIcon() != null && !mAdManager.getShareIcon().isEmpty())
                Picasso.with(WelcomeActivity.this).
                        load(mAdManager.getShareIcon()).into(mAdShareImageTarget);
        }

        @Override
        public void operationExecutedFailed() {
            Log.e(TAG, "operationExecutedFailed");
        }
    };

    // 广告图片
    private Target mAdImageTarget = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            String path = FileUtility.savePic(bitmap);
            mPrefs.edit().putString(FIRST_AD_PATH_PREFS, path).apply();
        }

        @Override public void onBitmapFailed(Drawable errorDrawable) {

        }

        @Override public void onPrepareLoad(Drawable placeHolderDrawable) {

        }
    };

    // 分享Icon
    private Target mAdShareImageTarget = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            String path = FileUtility.savePic(bitmap);
            mPrefs.edit().putString(FIRST_AD_SHARE_IMAGE_URL_PREFS, path).apply();
        }

        @Override public void onBitmapFailed(Drawable errorDrawable) {
        }

        @Override public void onPrepareLoad(Drawable placeHolderDrawable) {

        }
    };

在页面暂停时, 移除Picasso的请求线程.

    @Override
    protected void onPause() {
        MobclickAgent.onPause(this);
        handler.removeCallbacks(runnable); // 停止
        Picasso.with(this).cancelRequest(mAdImageTarget); // 停止
        Picasso.with(this).cancelRequest(mAdShareImageTarget); // 停止
        super.onPause();
    }

注意: 在Picasso中, Target是和ImageView控件弱绑定, 在销毁ImageView时, 会随之销毁. 如果未提供ImageView控件, 需要手动销毁请求, 如在onPause中取消. 否则会出现下载异常. 参考.

3. 显示广告

首先Logo页显示LOGO_TIME秒, 再判断显示引导(首次启动)显示广告.
显示广告是使用存储在首选项(SharedPreference)中的数据, 图片使用本地资源解析, 提高显示速度.

    // 显示启动信息
    private void showLaunchInfo() {
        // 显示一段时间的主屏Logo
        new Handler().postDelayed(this::showAdInfo, LOGO_TIME);
    }

    // 显示广告信息
    private void showAdInfo() {
        // 判断是否有广告
        if (mPrefs.getBoolean(FIRST_AD_IS_HAVE_PREFS, false)) {
            Log.e(TAG, "包含广告");
            String path = mPrefs.getString(FIRST_AD_PATH_PREFS, "");
            if (!path.isEmpty()) {
                int time = mPrefs.getInt(FIRST_AD_TIME_PREFS, 0);
                Bitmap bitmap = BitmapFactory.decodeFile(path);
                Log.e(TAG, "time: " + time);
                showAdImage(bitmap, time);
                if (!NetUtils.isNetworkConnected(ChunyuApp.getAppContext())) {
                    mIvWebImage.setClickable(false);
                }
            } else {
                gotoOtherActivity();
            }
        } else {
            gotoOtherActivity();
        }
    }

显示的广告使用上次网络请求的存储数据, 也可能是本次网络请求的, 主要取决于在LOGO_TIME时间中, 是否下载完成启动信息, 并存储至本地.

4. 广告计时器

在广告图片显示时, 提供倒计时器, 按秒跳时, 提供跳过按钮直接跳过广告.

    // 显示广告
    private void showAdImage(Bitmap bitmap, int time) {
        mIvWebImage.setVisibility(View.VISIBLE);
        mTvSkip.setVisibility(View.VISIBLE);
        mTvSkip.setOnClickListener(v -> gotoOtherActivity());
        mIvBackground.setVisibility(View.INVISIBLE);
        mIvFirstLogo.setVisibility(View.INVISIBLE);

        mIvWebImage.setImageBitmap(bitmap);
        mAdTime = time + 2;
        handler.post(runnable); // 设置读秒
    }

    // 设置读秒器
    private int s = 0; // 时间Delay
    private final Handler handler = new Handler();
    private final Runnable runnable = new Runnable() {
        @Override
        public void run() {
            // handler自带方法实现定时器
            try {
                handler.postDelayed(this, 1000);

                if (s < 1) {
                    s++;
                    return;
                }

                if (s <= (mAdTime - 1)) {
                    mTvSkip.setText(String.valueOf("跳过\n"
                            + Integer.toString((mAdTime - 1) - (s++)) + "秒"));
                }

                // 计时器为0时, 开始跳转
                if (s == mAdTime) {
                    gotoOtherActivity();
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    };

广告时间额外显示两秒, 提供页面跳转间隔, 前一秒后一秒, 保证广告时间充足.

广告页跳转页面结束时, 删除计时回调.

    // 跳转到现实广告的视图
    public void gotoShowAdView(View view) {
        NV.o(this, AdvertisementActivity.class);
        handler.removeCallbacks(runnable);
        finish();
    }
    @Override
    protected void onPause() {
        MobclickAgent.onPause(this);
        handler.removeCallbacks(runnable); // 停止
        Picasso.with(this).cancelRequest(mAdImageTarget); // 停止
        Picasso.with(this).cancelRequest(mAdShareImageTarget); // 停止
        super.onPause();
    }

本文使用handler类, 循环调用计时, 必须在离开页面时, 清除runnable回调. 否则会遗忘线程泄露内存.

5. 链接页面

点击广告图片, 会跳转至广告链接, 根据参数设置全屏或者提供分享功能, 把链接分享至微信. 微信分享需要标题, 内容, 图标(Icon), 其中图片是从服务器下载后预存在本地.

/**
 * 广告Activity
 * <p>
 * Created by wangchenlong on 15/12/2.
 */
public class AdvertisementActivity extends PActivity {

    @SuppressWarnings("unused")
    private static final String TAG = "DEBUG-WCL: "
            + AdvertisementActivity.class.getSimpleName();

    @Bind(R.id.advertise_pwv_container) PedoWebView mPwvContainer;
    @Bind(R.id.advertise_ll_back_home) LinearLayout mLlBackHome;
    @Bind(R.id.advertise_ll_send_session) LinearLayout mLlSendSession;
    @Bind(R.id.advertise_ll_send_timeline) LinearLayout mLlSendTimeline;
    @Bind(R.id.advertise_ll_action_bar) LinearLayout mLlActionBar;

    private SharedPreferences mPrefs;
    private int mFlag; // 判断分享地点

    private static final int WECHAT_SESSION = 0;    // 微信对话
    private static final int WECHAT_TIMELINE = 1;   // 朋友圈

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_advertisement);
        ButterKnife.bind(this);

        mPrefs = PreferenceManager.getDefaultSharedPreferences(ChunyuApp.getAppContext());

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null)
            actionBar.setDisplayHomeAsUpEnabled(true);

        // 是否全屏
        if (mPrefs.getBoolean(WelcomeActivity.FIRST_AD_IS_FULL_PREFS, false)) {
            mLlActionBar.setVisibility(View.GONE);
        } else {
            mLlBackHome.setOnClickListener(v -> {
                NV.o(this, PedometerActivity.class);
                finish();
            });

            // 是否分享
            if (mPrefs.getBoolean(WelcomeActivity.FIRST_AD_IS_SHARE_PREFS, false)) {
                mLlSendSession.setOnClickListener(v -> {
                    mFlag = WECHAT_SESSION;
                    shareWechat();
                });
                mLlSendTimeline.setOnClickListener(v -> {
                    mFlag = WECHAT_TIMELINE;
                    shareWechat();
                });
            } else {
                mLlSendSession.setVisibility(View.GONE);
                mLlSendTimeline.setVisibility(View.GONE);
            }
        }

        mPwvContainer.loadUrl(mPrefs.getString(WelcomeActivity.FIRST_AD_URL_PREFS, ""));
    }

    // 分享到微信
    public void shareWechat() {
        IWXAPI wxapi =
                WXAPIFactory.createWXAPI(ChunyuApp.getAppContext(), SNSConst.WX_APP_ID_ONLINE, true);
        wxapi.registerApp(SNSConst.WX_APP_ID_ONLINE);

        WXWebpageObject webpage = new WXWebpageObject();
        webpage.webpageUrl = mPrefs.getString(WelcomeActivity.FIRST_AD_URL_PREFS, "");
        WXMediaMessage msg = new WXMediaMessage(webpage);
        msg.title = mPrefs.getString(WelcomeActivity.FIRST_AD_SHARE_TITLE_PREFS, "");
        msg.description = mPrefs.getString(WelcomeActivity.FIRST_AD_SHARE_CONTENT_PREFS, "");

        String path = mPrefs.getString(WelcomeActivity.FIRST_AD_SHARE_IMAGE_URL_PREFS, "");
        if (!path.isEmpty()) {
            Bitmap bitmap = BitmapFactory.decodeFile(path);
            if (bitmap != null) {
                msg.setThumbImage(bitmap);
            } else {
                msg.setThumbImage(BitmapFactory.decodeResource(getResources(), R.drawable.icon));
            }
            SendMessageToWX.Req req = new SendMessageToWX.Req();
            req.transaction = String.valueOf(System.currentTimeMillis());
            req.message = msg;
            req.scene = ((mFlag == 0) ?
                    SendMessageToWX.Req.WXSceneSession : SendMessageToWX.Req.WXSceneTimeline);
            wxapi.sendReq(req);
        }
    }

    @Override public void onBackPressed() {
        if (mPwvContainer.canGoBack()) {
            mPwvContainer.goBack();
        } else {
            NV.o(this, PedometerActivity.class);
            finish();
        }
    }
}

调用后退按钮(onBackPressed): 在网页跳转多页时, 返回上一页; 在首页时, 退出广告页面, 跳转主页. 微信分享的图标(Icon), 最好使用方形全图, 否则透明部分会被黑色替代, 服务器提供图片时需要注意.

最终效果:

动画效果

OK, 广告页面开发完成了, 可以开心的赚钱了! Enjoy It.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容