简介

Banner广告是在应用程序顶部、中部或底部占据一个位置的矩形图片,广告内容每隔一段时间会自动刷新,点击内容时会跳转到广告主的页面。

此codelab将引导您在应用中增加横幅广告的展示。在整个过程中,将介绍如何添加代码的详细过程以正确展示横幅广告。

您将建立什么

您将在您的应用中通过HUAWEI Ads SDK获取Banner广告和展示Banner广告。

您将会学到什么

硬件要求

支持EMUI 3.0及以上的华为手机、华为平板。

软件要求

需要的知识点

Android基础开发能力。

在Android Studio中创建项目

  1. 打开Android Studio。
  2. 创建新项目,选择"Empty Activity",命名为"BannerExample"。
  3. 点击"完成"。

配置HUAWEI VAST SDK仓库及依赖包

  1. 配置Maven仓地址。

    Android Studio的代码库配置在Gradle 插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle 插件版本,选择对应的配置过程。

    7.0以下版本

    7.0版本

    7.1及以上版本

    • 7.0以下版本
      i.  打开Android Studio项目级"build.gradle"文件。


      ii.  添加Maven代码库。

      • 在"buildscript > repositories"中配置Maven仓地址。
      • 在"allprojects > repositories"中配置Maven仓地址。
      buildscript { repositories { google() jcenter() // 配置HUAWEI Ads SDK的Maven仓地址 maven {url 'https://developer.huawei.com/repo/'} } } allprojects { repositories { google() jcenter() // 配置HUAWEI Ads SDK的Maven仓地址 maven {url 'https://developer.huawei.com/repo/'} } }
    • 7.0版本
      i.  打开Android Studio项目级"build.gradle"文件。


      ii.  添加Maven代码库。

        在"buildscript > repositories"中配置Maven仓地址。

      buildscript { repositories { google() jcenter() // 配置HUAWEI Ads SDK的Maven仓地址 maven {url 'https://developer.huawei.com/repo/'} } }

      iii.  打开项目级"settings.gradle"文件,配置Maven仓地址。

      dependencyResolutionManagement { ... repositories { google() jcenter() // 配置HUAWEI Ads SDK的Maven仓地址 maven {url 'https://developer.huawei.com/repo/'} } }
    • 7.1及以上版本
      打开项目级"settings.gradle"文件,配置Maven仓地址。

      pluginManagement { repositories { gradlePluginPortal() google() mavenCentral() // 配置HUAWEI Ads SDK的Maven仓地址 maven { url 'https://developer.huawei.com/repo/' } } } dependencyResolutionManagement { ... repositories { google() mavenCentral() // 配置HUAWEI Ads SDK的Maven仓地址 maven { url 'https://developer.huawei.com/repo/' } } }
  2. 在应用级"build.gradle"文件中配置依赖包,需添加下面内容,并将{version}替换为实际的HUAWEI Ads SDK版本号,请参见版本更新说明
    dependencies { ... implementation 'com.huawei.hms:ads-lite:{version}' ... }
  3. 点击"Sync Now"等待同步完成。

配置混淆脚本

您编译APK前需要配置不要混淆HUAWEI Ads SDK,避免功能异常。
打开Android工程应用级根目录下的"app/proguard-rules.pro"混淆配置文件,添加如下两行代码,加入排除HUAWEI Ads SDK的混淆配置。

-keep class com.huawei.openalliance.ad.** { *; } -keep class com.huawei.hms.ads.** { *; }

要借助于HUAWEI Ads SDK获取广告,必须先在您的应用中调用HwAds.init()方法初始化SDK ,此过程需要在应用程序启动时完成,在应用后续运行过程中无需重复执行此过程。
在MainActivity类的onCreate()方法中调用HwAds.init()以执行HUAWEI Ads SDK初始化。
代码片段示例:

import com.huawei.hms.ads.HwAds; ... public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化HUAWEI Ads SDK HwAds.init(this); ... } ... }

对于Banner广告,HUAWEI Ads SDK提供了一个广告视图类BannerView,用于展示Banner广告。
HUAWEI Ads SDK支持以下两种方式添加BannerView:

通过配置XML布局文件添加

在XML布局文件中添加BannerView,并通过配置hwads:adId和hwads:bannerSize属性,来设置广告位ID和广告尺寸。以下示例代码中展示了如何在"res/layout/"目录下的"activity_main.xml"布局文件中添加BannerView。
代码片段示例:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:hwads="http://schemas.android.com/apk/res-auto" android:id="@+id/root_view" android:layout_width="match_parent" android:layout_height="match_parent"> <com.huawei.hms.ads.banner.BannerView android:id="@+id/hw_banner_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" hwads:adId="testw6vs28auh3" hwads:bannerSize="BANNER_SIZE_360_57"/> </RelativeLayout>

现在您已经添加了广告尺寸为BANNER_SIZE_360_57,测试广告位ID为"testw6vs28auh3"的Banner广告视图。

通过编程方式添加

除了通过配置XML,您还可以通过编程的方式来创建BannerView,只需要在"MainActivity.java"中通过以下方式来创建BannerView,并通过setAdId和setBannerAdSize方法来分别设置广告位ID和广告尺寸。
代码片段示例:

BannerView bannerView = new BannerView(this); // testw6vs28auh3为专用的测试广告位ID bannerView.setAdId("testw6vs28auh3"); bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_360_57); // 将BannerView添加到布局中 RelativeLayout rootView = findViewById(R.id.root_view); rootView.addView(bannerView);

BannerView创建好之后,接下来我们需在MainActivity中通过调用BannerView类的loadAd()方法来获取广告。
代码片段示例:

import android.os.Bundle; import android.widget.RelativeLayout; import androidx.appcompat.app.AppCompatActivity; import com.huawei.hms.ads.AdParam; import com.huawei.hms.ads.HwAds; import com.huawei.hms.ads.BannerAdSize; import com.huawei.hms.ads.banner.BannerView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化HUAWEI Ads SDK HwAds.init(this); // 获取XML中配置的BannerView BannerView bottomBannerView = findViewById(R.id.hw_banner_view); AdParam adParam = new AdParam.Builder().build(); bottomBannerView.loadAd(adParam); // 通过编程的方式添加 BannerView topBannerView = new BannerView(this); topBannerView.setAdId("testw6vs28auh3"); topBannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_SMART); topBannerView.loadAd(adParam); RelativeLayout rootView = findViewById(R.id.root_view); rootView.addView(topBannerView); } }

运行项目后,您的应用中会看到Banner广告。

祝贺您,您已经成功完成了codelab并学到了:

您可以阅读相关链接,了解更多的信息:开发指南API文档FAQ
您还可以点击源码下载

Code copied