原生广告模板

下载原生广告模板

使用原生广告时,您可以对广告进行自定义,以便提供更出色的用户体验。更好的用户体验能够提高互动度,并提升您的整体收益。

为了充分利用原生广告,一定要重视广告布局的样式设置,使其看起来与应用的自然延伸部分浑然一体。为了帮助您顺利上手,我们创建了原生广告模板。

原生广告模板是原生广告的完整代码视图,旨在加快广告植入速度并简化修改过程。借助原生广告模板,您只需几分钟时间即可植入首个原生广告,并可快速自定义广告的外观和风格,而无需编写大量代码。您可以根据需要将这些模板放在任何位置,例如新闻信息流使用的 recycler 视图中、对话框中或应用中的任何其他位置。

我们的原生广告模板以 Android Studio 模块的形式提供,因此您可以轻松地将其添加到项目中并视需要使用它们。

模板尺寸

模板分为两种:小和中。两者均使用 TemplateView 类,且都有固定的宽高比,它们会进行缩放以采用其父视图的宽度。

小模板

@layout/gnt_small_template_view

小模板非常适合 recycler 视图,也可以在您需要长方形广告视图时使用。例如,您可以将其用于信息流广告。

中型模板

@layout/gnt_medium_template_view

中等模板占页面视图的二分之一到四分之三,但也可以在 Feed 中使用。它适用于着陆页或启动页。

您可以随意尝试展示位置。当然,您也可以更改源代码和 XML 文件,以满足您的要求。

安装原生广告模板

如需安装原生广告模板,只需下载 ZIP 文件(使用 GitHub 上的“克隆”或“下载”选项)并将相应模块导入到现有的 Android Studio 项目中即可。

  1. 依次选择 File > New > Import Module

  2. 选择 nativetemplates 文件夹。

    导入原生广告模板

  3. 将下面这行代码添加到您的应用级 build.gradle 文件中:

    dependencies {
            ...
            implementation project(':nativetemplates')
            ...
    }
    

使用原生广告模板

与任何其他视图组一样,您可以在任何布局 XML 文件中使用模板。

将模板添加到布局

使用模板的过程分为两个步骤:

  1. 首先,您需要将模板添加为布局的一部分。

    <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity"
       tools:showIn="@layout/activity_main" >
    
    <!--  This is your template view -->
    <com.google.android.ads.nativetemplates.TemplateView
       android:id="@+id/my_template"
       <!-- this attribute determines which template is used. The other option is
        @layout/gnt_medium_template_view -->
       app:gnt_template_type="@layout/gnt_small_template_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
    
    ...
    </LinearLayout>
    
  2. 接下来,您需要在模板加载时向其提供您的原生广告:

    MobileAds.initialize(this);
    AdLoader adLoader = new AdLoader.Builder(this, "/6499/example/native")
        .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
            @Override
            public void onNativeAdLoaded(NativeAd nativeAd) {
                NativeTemplateStyle styles = new
                  NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
                TemplateView template = findViewById(R.id.my_template);
                template.setStyles(styles);
                template.setNativeAd(nativeAd);
            }
         })
         .build();
    
    adLoader.loadAd(new AdManagerAdRequest.Builder().build());
    

设置字典键的样式

设置模板样式的方法有两种:一种是使用传统布局 XML,另一种是使用 NativeTemplateStyle.Builder 对象。以上代码示例演示了如何使用 NativeTemplateStyle.Builder 对象设置主背景颜色,不过,我们也为您提供了多种其他选项。以下是所有可用的构建器方法。Builder 会返回一个 NativeTemplateStyle 对象,该对象将覆盖任何 XML 布局样式。XML 布局 gnt_small_template.xmlgnt_medium_template.xml 使用您已经熟悉的相同 Android 样式参数。

用于设置原生广告模板样式的构建器方法
withCallToActionTextTypeface Typeface callToActionTextTypeface

号召性用语的字体。

withCallToActionTextSize float callToActionTextSize

号召性用语文字的大小。

withCallToActionTypefaceColor int callToActionTypefaceColor

号召性用语文字的颜色。

withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

号召性用语的背景颜色。

withPrimaryTextTypeface Typeface primaryTextTypeface

第一行文本的字体。

withPrimaryTextSize float primaryTextSize

第一行文字的大小。

withPrimaryTextTypefaceColor int primaryTextTypefaceColor

第一行文字的颜色。

withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

第一行文字的背景颜色。

withSecondaryTextTypeface Typeface secondaryTextTypeface

第二行文本的字体。

withSecondaryTextSize float secondaryTextSize

第二行文字的大小。

withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

第二行文字的颜色。

withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

第二行文字的背景颜色。

withTertiaryTextTypeface Typeface tertiaryTextTypeface

第三行文本的字体。

withTertiaryTextSize float tertiaryTextSize

第三行文字的大小。

withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

第三行文字的颜色。

withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

第三行文字的背景颜色。

withMainBackgroundColor ColorDrawable mainBackgroundColor

主背景颜色。

贡献

我们制作了原生广告模板来帮助您快速开发原生广告。期待您为我们的 GitHub 代码库贡献代码,添加新的模板或功能。请向我们发送拉取请求,我们会进行调查