[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 3탄- MediaNativeAdsFactory로 레이아웃(UI, xml) 연결하기

2탄에서 만든 xml파일로 네이티브 광고의 UI를 구현했고 이것을 안드로이드 코드와 연결(?)하는 기능을 하는 MediaNativeAdsFactory 클래스를 구현해보겠습니다. 저는 이 부분을 앞서 만든 네이티브 광고 UI와 안드로이드 시스템을 연결하고 UI에 보여줄 데이터를 입력하는 과정이라 이해했습니다. 

 

저는 자바로 구현했지만 코틀린으로 구현도 가능합니다. 해당 파일은 MainActivity.kt파일이 있는 곳에 만듭니다. 

 

---

MediaNativeAdsFactory 만들기

NativeAdFactory를 구현하는 MediaNativeAdsFactory 클래스를 만들고 NativeAdView를 리턴하는 createNativeAd() 메소드를 구현합니다. 아래 코드를 하나하나 살펴보면 일단 xml로 만든 UI를 인스턴스화 해서 접근할수 있도록 하기 위해 layoutInflater.inflate를 사용했습니다. 

 

xml로 만든 UI를 인스턴스화 

NativeAdView nativeAdView = (NativeAdView)layoutInflater.inflate(R.layout.media_native_ads, null);

 

id로 각각의 UI 요소 연결하기 

xml에 보면 각각의 요소 별로 id가 있는데 이 아이디로 nativeAdView.findViewById(R.id.ad_media) 이렇게 연결하고 nativeAdView.setMediaView로 연결된 UI에 set을 합니다. 

네이티브 광고 데이터 연결하기

UI와 네이티브 코드를 연결한뒤에는 네이티브광고의 컨텐츠를 주입하는 과정이 필요합니다. 이것이 아래 코드입니다. 

nativeAdView.getMediaView().setMediaContent(nativeAd.getMediaContent());

 

package 패키지명;

import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;

public class MediaNativeAdsFactory implements NativeAdFactory {

    private final LayoutInflater layoutInflater;

    MediaNativeAdsFactory(LayoutInflater layoutInflater) {
        this.layoutInflater = layoutInflater;
    }

    @Override
    public NativeAdView createNativeAd(NativeAd nativeAd, Map<String, Object> customOptions) {

        NativeAdView nativeAdView = (NativeAdView) layoutInflater.inflate(R.layout.media_native_ads, null);

        nativeAdView.setMediaView(nativeAdView.findViewById(R.id.ad_media));
        nativeAdView.getMediaView().setMediaContent(nativeAd.getMediaContent());

        nativeAdView.setHeadlineView(nativeAdView.findViewById(R.id.headline));
        ((TextView) nativeAdView.getHeadlineView()).setText(nativeAd.getHeadline());

        nativeAdView.setIconView(nativeAdView.findViewById(R.id.ad_icon));
        if (nativeAd.getIcon() == null) {
            nativeAdView.getIconView().setVisibility(View.GONE);
        } else {
            ((ImageView) nativeAdView.getIconView()).setImageDrawable(nativeAd.getIcon().getDrawable());
            nativeAdView.getIconView().setVisibility(View.VISIBLE);
        }

        nativeAdView.setBodyView(nativeAdView.findViewById(R.id.list_body));
        if (nativeAd.getBody() == null) {
            nativeAdView.getBodyView().setVisibility(View.INVISIBLE);
        } else {
            nativeAdView.getBodyView().setVisibility(View.VISIBLE);
            ((TextView) nativeAdView.getBodyView()).setText(nativeAd.getBody());
        }

        nativeAdView.setNativeAd(nativeAd);
        return nativeAdView;
    }
}

 

 

이처럼 xml파일에 설정한 id값으로 이용해서 연결하고 광고 데이터를 주입하는 기능을 수행하는 클래스를 만들었습니다. 

마지막으로 nativeAdView.setNativeAd(nativeAd); 최종 세팅을 마지고 리턴해주면 끝입니다.