原生範本

選取平台： Android iOS Flutter

下載原生範本

重點：繼續操作前，請先瞭解如何載入原生廣告。

利用原生廣告，您可以自訂廣告，提供更優質的使用者體驗，並進一步提高參與度和整體收益。

如想充分發揮原生廣告的效益，請務必設計廣告版面配置，確保廣告自然融入應用程式。為了協助您快速上手，我們製作了原生範本。

這些範本是內建完整程式碼的原生廣告檢視區塊，可供您快速導入及輕鬆修改。有了原生範本，只要幾分鐘就能導入第一則原生廣告，還能迅速自訂外觀和風格，不必撰寫大量程式碼。這些範本可以放在任何地方，包括新聞動態消息中使用的 RecyclerView、對話方塊中，或應用程式內的任意位置。

注意：如要自行從零開始設計原生版面配置，請改為參閱「原生進階」說明文件。

原生範本是以 Android Studio 模組的形式提供，因此可以輕鬆納入專案，自由使用。

範本大小

範本分為小型和中型兩種，都採 TemplateView 類別，顯示比例固定。這些範本會縮放，填滿上層檢視區塊的寬度。

小型範本

@layout/gnt_small_template_view

小型範本非常適合用於 RecyclerView，或任何需要長方形廣告檢視區塊的情況，例如在動態內廣告中使用。

中型範本

@layout/gnt_medium_template_view

中型範本會占據一半到四分之三的頁面區塊，但也可在動態消息內使用，適合用於到達網頁或啟動頁面。

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

安裝原生廣告範本

如要安裝原生範本，只要下載 ZIP 檔案 (使用 GitHub 上的「Clone or download」選項)，然後將模組匯入現有的 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, "/21775744923/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 物件設定主要背景顏色，但您也可以使用其他多種選項。以下列出所有可用的建構工具方法。建構工具會傳回 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 存放區新增範本或功能。只要傳送提取要求，我們便會處理。