Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

CtaView (버튼) 커스터마이징

CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 다음과 같이 설정을 진행하면 됩니다BuzzAd SDK 에서 기본으로 제공하는 CtaView UI 및 처리 로직을 사용하지 않고 기획에 맞게 구현할 경우 다음과 같이 진행할 수 있습니다.

Info

4.1. 기본 설정 | Step3 에서 안내한 populateAd 에서, CtaView 부분을 아래와 같이 수정합니다.

Code Block
languagejava
public void populateAd(final NativeAd nativeAd) {
    final NativeAdView view = findViewById(R.id.native_ad_view);

    final Ad ad = nativeAd.getAd();

   final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();// create ad component
    ...생략...
    
    final YourCtaView ctaView = view.findViewById(R..(생략)...id.your_cta_view);
    // View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.updateCtaStatus(ctaView, nativeAd);
    
    ...생략...

    final CustomCtaViewList<View> customizedCtaViewclickableViews = view.findViewById(R.id.customCtaViewnew ArrayList<>();
     // 아래 정보를 이용하여 cta view를 업데이트
    final String callToAction = nativeAd.getAd().getCallToAction();clickableViews.add(customizedCtaView);
    
    ...생략...

    nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
    final int reward = nativeAd...getAd(생략)..getReward(); // 주의사항 참조.

      final boolean participated@Override
= nativeAd.isParticipated();       public void  updateCtaStatusonClicked(customizedCtaView, nativeAd);
  
    ...(생략)...@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
        final List<View> clickableViews = new ArrayList<>();
    clickableViews.add(customizedCtaView)updateCtaStatus(ctaView, nativeAd);;
    ...(생략)...    }
 nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {     
   ...(생략)...

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
             updateCtaStatus(customizedCtaViewctaView, nativeAd);
        }
    });
}

// 기획에 따라 수정될 수 있는 예시 코드입니다. 
void updateCtaStatus(CustomCtaViewYourCtaView ctaView, NativeAd nativeAd) {
    final String callToAction = nativeAd.getAd().getCallToAction();
    final int reward = nativeAd.getAvailableReward();
    final int totalReward = nativeAd.getAd().getReward();
    final boolean participated = nativeAd.isParticipated();
    final boolean isClicked = nativeAd.isClicked();
    final boolean isActionType = nativeAd.getAd().isActionType();


    if (isClicked && isActionType && !participated) {
        ctaView.setCtaText("참여 확인 중");
        ctaView.setRewardIcon(null);
        ctaView.setRewardText(null);
    } else {
        if (totalReward > 0 && participated) {
            ctaView.setRewardIcon(R.drawable.your_reward_received_icon);
            ctaView.setRewardText(null);
            ctaView.setCtaText("참여 완료");
        } else if (reward > 0) {
            ctaView.showRewardImage(R.drawable.your_reward_icon);
            ctaView.setRewardText(String.format(Locale.US, "+%,d", reward));
            ctaView.setCtaText(callToAction);
        } else {
            ctaView.showRewardImage(null);
            ctaView.setRewardText(null);
            ctaView.setCtaText(callToAction);
        }
    }
}