靜態原生廣告(結合Adapter使用,例如ListView或GridView) - IDroi/AdZodiac GitHub Wiki
靜態原生廣告讓你可以透過跟訊息流一致的設計版樣呈現給使用者來為你的應用程式獲得收益。靜態原生廣告應用程式介面提供AdZodiacAdAdapter
,他可以囊括你原本訊息流的Adapter
,並且把廣告插入ListView
、GridView
或者其他使用Adapter
實作的View
物件。使用這個類別,AdZodiac自動會幫你處理圖片的快取機制與收益追蹤,這樣你就可以專注在如何呈現廣告這個議題上。
加入靜態原生廣告於你的應用程式只需要下面幾個步驟:
- 定義你的
ViewBinder
來創造廣告內容的圖層View
- 創立
AdZodiacAdAdapter
來囊括原本訊息流的Adapter
- 使用API下載靜態原生廣告
在你下載AdZodiac靜態原生廣告之前,你需要先依照快速入門內的流程完成創立AdZodiac帳號與廣告單位識別碼,並且整合AdZodiac Android API到你的專案。
-
檢查你的安卓應用程式的Manifest
需要更新你的
AndroidManifest.xml
裡的 Permission 和 Activity 來整合AdZodiac應用程式介面進你的應用程式。宣告下列的
uses-permission
標籤:<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
宣告下列的
activity
標籤於你的<application>
:<activity android:name="com.flurry.android.FlurryFullscreenTakeoverActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/> <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/> <activity android:name="com.facebook.ads.AudienceNetworkActivity" android:configChanges="keyboardHidden|orientation|screenSize" /> <activity android:name="com.adzodiac.common.AdZodiacBrowser" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.adzodiac.mobileads.AdZodiacActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.adzodiac.mobileads.MraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.adzodiac.mobileads.MraidVideoPlayerActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.adzodiac.mobileads.RewardedMraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <!--當開發者已經有使用卓易BaaS服務時可以不用填下列應用程式識別碼--> <meta-data android:name="com.droi.sdk.application_id" android:value="hlqvmbzhC6LuapuYJPwEVziIUxMql1MAlQDblHgI" /> <!--當開發者有開啟One by AOL網路時需要加入的provider--> <provider android:name="com.millennialmedia.internal.utils.MediaContentProvider" android:authorities="${applicationId}.MediaContentProvider" android:grantUriPermissions="true" android:exported="false" />
-
定義你的
ViewBinder
並註冊到AdapterAdAdapter
AdZodiac的廣告渲染器將會使用你的
ViewBinder
來渲染你的廣告內容,你必須在ActivityonCreate()
或者 FragmentonCreateView()
定義它。// set up your original adapter final ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1); for (int i = 0; i < 100; ++i) { adapter.add("Item " + i); } // set up AdZodiacAdAdpter mAdZodiacAdAdapter = new AdZodiacAdAdapter(getActivity(), adapter); ViewBinder viewBinder = new ViewBinder.Builder(R.layout.native_ad_list_item) .titleId(R.id.native_title) .textId(R.id.native_text) .mainImageId(R.id.native_main_image) .iconImageId(R.id.native_icon_image) .callToActionId(R.id.native_cta) .starRatingId(R.id.native_star) .privacyInformationIconImageId(R.id.native_privacy_information_icon_image) .build(); AdZodiacStaticNativeAdRenderer renderer = new AdZodiacStaticNativeAdRenderer(viewBinder); mAdZodiacAdAdapter.registerAdRenderer(renderer); // bind AdZodiacAdZdapter to your original ListView listView.setAdapter(mAdZodiacAdAdapter);
在你的
native_ad_list_item.xml
:<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:id="@+id/native_outer_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:clickable="true"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/native_icon_image" android:layout_width="64dp" android:layout_height="wrap_content" android:background="@null" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:contentDescription="@string/native_icon_image" /> <TextView android:id="@+id/native_title" android:layout_width="match_parent" android:layout_marginLeft="84dp" android:layout_marginTop="32dp" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:textColor="@android:color/darker_gray" android:textStyle="bold" android:textSize="@dimen/native_ad_title_size"/> <TextView android:id="@+id/native_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/native_icon_image" android:layout_alignParentLeft="true" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:textColor="@android:color/darker_gray" android:maxLines="2"/> <com.adzodiac.nativeads.MediaLayout android:id="@+id/native_main_video" android:gravity="center" android:scaleType="centerCrop" android:layout_width="match_parent" android:layout_height="wrap_content" /> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/native_main_image" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@null" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_below="@+id/native_text" android:layout_alignParentLeft="true" android:contentDescription="@string/native_main_image" /> <RatingBar android:id="@+id/native_star" style="@style/Widget.AppCompat.RatingBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:layout_marginLeft="20dp" android:layout_below="@+id/native_main_image" android:isIndicator="true" android:maxHeight="16dp" android:minHeight="16dp" android:numStars="5" android:rating="0" /> <Button android:id="@+id/native_cta" android:layout_width="wrap_content" android:layout_height="35dp" android:text="@string/learn_more" android:textColor="@android:color/black" android:textStyle="bold" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:layout_below="@+id/native_main_image" android:textSize="12sp" android:layout_alignParentRight="true" android:clickable="true" android:paddingBottom="10dp" /> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/native_privacy_information_icon_image" android:layout_width="40dp" android:layout_height="40dp" android:padding="10dp" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:contentDescription="@string/native_privacy_information_icon_image" /> </RelativeLayout>
-
下載靜態原生廣告於你的應用程式
String adUnitId = "YOUR_STATIC_NATIVE_AD_UNIT_ID"; mAdZodiacAdAdapter.loadAds(adUnitId);
-
(選擇性)添加其他渲染器
若你使用打開Facebook, Google, Flurry廣告網路來源,那麼你就要額外註冊以下的渲染器:
FacebookAdRenderer facebookAdRenderer = new FacebookAdRenderer(viewBinder); GooglePlayServicesAdRenderer googlePlayServicesAdRenderer = new GooglePlayServicesAdRenderer(viewBinder); FlurryViewBinder flurryViewBinder = new FlurryViewBinder.Builder(viewBinder) .videoViewId(R.id.native_main_video) .build(); FlurryNativeAdRenderer flurryNativeAdRenderer = new FlurryNativeAdRenderer(flurryViewBinder); mAdZodiacSingleNative.registerAdRenderer(facebookAdRenderer); mAdZodiacSingleNative.registerAdRenderer(googlePlayServicesAdRenderer); mAdZodiacSingleNative.registerAdRenderer(flurryNativeAdRenderer);
-
記得在
Activity
裡的onDestroy()
或Fragment
裡的onDestroyView()
呼叫AdZodiacAdAdapter
物件的destroy()
方法。
範例程式:
public class NativeListViewFragment extends Fragment{
private AdZodiacAdAdapter mAdZodiacAdAdapter;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
final View view = inflater.inflate(R.layout.sample_list_view_fragment, container, false);
final ListView listView = (ListView) view.findViewById(R.id.native_list_view);
AdZodiacSample adZodiacSample = AdZodiacSample.fromBundle(getArguments());
final String adUnitId = adZodiacSample.getAdUnitId();
final DetailFragmentViewHolder views = DetailFragmentViewHolder.fromView(view);
views.mAdUnitIdView.setText(adUnitId);
views.mDescription.setText(adZodiacSample.getDescription());
views.mLoadAdButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
KeywordParameters parameters = new KeywordParameters.Builder()
.setRankingMethod((KeywordParameters.RankMethods) views.mRankingMethodSpinner.getSelectedItem())
.setAge((KeywordParameters.Age) views.mAgeSpinner.getSelectedItem())
.setAppCategory((KeywordParameters.AppCategories) views.mCategorySpinner.getSelectedItem())
.setTime((KeywordParameters.Time) views.mTimeSpinner.getSelectedItem())
.setGender((KeywordParameters.Gender) views.mGenderSpinner.getSelectedItem())
.build();
if(mAdZodiacAdAdapter != null){
mAdZodiacAdAdapter.loadAds(adUnitId, parameters);
}
}
});
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_1);
for (int i = 0; i < 100; ++i) {
adapter.add("Item " + i);
}
mAdZodiacAdAdapter = new AdZodiacAdAdapter(getActivity(), adapter);
ViewBinder viewBinder = new ViewBinder.Builder(R.layout.native_ad_list_item)
.titleId(R.id.native_title)
.textId(R.id.native_text)
.mainImageId(R.id.native_main_image)
.iconImageId(R.id.native_icon_image)
.callToActionId(R.id.native_cta)
.starRatingId(R.id.native_star)
.privacyInformationIconImageId(R.id.native_privacy_information_icon_image)
.build();
AdZodiacStaticNativeAdRenderer renderer = new AdZodiacStaticNativeAdRenderer(viewBinder);
/* Optional */
FacebookAdRenderer facebookAdRenderer = new FacebookAdRenderer(viewBinder);
GooglePlayServicesAdRenderer googlePlayServicesAdRenderer = new GooglePlayServicesAdRenderer(viewBinder);
FlurryViewBinder flurryViewBinder = new FlurryViewBinder.Builder(viewBinder)
.videoViewId(R.id.native_main_video)
.build();
FlurryNativeAdRenderer flurryNativeAdRenderer = new FlurryNativeAdRenderer(flurryViewBinder);
mAdZodiacAdAdapter.registerAdRenderer(facebookAdRenderer);
mAdZodiacAdAdapter.registerAdRenderer(googlePlayServicesAdRenderer);
mAdZodiacAdAdapter.registerAdRenderer(flurryNativeAdRenderer);
/* Optional */
mAdZodiacAdAdapter.registerAdRenderer(renderer);
listView.setAdapter(mAdZodiacAdAdapter);
mAdZodiacAdAdapter.loadAds(adUnitId);
return view;
}
@Override
public void onDestroyView() {
mAdZodiacAdAdapter.destroy();
super.onDestroyView();
}
}