原生範本

選取平台： Android iOS Flutter

使用原生廣告自訂廣告，提供更優質的使用者體驗。提升使用者體驗有助於提高參與度，並改善整體收益。

如要充分發揮原生廣告的效益，請務必設計廣告版面配置，讓廣告看起來像是應用程式的自然延伸。為協助您入門，我們建立了原生範本。

原生範本是原生廣告的完整程式碼檢視畫面，可供您快速導入及輕鬆修改。使用原生範本，您只需幾分鐘就能導入第一則原生廣告，並快速自訂外觀和風格，不必編寫大量程式碼。您可以將這些範本放在任何位置，例如新聞動態消息中使用的回收器檢視區塊、對話方塊，或應用程式中的任何其他位置。

我們的原生範本以 Android Studio 模組的形式提供，因此您可以輕鬆將範本納入專案，並隨意使用。

範本大小

範本分為兩種：小型和中型。兩者都使用 TemplateView 類別，且顯示比例固定。這些檢視區塊會縮放，以填滿父項檢視區塊的寬度。

小型範本

@layout/gnt_small_template_view

小型範本非常適合用於回收器檢視區塊，或任何需要長方形廣告檢視區塊的情況。例如，您可以在動態內廣告中使用這項功能。

中型範本

@layout/gnt_medium_template_view

中型範本的設計是佔據半頁到四分之三頁面，但也可以用於動態消息。適合用於到達網頁或啟動畫面。

您可以隨意調整刊登位置，當然，您也可以根據需求變更原始碼和 XML 檔案。

安裝原生廣告範本

如要安裝原生範本，只要下載 ZIP 檔案 (使用 GitHub 上的「Clone or download」選項)，然後將模組匯入現有的 Android Studio 專案即可。

依序選擇「File」>「New」>「Import Module」。
選取 nativetemplates 資料夾。

在應用程式層級的 build.gradle 檔案中新增下列程式碼：

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

使用原生廣告範本

您可以在任何版面配置 XML 檔案中使用範本，就像使用其他檢視區塊群組一樣。

將範本新增至版面配置

使用範本的程序分為兩個步驟：

首先，您需要在版面配置中加入範本。

<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>

接著，您需要在範本載入時提供原生廣告：

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 AdRequest.Builder().build());

樣式字典鍵

您可以透過兩種方式設定範本樣式：使用傳統版面配置 XML，以及使用 NativeTemplateStyle.Builder 物件。上述程式碼範例說明如何使用 NativeTemplateStyle.Builder 物件設定主要背景顏色，但您也可以使用其他選項。以下是所有可用的建構工具方法。建構工具會傳回 NativeTemplateStyle 物件，覆寫所有 XML 版面配置樣式。XML 版面配置 gnt_small_template.xml 和 gnt_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 存放區，新增範本或功能。請傳送提取要求給我們，我們會查看。