Page Comparison

...

public class CustomFeedHeaderViewAdapter implements FeedHeaderViewAdapter {

    @Override
    public View onCreateView(final Context context, final ViewGroup parent) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        return inflater.inflate(R.layout.your_feed_header_layout, parent, false);
    }

    @Override
    public void onBindView(final View view, final int reward) {
        // Display total reward on the header if needed.
        valfinal TextView textView: TextView = view.findViewById(R.id.your_textview);
        textView.text = setText(String.format("리워드 %d원", reward));
    }
    
    @Override 
    public void onDestroyView() {
        // Use this this callback for clearing memory 
    }
}

...

1. 뷰 레이아웃(view_customized_cta.xml)을 구현하세요.
   다음은 레이아웃 리소스로 뷰 레이아웃을 구현한 예시입니다.

   Code Block
   language xml
   <!-- view_customized_cta.xml --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/colorPrimaryDark"> <!-- CTA 버튼의 텍스트 --> <TextView android:id="@+id/textCta"> <!-- CTA 버튼의 아이콘 이미지 --> <ImageView android:id="@+id/imageReward" android:layout_width="24dp" android:layout_height="24dp" android:src="아이콘 이미지 리소스" /> <!-- CTA 버튼의 리워드 텍스트 --> <TextView android:id="@+id/textReward"> </LinearLayout>

2. CtaView 클래스를 상속하는 서브클래스인 CustomCtaView를 생성하세요.

3. CtaView 클래스에서 사용하던 CTA View 레이아웃을 inflate하도록 구현하세요.

4. 사용자의 광고 참여 상태에 따라 호출되는 아래의 오버라이딩 메소드에서 CTA 버튼의 아이콘 이미지, 텍스트, 리워드 값을 구현하세요.

   • renderViewParticipatingState : 사용자가 광고에 참여 중인 상태 (예: 액션형 광고의 랜딩 페이지에 진입한 상태)

   • renderViewParticipatedState : 사용자가 광고 참여를 완료한 상태

   • renderViewRewardAvailableState : 사용자가 아직 광고에 참여하지 않은 상태

   • renderViewRewardNotAvailableState : 사용자가 획득할 리워드가 없는 광고

     Code Block
     language java
     public class CustomCtaView extends CtaView { private final ImageView rewardImageView; private final TextView rewardTextView; private final TextView ctaTextView; public CustomCtaView(@NonNull Context context) { this(context, null); } public CustomCtaView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public CustomCtaView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO: 기존에 사용하던 CTA View 레이아웃을 inflate 하도록 구현하세요. inflate(getContext(), R.layout.view_customized_cta, this); this.rewardImageView = findViewById(R.id.imageReward); this.rewardTextView = findViewById(R.id.textReward); this.ctaTextView = findViewById(R.id.textCta); } // CTA 텍스트 설정 public void setCtaText(String ctaText) { ctaTextView.setText(ctaText); } // CTA 리워드 값 설정 public void setRewardText(String rewardText) { rewardTextView.setText(rewardText); } // CTA 아이콘 설정 public void setRewardIcon(@DrawableRes int iconResId) { rewardImageView.setImageResource(iconResId); rewardImageView.setVisibility(View.VISIBLE); } // CTA 아이콘 숨기기 처리 public void hideRewardIcon() { rewardImageView.setVisibility(View.GONE); } // 사용자가 광고에 참여 중인 상태 @Override public void renderViewParticipatingState(@NonNull String callToAction) { setCtaText("참여 확인 중"); hideRewardIcon(); setRewardText(""); } // 사용자가 광고 참여를 완료한 상태 @Override public void renderViewParticipatedState(@NonNull String callToAction) { setRewardIcon(R.drawable.my_participated_icon); setRewardText(""); setCtaText("참여 완료"); } // 사용자가 아직 광고에 참여하지 않은 상태 @Override public void renderViewRewardAvailableState(@NonNull String callToAction, int reward) { setRewardIcon(R.drawable.my_reward_icon); setRewardText(String.format(Locale.US, "+%,d", reward)); setCtaText(callToAction); } // 사용자가 획득할 리워드가 없는 광고 @Override public void renderViewRewardNotAvailableState(@NonNull String callToAction) { hideRewardIcon(); setRewardText(""); setCtaText(callToAction); } }

5. 새로 생성한 CustomCtaView 클래스의 경로를 Feed 광고 레이아웃에 설정하세요.
   다음은 Feed 광고의 레이아웃 예시입니다.

   Code Block
   language xml
   <com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView android:id="@+id/native_ad_view"> <com.buzzvil.buzzad.benefit.presentation.media.MediaView android:id="@+id/mediaView"/> <TextView android:id="@+id/textTitle"/> <TextView android:id="@+id/textDescription"/> <ImageView android:id="@+id/imageIcon"/> <!-- TODO: 새로 생성한 CustomCtaView 클래스 경로를 설정합니다. --> <com.your.packagename.CustomCtaView android:id="@+id/customCtaView"/> </com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

6. 다음 순서에 따라 직접 구현한 CTA 버튼을 Feed 광고에 반영하세요.

   1. Feed 광고 레이아웃에서 NativeAdView와 커스텀 CTA 버튼인 CustomCtaView를 가져오세요.

   2. loadAd()메소드를 호출한 후 Feed 광고가 성공적으로 할당되어 onAdLoaded 콜백 메소드가 호출되면, NativeAdViewBinder의 ctaView 속성을 customCtaView로 설정하세요.

   3. bind()를 호출하여 광고 레이아웃에 광고 데이터를 광고 디자인 자체 구현하기를 참고하여 CustomAdsAdapter 를 구현하세요.

   4. CustomAdsAdapter.onBindViewHolder에서 CustomCtaView를 객체화하세요.

   5. NativeAdViewBinder.Builder에 새로 생성한 CustomCtaView를 바인딩하세요.

      Code Block
      language java
      //class TODOCustomAdAdapter: Feed 광고 레이아웃에서 NatieAdView와 구성 요소를 가져옵니다AdsAdapter<AdsAdapter.NativeAdViewHolder>() { // 생략... final NativeAdView nativeAdView = findViewById(R.id.your_native_ad_view); //... 생략 ... // TODO: Feed 광고 레이아웃에서 CustomCtaView를 가져옵니다. final CustomCtaView customCtaView = nativeAdView.findViewById(R.id.customCtaView); final NativeAdRequest nativeAdRequest = new NativeAdRequest.Builder().build(); final BuzzAdNative buzzAdNative = new BuzzAdNative("YOUR_NATIVE_UNIT_ID"); buzzAdNative.loadAd(nativeAdRequest, new BuzzAdNative.AdLoadListener() { @Override public void onAdLoaded(@NotNull NativeAd nativeAd) { // 할당된 광고가 있으면 호출됩니다. // TODO: 광고 데이터를 바인딩할 때, ctaView 속성을 customCtaView로 설정합니다. override fun onBindViewHolder(holder: NativeAdViewHolder, nativeAd: NativeAd) { super.onBindViewHolder(holder, nativeAd) final NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(nativeAdView, mediaView)// 생략... val customCtaView: CustomCtaView = view.titleTextView(titleTextViewfindViewById(R.id.customCtaView) val viewBinder: NativeAdViewBinder = NativeAdViewBinder.descriptionTextView(descriptionTextView)Builder(view, mediaView) // .iconImageView(iconImageView)생략... .ctaView(customCtaView) .build(); viewBinder.bind(nativeAd); } // ... 생략 ... });

...