직접 설정

네이티브 광고 레이아웃을 직접 설정하여 사용하실 경우의 가이드 입니다.

1. 직접 설정

1) 네이티브 XML 레이아웃 (native_ad_layout.xml)

AdPopcornSSPNativeAd View 안에 사용하고자 하는 UI component를 아래 샘플과 같이 추가합니다.

AdPopcornSSPNativeAd ViewGroup 안에 AdPopcorn SSP에서 지원하는 5가지 asset의 레이아웃 을 구성한 뒤, native_ad_layout.xml을 네이티브 광고를 노출하고자 하는 Main Layout에 추가하여 사용한다.

<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:id="@+id/apssp_native_ad_view"
        android:background="#FFFFFF">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal"
            android:background="#FFFFFF">
            <ImageView
                android:id="@+id/apssp_native_ad_icon_image1"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="10dp"/>
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center"
                android:orientation="vertical">
                <TextView
                    android:id="@+id/apssp_native_ad_title1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#000000"/>
                <TextView
                    android:id="@+id/apssp_native_ad_desc1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxLines="2"
                    android:textColor="#000000"/>
            </LinearLayout>
            <TextView
                android:id="@+id/apssp_native_ad_ctatext1"
                android:layout_width="60dp"
                android:layout_height="30dp"
                android:layout_marginTop="25dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="#3d7caf"
                android:textColor="#ffffff"
                android:textColorHint="#ffffff"
                android:gravity="center"
                android:textSize="16sp" />
        </LinearLayout>
        <ImageView
            android:id="@+id/apssp_native_ad_main_image1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>

2) Native Asset 연결

xml에 생성한 resource id를 ViewBinder를 이용하여 아래와 같은 방식으로 매칭합니다.

AdPopcornSSPViewBinder Builder 생성 시, view id(R.id.adpopcorn_native_ad_view)와 layout id(R.layout.adpopcorn_native_ad_unit_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.

privacyIcon 관련한 값들은 필수 설정 값이 아니며, 커스터마이징 하고자 할 경우, 세팅하여 사용하시면 됩니다.

privacyIconWidth, privacyIconHeight, LeftRightMargin, TopBottomMargin 에 입력되는 숫자는 모두 dp 기준으로 적용해 주시면 됩니다. 또한, 샘플 코드에 나와 있는 값은 default 값이기에 해당 값을 변경하지 않을 경우, 세팅하지 않아도 됩니다.

AdPopcornSSPViewBinder apsspViewBinder 
= new AdPopcornSSPViewBinder.Builder(R.id.adpopcorn_native_ad_view)
        .iconImageViewId(R.id.apssp_native_ad_icon_image1)
        .descViewId(R.id.apssp_native_ad_desc1)
        .mainImageViewId(R.id.apssp_native_ad_main_image1)
        .titleViewId(R.id.apssp_native_ad_title1)
        .callToActionId(R.id.apssp_native_ad_ctatext1)
	.privacyIconPosition(AdPopcornSSPNativeAd.PrivacyIconPosition.BOTTOM_LEFT)
        .privacyIconWidth(15)
        .privacyIconHeight(15)
        .privacyIconLeftRightMargin(2)
        .privacyIconTopBottomMargin(2)
        .build();

adpopcornSSPNativeAd.setAdpopcornSSPViewBinder(igawViewBinder);